CSS Layout Issues

smithmr8 · December 7, 2009

Hi,

I've just finished with the first try of my layout. I've got it to how I want it to look, which is how it is in the screen shot linked to below..

Working / How I want it to look & be laid out. : http://i48.tinypic.com/bj9z6e.jpg

How it appears when zoomed in on: http://i46.tinypic.com/2ldo42.jpg

How it appears in my IE: http://i48.tinypic.com/259bq7q.jpg

But, when I zoom in on some browsers, all except the big blue boxes change position. I'd like them to stay in the same place, like the rest of the divs' .

Also, in my version of IE, it's all displayed in one big mush on the left.

Any idea's how I can fix both or either of these problems ?

URL in question: www.bytefish.co.uk

CSS

body {
font-family: Tahoma, Comic Sans MS;
font-size: 12px;
}

#header {
background: #FFFFFF;
width: 800px;
height: 75px;
top: 5px;
position: absolute;
}

#main {
width: 800px;
margin:0 auto;
}

#left_menu_item_1 {
top: 105px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_2 {
top: 260px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_3 {
top: 415px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#welcome_content {
top: 105px;
right: 240;
width: 598px;
height: 295px;
position: fixed; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#welcome_content_title {
top: 105px;
right: 586;
width: 256px;
height: 31px;
position: fixed; 
background: #FFFFFF;
}

#content {
top: 35px;
left: 10px;
width: 578px;
height: 250px;
position: absolute;
overflow: auto;
text-align: justify;
}

#news_events {
top: 415px;
right: 240;
width: 598px;
height: 140px;
position: fixed; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#news_events_title {
top: 415px;
right: 586;
width: 256px;
height: 31px;
position: fixed; 
background: #FFFFFF;
}

#contact {
top: 570px;
right: 240;
width: 598px;
height: 140px;
position: fixed; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#contact_title {
top: 570px;
right: 586;
width: 256px;
height: 31px;
position: fixed; 
background: #FFFFFF;
}

#footer {
top: 725px;
right: 240;
width: 598px;
height: 25px;
position: fixed; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

Index.php

<?
      $user_browser = $_SERVER['HTTP_USER_AGENT'];
      $inc1 = "Mozilla/4.0";
      $inc2 = "Chrome";
      if (strlen(strstr($user_browser,$inc1))>0) {
//echo "You need to use the latest version of Mozilla FireFox or Opera to view this page correctly";
//echo "<br>".$user_browser."<br>";
//die();
} else if (strlen(strstr($user_browser,$inc2))>0) {
//echo "You need to use the latest version of Mozilla FireFox or Opera to view this page correctly";
//echo "<br>".$user_browser."<br>";
//die();
}
     ?>
<html>
<head>
<title>byteFish Developments</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="main">
<div id="header"><img src="image/header.jpg"></div>
<div id="left_menu_item_1"><img src="image/services.jpg"></div>
<div id="left_menu_item_2"><img src="image/projects.jpg"></div>
<div id="left_menu_item_3"><img src="image/main_project.jpg"></div>
<div id="welcome_content">  
<div id="content">
byteFish Developments is based in Bournemouth, and is owned and run by me. Funnilly enough! I’m an undergraduate student at Bournemouth University studying under the Software System Framework.  <br /><br />

I’ve got a number of years of web development and design under my belt, and plan to work within this industry as a career when I complete my degree. Continuously aiming to further increase my knowledge and skill level in this field.<br /><br />

You can view our current projects by clicking the links at the bottom of this page. Our main project will be listed at the side of the page. You will also be able to see our latest news at the bottom of this page.      <br /><br />

I've got a creative personalilty, and always show this through my work. I'm motivated, hard working and can work to deadlines. It's a passion of mine, which I adore.  
<br /><br />
Luke<br>
<b>byteFish Developments</b>
</div>
<div id="welcome_content_title"><img src="image/welcome.jpg"></div>

</div>
  <div id="news_events"><div id="news_events_title"><img src="image/latest_news.jpg"></div></div>
   <div id="contact"><div id="contact_title"><img src="image/contact.jpg"></div></div>
   <div id="footer"><? echo $_SERVER['HTTP_USER_AGENT']; ?>  </div>
</div>
    
</body>
</html>

Thanks in advance

Chezshire · December 8, 2009

Hello smithmr8,

have you tried applying a wildcard to your beginning stylesheet? I usually do this as my very first rule, even before writing my body sheet, I hope this helps.

Suggested CSS addition:

* { 
padding: 0; 
margin: 0; 
}

