Html5 with CSS elements move when zooming
Question
Hi guys this might be a easy question but I'm struggling a bit with this one problem in my HTML and CSS page.
Problem: When i zoom int the "Section" part moves under the nav and when i zoom out the footer moves next to the section part.....
Here is the sample of my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyWebsite</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<header>
Header
</header>
<body>
<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</body>
</html>`
here is the CSS page:
header
{
width: 1325px;
height: 150px;
background-color: green;
position: relative;
}
nav
{
position: relative;
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}
section
{
position: relative;
float: left;
width: 925px;
height: 500px;
background-color: blue;
}
footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
position: relative;
overflow: hidden;
}
thanks for your help and time in advance
3 answers
solution1
0 2013-10-07 15:23:47
Jack is correct, and you might want to try adding a container to your elements. See this fiddle: JSFiddle . Essentially, they are all
position: relative
without having an absolutely positioned container to refer to. Adding a wrapping container with the CSS:
position: absolute;
height: 700px;
width: 1325px;
Kept everything in line. Let me know if this wasn't what you were trying to achieve!
solution2
0 ACCPTED 2013-10-07 15:26:22
Your body tag needs to be before the header. Add a wrapper with a width to your HTML/CSS.
Here is a fiddle: http://jsfiddle.net/msJLW/
<div id="wrap">
<header>
Header
</header>
<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</div>
#wrap{
width:1325px;
}
header
{
width: 1325px;
height: 150px;
background-color: green;
}
nav
{
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}
section
{
float: left;
width: 925px;
height: 500px;
background-color: blue;
}
footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
overflow: hidden;
}
solution3
0 2013-10-07 15:35:11
I'm not entirely sure why it is moving like this, but I know a simple solution: contain it all in a wrapper. Copy/paste this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyWebsite</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
Header
</header>
<nav>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</div>
</body>
</html>
Keep in mind that anything not included in the <head> tags should be inside the <body> tags, except your doctype and <html> tags -- this includes your <header> tags.
Anyway, what we've done above is wrap everything in a "div", a means by which we can divide a web page up. They are easy to control using css, and you should copy/paste the following to the bottom of your css file:
.wrapper {
width: 1325px;
}
Let me know if you need any more help :D
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.