CSS, HTML, DIV Boxes and scaling.

LeonLatex · December 31, 2021

I got two DIV boxes. One for menu box on the left margin and one centered div for the content. To make these position themselves on the same line next to each other. have I used a position: fixed; on the DIV box menu.

The problem is when I try to scale the site. The menu does not scale as it should, but it stays in place, but it builds on content that does not scale at all, I send with both CSS and HTML. I hope there is someone here who can look at it. I have worked a lot with this, it may therefore seem a bit messy, but it is not difficult to understand the composition.Thanks a lot guys, and happy new year.

1: index.php file
2: header.php
3: mnu.php
4: footer.php
5: nav.css

<?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 -->
	<div class="main_content">
  	<h4 class="headline_bold"></h4>
	<h3 class="content">
	<!-- Content slutt -->
	</div>
	<!-- content box slutt -->
	</div>
	<!-- Footer Start -->
	<?php require_once("footer.php") ?>

<?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 -->
	<div class="main_content">
  	<h4 class="headline_bold"></h4>
	<h3 class="content">
	<!-- Content slutt -->
	</div>
	<!-- content box slutt -->
	</div>
	<!-- Footer Start -->
	<?php require_once("footer.php") ?>

	<div class="menu_box w3-content w3-card-4 w3-padding w3-light-gray" style="line-height: 6px">
		<h4 class="headline_bold">Naviger</h4><br>
		<p><a class="mnu_link" href="index.php" title="Tilbake til Start">Hjem </a></p>
		<p><a href="contact.php" title="Kontakt">Kontakt </a></p>
		<p><a href="std_org.php" title="Historie">Historie </a></p>
	</div>

	<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 Document*/
html.size {
	height: 100%;
  	width: 100%;
}

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

div.wrapper {
	height: 100%;
	width: 100%;
  	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/logo.png");
	margin: auto;
	height: 110px;
	width: 538px;
	/*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;
}

/*img.stamp {
	margin-top: 20px;
	display: block;
	margin-right: auto;
    margin-left: auto;
	align: center;
	height: 172px;
	width: 222px;
	opacity: 0.4;
}*/

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: 15px;
	display: list-item;
}
h3.contact_link {
	font-family: "Helvetica, Ariel";
	text-align: center;
	font-weight: normal;
	font-size: 16px;
}

div.content {
	max-height: 100%;
	font-family: "Helvetica, Ariel";
	text-align: left;
	font-weight: normal;
	font-size: 17px;
	/*display: list-item;*/
}

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;*/
}

Sign In

CSS, HTML, DIV Boxes and scaling.

Recommended Posts

LeonLatex

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information