I hope this helps - and your site looks very spiffy - did you do the illustrations yourself? They're very cool.

haku · December 8, 2009

Your problem lies with your use of absolute positioning. You will need to remove that and use a different method (floats) to position the elements in your site.

smithmr8 · December 8, 2009

Thanks, I'll try changing some things now.

smithmr8 · December 8, 2009

How would I go about using Floats. Never really used them before.

smithmr8 · December 8, 2009

Have changed the CSS, and its working great on FF. When I zoom in ect.. all elements stay where they should do.

Would appreciate it if someone gave it a quick look to see if I've done anything wrong / incorrect ?

body {
font-family: Tahoma, Comic Sans MS;
font-size: 12px;    
color: #7c7e7b;
}

#header {
background: #FFFFFF;
width: 800px;
height: 75px;
top: 5px;
position: absolute;
}

#main {
width: 800px;
margin:0 auto;
}

#left_menu_item_1 {
top: 105px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_2 {
top: 260px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_3 {
top: 415px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#welcome_content {
top: 98px;
right: 0px;
width: 598px;
height: 295px;
position: relative;
float: right;
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#welcome_content_title {
top: 105px;
right: 586px;
width: 256px;
height: 31px;
float: left;
background: #FFFFFF;
}

#content {
top: 35px;
left: 10px;
width: 578px;
height: 250px;
position: absolute;
overflow: auto;
text-align: justify;
}

#news_events {
top: 108px;
right: 0px;
width: 598px;
height: 140px;
position: relative;
float: right; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#news_events_title {
top: 0px;
right: 586;
width: 256px;
height: 31px;
float: left; 
background: #FFFFFF;
}

#contact {
top: 118px;
right: 0;
width: 598px;
height: 140px;
position: relative;
float: right; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#contact_title {
top: 570px;
right: 586;
width: 256px;
height: 31px;
float:left; 
background: #FFFFFF;
}

#footer {
top: 128px;
right: 0px;
width: 598px;
height: 25px;
position: relative;
float: right; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6; 
}

smithmr8 · December 9, 2009

For some reason, when I zoom in/out on the W/S, it takes the titles out of alignment sometimes. Any idea why this is happening ?

body {
font-family: Tahoma, Comic Sans MS;
font-size: 12px;    
color: #7c7e7b;
}

#header {
background: #FFFFFF;
width: 800px;
height: 75px;
top: 5px;
position: absolute;
}

#main {
width: 800px;
margin:0 auto;
}

#left_menu_item_1 {
top: 106px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_2 {
top: 260px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_3 {
top: 410px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#left_menu_item_4 {
top: 561px; 
width: 181px;
height: 140px;
position: absolute;
background: #FFFFFF;
}

#welcome_content {
top: 98px;
right: 0px;
width: 598px;
height: 260px;
position: relative;
float: right;
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#welcome_content_title {
top: 99px;
left: 198px;
width: 256px;
height: 31px;
position: relative;
}

#content {
top: 5px;
left: 10px;
width: 568px;
height: 250px;
position: absolute;
overflow: auto;
text-align: justify;
}

#news_events {
top: 140px;
right: 0px;
width: 598px;
height: 100px;
position: relative;
float: right; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#news_events_title {
top: 110px;
left: 198;
width: 256px;
height: 31px;
position: relative;


}

#news_content {
top: 5px;
left: 10px;
width: 568px;
height: 90px;
position: relative;
overflow: auto;
text-align: justify;
}


#contact {
top: 181px;
right: 0;
width: 598px;
height: 110px;
position: relative;
float: right; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
}

#contact_title {
top: 151px;
left: 198;
width: 256px;
height: 31px;
position: relative;
}

#contact_content {
top: 5px;
left: 10px;
width: 578px;
height: 100px;
position: relative;
overflow: auto;
text-align: justify;
}

#footer {
top: 188px;
right: 0px;
width: 598px;
height: 25px;
position: relative;
float: right; 
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6; 
}

#footer_content {
top: 5px;
left: 10px;
width: 578px;
height: 15px;
position: relative;
overflow: auto;
text-align: right;
}

[attachment deleted by admin]

JustLikeIcarus · December 9, 2009

Really would help to have both the html and the css. Looking at the css if I had to guess without having the html in front of me I would say its a result of the way your positioning elements.

smithmr8 · December 9, 2009

