• Locked
3 replies [Last post]
Tue, 2013-04-02 11:57
Tieskevo
Tieskevo's picture
Offline
newbie
The Netherlands
Last seen: 6 years 42 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2013-04-02
Posts: 3
Points: 4

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.

Top
Tags:
Wed, 2013-04-03 07:09
#1
Tieskevo
Tieskevo's picture
Offline
newbie
The Netherlands
Last seen: 6 years 42 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2013-04-02
Posts: 3
Points: 4

no-one here who could

no-one here who could possibly help me? Or atleast tell me; it's (not) possible

Top
Wed, 2013-04-03 09:43
#2
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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.

Top
Wed, 2013-04-03 09:53
#3
Tieskevo
Tieskevo's picture
Offline
newbie
The Netherlands
Last seen: 6 years 42 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2013-04-02
Posts: 3
Points: 4

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

Top
  • Locked