Hey,
the title allready says it. I am currently working on a liquid design within a one-page horizontal scrolling design. which surprisingly doesnt give that much complications, the is just one thing I can't figure out. Perhaps I should explain what I am working on first.
Live:
thijsch.nl/4people
HTML
<!DOCTYPE HTML> <html lang="nl"> <head> <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>4 People Communications</title> <script src="jquery-1.9.1.min.js"></script> <script type="text/javascript" > $(document).ready(function() { $("nav a , #logo a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 2500); }); }); </script> </head> <body> <nav> <ul> <a href="#cases"><li id="button_cases">CASES</li></a> <a href="#about"><li id="button_about">ABOUT</li></a> <a href="#concepts"><li id="button_concepts">CONCEPTS</li></a> <a href="#home"><li id="button_home">HOME</li></a> </ul> </nav> <div id="logo"> <a href="#tussen"><img src="images/logo.png" /></a> </div> <div id="hidden"> <!-- Home pagina --> <div id="home"> <div class="contentwrapper"> <div id="manhome"><img src="images/man_home.png" class="man"/></div> <div class="content"> </div> </div> </div> <!-- overgang tussen 2 pagina's --> <div class="tussen" id="tussen"> <img src="images/innovation.jpg" alt="Innovation to creation"/> </div> <!-- Concepts pagina --> <div id="concepts"> <div id="manhome"><img src="images/man_home.png" class="man"/></div> <div class="content"> </div> </div> <!-- overgang tussen 2 pagina's --> <div class="tussen"> <img src="images/innovation.jpg" alt="Innovation to creation"/> </div> <!-- About pagina --> <div id="about"> <div id="manhome"><img src="images/man_home.png" class="man"/></div> <div class="content"> </div> </div> <!-- overgang tussen 2 pagina's --> <div class="tussen"> <img src="images/innovation.jpg" alt="Innovation to creation"/> </div> <!-- Cases pagina --> <div id="cases"> <div id="manhome"><img src="images/man_home.png" class="man"/></div> <div class="content"> </div> </div> <!-- overgang tussen 2 pagina's --> <div class="tussen"> <img src="images/innovation.jpg" alt="Innovation to creation"/> </div> </div> <div id="footerline"></div> <footer> </footer> </body> </html>
the CSS
html { height:100%; } body { font-family: Tahoma,Geneva,Kalimati,sans-serif; height:100%; width:800%; overflow:hidden; } #footerline{ background:url('images/footerline.png'); background-size:2.8% 100%; min-height:1.5%; width:100%; position:relative; margin:-0.6% 0 0 -20px; clear:both; } #hidden { overflow:hidden; height:100%; width:100%; } /* PAGES */ #home { width:12.5%; height:100%; float:left; } #concepts { width:12.5%; height:100%; float:left; } #about{ width:12.5%; height:100%; float:left; } #cases{ width:12.5%; height:100%; float:left; } .tussen { width:12.5%; height:100%; float:left; } .tussen img { height:33%; margin:20% 0 0 22%; } /* FIXED */ #logo img{ height:100%; } #logo { /* width:21%; */ height:16%; position:fixed; left:4%; top:3%; } nav { position:fixed; top:3%; right:0px; width:51%; height:3%; font-size:0.875em } nav a{ color:#fff; text-decoration:none; } nav ul { height:100%; } nav ul li { float:right; height:100%; width:23%; margin-left:2%; text-align:center; padding-top:1%; } #button_home { background:#ea662c; margin:0; } #button_concepts { background:#3eb3e2; } #button_about { background:#9ec10a; } #button_cases { background:#764692; } /* Content */ .contentwrapper { width:100%; height:79%; margin-top:15%; position:relative; } .content { width:68%; height:80%; background-color:#f1f1f1; float:left; z-index:1; margin-left:-4%; position:relative; } /* mannetjes */ #manhome { height:80%; float:left; margin:4% 0 0 8%; z-index:2; position:relative; } .man { height:100% }
What did I want to achieve?
.contentwrapper is supposed to make the positioning of .content and #manhome easier. It should by all means stay inbetween the logo and the line that marks the footer. which is not really a problem, usually, were it not that both have position:fixed because they have to stay throughout the scrolling, and thus they are not quite helping.
the bastards..
The problem:
upon resizing the window, especially making it wider, the man dares setting foot past the line. or on top of the line.
no-one here who could
no-one here who could possibly help me? Or atleast tell me; it's (not) possible
HI Tieskevo, I'm not sure I
HI Tieskevo,
I'm not sure I fully understand your issue, but I will offer some advice anyhow.
The man has a fixed width, beside it the content uses a %. When the window resizes there will be times when the fixed value and the percentage don't work well together.
You could position the man differently, maybe absolute, so that the content ignores it.
Or you could use @media queries to adjust the widths when the screen size breaks the layout.
Hope that helps.
Hi Tony, thanks for your
Hi Tony,
thanks for your response. However i'm fairly sure there are no fixed widths in my layout. the image gets his width from the parent div, or rather, he takes the height to be 100% of the parent div, and adjusts his width to that, retaining his proportions.
I found out today that the main cause of my problem is as follows:
When I resize only the width of my browser window, the height of my .contentwrapper changes also, atleat the pixel output