Jump to content

Have the <div> and logo to stand still and not follow the scroll up and down when I scroll.

LeonLatex

By LeonLatex
in CSS Help

 Share

Recommended Posts

LeonLatex Advanced Member

LeonLatex

Posted
Posted

I think I have posted correctly, otherwise MOD can move it to where it belongs, i hope.
I have divided my page into header.php, nav.php, footer.php. It is nav.php that can be scrolled. I want header.php with its <div class = ""> for CSS style and logo to stand still and not follow the scroll up and down when I scroll.

How do I do that with CSS?

 I have tried with the position: fixed; - Doesent work....

<div class="w3-container w3-card-4 w3-light-gray" style="height: 31px, position: fixed"> (the style property woeks fine, and the same does the position: fixed; on the menu <div>

 

What do i do wrong?

LeonLatex Advanced Member

LeonLatex

Posted
  • Author
Posted
19 minutes ago, requinix said:

I think the main problem here is that you have a HTML and CSS question and haven't posted any of your HTML or CSS.

 

Yes i did. look at the last line and you will find my HTML. If you want my whole html and css you will find that below:

(I think the whole is here)

 

index.php 

<?php require_once("header.php") ?>
<body class="base">
	<div class="wrapper">
	<?php require_once("mnu.php") ?>
	<!--Conten Boxt Start-->
	<div class="main_content_box w3-content w3-card-4 w3-margin-top w3-padding w3-light-gray">
	<!-- Content Start -->
	<div class="main_content">
  	<h4 class="headline_bold"></h4>
	<h3 class="content"</h3>
	<?php require_once("contact.php")
	<!-- Content slutt -->
	</div>
	<!-- content box slutt -->
	</div>
	<!-- Footer Start -->
	<?php require_once("footer.php") ?>

 

header.php 

<!doctype html>
<html lang="NO" class="size">
<head>
<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<link href="css/nav.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="HTML, CSS, JavaScript, SQL, PHP, MySQL, My SQL, Java, Webutvikling, W3C, opplæringsprogrammer, programmering, opplæring, læring, eksempler, øvelser, kildekode, farger, demoer, tips">
<meta name="description" content="Godt organiserte og lett å forstålige opplæringsveiledninger for nettbygging med mange eksempler på hvordan du bruker HTML, SGML, CSS, JavaScript, SQL, PHP, XHTML og XML">
<title>WEBMASTERinfo</title>
<!-- CSS Color Choises for Menu Row/Bar Start -->
<style type='text/css'>
    .w3-vomit {
        background-color: #009933;
        /*color: #ff8833;*/ 
    }
    
.button:hover {
  background-color: #0000ff; /* Green */
  color: white;
    }

a:link {
	color: #008833;
	font-weight: normal;
	font-size: 14px;
	text-align: center;
	line-height: 1;	
}

a:visited {
  color: #008833;;
}

a:hover {
  color: #ff8833;
  transition-duration: 0.9s;
}

a:active {
  color: #ff8833;
}
</style>
<!-- CSS Color Choises for Menu Row/Bar Slutt -->
</head>

<body class="base">
	<div class="wrapper">
	<div class="logo_box"></div>
	<?php require_once("bar.php") ?><br>

 

contact.php (the midle one that scrols and goes up and down). 

<?php require_once("header.php") ?>
<body class="base">
	<div class="wrapper">
	<?php require_once("mnu.php") ?>
	<!--Conten Boxt Start-->
	<div class="w3-content w3-card-4 w3-margin-top w3-padding w3-light-gray">
	<!-- Content Start -->
  	<h4 class="headline_bold">Besøksadresse:</h4>
	<h3 class="content">Fjordsveien 14, 2760 Brandbu.<br>(Mot Ulsnestangen/badestarnda)</h3>
	<h4 class="headline_bold">Postadresse:</h4>
	<h3 class="content">Postbox 151, 2712 Brandbu.</h3>
	<h4 class="headline_bold">Mobil:</h4>
	<h3 class="content">93201691</h3>
	<br>
	<!-- Content slutt -->
	<!-- content box slutt -->
	</div>
	<!-- Footer Start -->
	<?php require_once("footer.php") ?>

 

footer.php 

	<div class="copyright_box"><br>
<?php  

echo "<class='copyright_box'>Copyright &copy; 1999-";  
 
	$year = date("Y");  
  
echo $year
?>
	<!-- slutt copyright_box -->
	</div>
  <!-- slutt wrapper -->
  </div>
</body>
</html>

 

CSS (the whole) 

/*CSS Document*/
html {
	height: 100%;
  	width: 100%;
	padding: 0;
	margin: 0;
}

body {
	background-color: #ffffff;
	height: 100%;
  	width: 100%;
	padding: 0;
	margin: 0;
	margin: auto;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-family: "Helvetica, Ariel";
}

div.wrapper {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
  	display: block;
	margin: auto;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	/*border: solid 1px;
	border-color: #ffcc99;
	border-radius: 5px;*/
}

div.logo_box {
	background-image: url("../img/logo1.png");
	margin: 10px;
	align: left;
	width: 420px;
	height: 56px;
	/*border: solid 1px;
	border-color: #999966;
	border-radius: 5px;*/
}

div.menu_box {
	color: #008833;
	position: fixed;
  	margin-top: 0px;
  	margin-left: 10px;
  	width: 165px;
	/*max-height; 100px;*/
	height: 300px;
	/*border: solid 1px;*/
	/*border-color: #ffcc99;*/
	/*border-radius: 5px;*/
}

div.content_box {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	/*width: 50%;*/
	/*position: fixed;*/
    margin-top: 5px;
	width: 950px;
	max-height: 100%;
	margin: auto;
	border: solid 1px;
	border-color: #ffcc99;
	border-radius: 5px;

}

div.main_content_box {
	margin-top: 5px;
    width: 700px;
    max-height:100%;
    margin: 35px auto;
	font-weight: normal;
	/*background-color: #cc9966;*/
}

div.main_content {
	margin-top: 5px;
    width: 630px;
    max-height:100%;
    margin: 35px auto;
	font-weight: normal;
	/*background-color: #cc9966;*/
}

p.bold{
	font-family: "Helvetica, Ariel";
	font-weight: bold;
	font-size: 18px;
}

a.bold{
	font-family: "Helvetica, Ariel";
	font-weight: bold;
	color: #000000;
}

h1.headline {
	display: inline;
	font-family: "Helvetica, Ariel" ;
	font-weight: bold;
	font-size: 14px;
	color: #000000;
}

h1.headline_bold {
	display: inline;
	font-family: "Helvetica, Ariel" ;
	font-weight: bold;
	font-size: 14px;
	color: #000000;
}

h1.headline_bolder {
	display: inline;
	text-align: center;
	font-family: "Helvetica, Ariel";
	font-weight: bolder;
	font-size: 18px;
	/*line-height: 1;*/
	/*letter-spacing: 5px;*/
}

h2.headline {
	font-family: "Helvetica, Ariel";
	font-weight: bold;
	font-size: 14px;
	color: #000000;
}

h3.content {
	font-family: "Helvetica, Ariel";
	text-align: center;
	font-weight: normal;
	font-size: 15px;
	/*display: list-item;*/
}
h3.content_link {
	font-family: "Helvetica, Ariel";
	text-align: center;
	font-weight: normal;
	font-size: 14px;
	/*display: list-item;*/
}
h3.contact_link {
	font-family: "Helvetica, Ariel";
	text-align: center;
	font-weight: normal;
	font-size: 15px;
}
h4.headline_bold {
	font-family: "Helvetica, Ariel";
	text-align: center;
	font-weight: bold;
	font-size: 15px;
	color: #000000;
}

div.copyright_box {
	width: 100%;
	height: 100%;
	font-family: "Helvetica, Ariel";
	font-size: 11px;
	text-align: center;
	color: #000000;
	/*border: solid 1px;
	border-color: #000000;
	border-radius: 5px;*/
}

 

requinix Prolific Member

requinix

Posted
Posted

What you originally described doesn't seem to match up with what you've posted. I can't tell what is supposed to be what. Can you throw an example into a fiddle?

To the question, fixed positioning is the basic answer. Sticky could work too. They both require some setup but either one should do what you want.

LeonLatex Advanced Member

LeonLatex

Posted
  • Author
Posted
4 hours ago, requinix said:

What you originally described doesn't seem to match up with what you've posted. I can't tell what is supposed to be what. Can you throw an example into a fiddle?

To the question, fixed positioning is the basic answer. Sticky could work too. They both require some setup but either one should do what you want.

Thank you requinix 👌👍😁

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.