<?
      $user_browser = $_SERVER['HTTP_USER_AGENT'];
      $inc1 = "Mozilla/4.0";
      $inc2 = "Chrome";
      if (strlen(strstr($user_browser,$inc1))>0) {
//echo "You need to use the latest version of Mozilla FireFox or Opera to view this page correctly";
//echo "<br>".$user_browser."<br>";
//die();
} else if (strlen(strstr($user_browser,$inc2))>0) {
//echo "You need to use the latest version of Mozilla FireFox or Opera to view this page correctly";
//echo "<br>".$user_browser."<br>";
//die();
}
     ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>byteFish Developments</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--

function roll(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

//-->
</script>

</head>
<body>

<div id="main">
<div id="header"><img src="image/header2a.png"></div>
<div id="left_menu_item_1"><img src="image/services.jpg"></div>
<div id="left_menu_item_2"><img src="image/projects.jpg"></div>
<div id="left_menu_item_3"><img src="image/main_project.jpg"></div>
  <div id="left_menu_item_4"><a  
onmouseover="roll('wwff', 'image/workswithff_mouse.png')" 
onmouseout="roll('wwff', 'image/workswithff.png')">
<img src="image/workswithff.png" name="wwff"></a></div>
<div id="welcome_content_title"><img src="image/welcome.png"></div>
<div id="welcome_content">  
<div id="content">
byteFish Developments is based in Bournemouth, and is owned and run by me. Funnilly enough! I’m an undergraduate student at Bournemouth University studying under the Software System Framework.  <br /><br />

I’ve got a number of years of web development and design under my belt, and plan to work within this industry as a career when I complete my degree. Continuously aiming to further increase my knowledge and skill level in this field.<br /><br />

You can view our current projects by clicking the links at the bottom of this page. Our main project will be listed at the side of the page. You will also be able to see our latest news at the bottom of this page.      <br /><br />

I've got a creative personalilty, and always show this through my work. I'm motivated, hard working and can work to deadlines. It's a passion of mine, which I adore.  
<br /><br />
Luke<br>
<b>byteFish Developments</b>
</div>


</div>
<div id="news_events_title"><img src="image/news.png"></div>
  <div id="news_events">
  <div id="news_content"> <? include_once('include/news_events.php'); ?>
  </div>
  </div>
  <div id="contact_title"><img src="image/contact.png"></div>
   <div id="contact">
   <div id="contact_content"> Hello, this is the contact box
  </div>
   </div>
   <div id="footer">
   
   <div id="footer_content"><? //echo $_SERVER['HTTP_USER_AGENT']; ?>
   Copyright © 2009 byteFish Developments 
  </div></div>
</div>
    
</body>
</html>

How would I have to position them in order to eliminate the problem ?

Also, in IE7 it doesn't seem to align properly either.

For some reason, the first title works fine, but the other two are now mis aligned completely.

Very confused.

JustLikeIcarus · December 9, 2009

I only changed around the "welcome section" but it should give you an idea.

#welcome_content {
top: 98px;
right: 0px;
width: 598px;
height: 260px;
position: relative;
float: right;

}

#welcome_content_title {
width: 256px;
height: 31px;
}

#content {
background: #89c7f5;
border-style:solid;
border-width:2px;
border-color: #a9a6a6;
top: 5px;
left: 10px;
width: 568px;
height: 250px;
overflow: auto;
text-align: justify;
}

<div id="welcome_content">
  <div id="welcome_content_title"><img src="image/welcome.png"></div>
<div id="content">

</div>


</div>

smithmr8 · December 9, 2009

Thats putting it back inside with the text. I want them aligned the way they are now, but they are going out of alignment by a pixel or two when you zoom in.

Like here: http://i45.tinypic.com/1zn0aht.jpg

Was after a way to fix that.

JustLikeIcarus · December 9, 2009

Yes if you want it to flow uninterrupted and stay aligned its best for you to do it like i posted. I was able to zoom in on it that way and it never lost alignment. Its the best structure for what you're trying to accomplish. Also if you want the most successfull zoomable layout you should really switch from using pixels to em's

smithmr8 · December 9, 2009

It was originally like that, but the title looks better outside of the box. Guess I can live with it being out by a few occassionally.

It seems to work fine on my iPhone. :/

I'll take a look into using em instead of px.

Thanks.

JustLikeIcarus · December 9, 2009

Really? The way I changed it too looked the same as having the title on the outside. Whats different?

smithmr8 · December 10, 2009

No idea. But when I tried your suggestion, it went back to being inside the box. Probably because the title div was inside the welcome_content div.

I might just put it back inside the box to stop the problems.

JustLikeIcarus · December 10, 2009

Ok, if when using the code i sent the border and background are showing around the title then you have something overriding the css i sent which which moved that off of welcome_content to just content.

Sign In

CSS Layout Issues

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information