kalleanka
asked on
CSS Design Centered DIV Layout
I am working on a web page design.
You can see it on http://syskonsult.com/index2.html
The design consist of several CENTERED div's. See the code attached.
It works fine in Firefox 3.6, BUT I noticed that in IE7 the background design start getting out of sync when the window inner width is smaller than 1064px. Apparently it works fine in IE8. I have not tested it yet in IE6, Opera or Chrome.
I wonder if anyone could come up with a working solution for my problem.
Below is a cut and paste code, complete with comments, to use directly on your computer. All images and links are linked to the domain so you can see the result directly while working on it.
I am very grateful if this problem could be solved quickly with attached CUT AND PASTE CODE.
You can see it on http://syskonsult.com/index2.html
The design consist of several CENTERED div's. See the code attached.
It works fine in Firefox 3.6, BUT I noticed that in IE7 the background design start getting out of sync when the window inner width is smaller than 1064px. Apparently it works fine in IE8. I have not tested it yet in IE6, Opera or Chrome.
I wonder if anyone could come up with a working solution for my problem.
Below is a cut and paste code, complete with comments, to use directly on your computer. All images and links are linked to the domain so you can see the result directly while working on it.
I am very grateful if this problem could be solved quickly with attached CUT AND PASTE CODE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<BASE HREF='http://syskonsult.com/'>
<title>Title text</title>
<style>
body {
font:12px Arial;
/* background is a 2064px wide gradient image with a "computer spike" in the "middle" */
background:white url('background2064_2.jpg') top center repeat-y;
}
h1 {font:20px Arial;}
</style>
<script src='fadeinout.js'></script>
</head>
<body>
<!-- This div is placed on top to push the Content up for SEO -->
<div style="position: absolute; left: 50%; margin-left: -532px; width: 1064px; top:229px; background-color: yellow; background-image:url('background1064.jpg')">
<!-- Content Text -->
<div style='position:absolute; top:0px; left:300px; width:503px'>
<h1>Title text about this.</h1>
Text text text text text text text text text text text text text text text text text text text.<br />
Text text text text.
</div>
<!-- Content Pictures in right side column-->
<div style='position:absolute; top:0px; left:803px; width:261px;'>
<img src="rightcolpics.jpg" style='float:right;'>
</div>
<!-- Menu links -->
<div style="position:absolute; top:20px; left:97px; width:203px; font:14px Arial; font-weight:bold; color:white;">
Startsida<br />
Videopresentationer<br />
Teknisk specifikation<br />
Orderformulär<br />
Kontakt<br />
Om Företaget
</div>
</div>
<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png')">
<div style='position: absolute; left: 50%; margin-left: -532px; width:1064px; top:0px;'>
<img src='logotype.jpg' style='width:300px; height:229px; float:left;'>
<div style="width:503px; height:229px;float:left;">
<script type='text/javascript'>
// this creates a 503px*229px picture slideshow:
var fadeimages=new Array();
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=['topanim1.jpg', '', ''];
fadeimages[1]=['topanim2.jpg', '', ''];
fadeimages[2]=['topanim3.jpg', '', ''];
fadeimages[3]=['topanim4.jpg', '', ''];
fadeimages[4]=['topanim5.jpg', '', ''];
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
new fadeshow(fadeimages, 503, 229, 0, 7000, 0)
</script>
</div>
</div>
</div>
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Whilst I don't claim to be any sort of expert on SEO, I shouldn't think that there will be much to gain by reordering in this situation. I would be interested to see what the other experts have to say about this matter.
The layout is certainly a lot cleaner with this approach, which I always consider to be important when maintaining any sort of source code.
The layout is certainly a lot cleaner with this approach, which I always consider to be important when maintaining any sort of source code.
Hi Kalleanka,
I've attached below the adjusted code while preserving your current structure.
However I agree with numberkruncher that the order of the content shouldn't have much effect SEO wise, the page is either read by the search engine bot/robot or not.
I also believe that a proper coding/structure of elements, and W3 validation are all more important factor for a better SEO ranking.
I've also fixed the code to validate it, it's now successfully passing w3 with "successfully checked as HTML 4.01 Transitional!"
Cheers
I've attached below the adjusted code while preserving your current structure.
However I agree with numberkruncher that the order of the content shouldn't have much effect SEO wise, the page is either read by the search engine bot/robot or not.
I also believe that a proper coding/structure of elements, and W3 validation are all more important factor for a better SEO ranking.
I've also fixed the code to validate it, it's now successfully passing w3 with "successfully checked as HTML 4.01 Transitional!"
Cheers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<BASE HREF='http://syskonsult.com/'>
<title>Title text</title>
<style type="text/css">
body {
font:12px Arial;
/* background is a 2064px wide gradient image with a "computer spike" in the "middle" */
background:white url('background2064_2.jpg') repeat-y center top ;
margin:0;
}
h1 {font:20px Arial;}
</style>
<script src='fadeinout.js' type="text/javascript"></script>
</head>
<body>
<div style="width:1064px;margin:0 auto;padding-top:229px;position:relative;">
<div style='margin-left:300px; width:503px'>
<h1>Title text about this.</h1>
Text text text text text text text text text text text text text text text text text text text.<br>
Text text text text.
</div>
<!-- Content Pictures in right side column-->
<div style='float:right; width:261px;'><img src="rightcolpics.jpg" alt=""></div>
<!-- Menu links -->
<div style="position:absolute;top:229px;margin-left:97px;width:203px; font:14px Arial; font-weight:bold; color:white;z-index:100;">
Startsida<br>
Videopresentationer<br>
Teknisk specifikation<br>
Orderformulär<br>
Kontakt<br>
Om Företaget
</div>
</div>
<!-- This div is placed on top to push the Content up for SEO -->
<div style="position: absolute; left: 50%; margin-left: -532px; width: 1064px; top:229px; background-color: yellow; background-image:url('background1064.jpg')">
<!-- Content Text -->
</div>
<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png');">
<div style='margin:0 auto;width:1064px; top:0px;'>
<img src='logotype.jpg' style='width:300px; height:229px; float:left;' alt="">
<div style="width:503px; height:229px;float:left;">
<script type='text/javascript'>
// this creates a 503px*229px picture slideshow:
var fadeimages=new Array();
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=['topanim1.jpg', '', ''];
fadeimages[1]=['topanim2.jpg', '', ''];
fadeimages[2]=['topanim3.jpg', '', ''];
fadeimages[3]=['topanim4.jpg', '', ''];
fadeimages[4]=['topanim5.jpg', '', ''];
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
new fadeshow(fadeimages, 503, 229, 0, 7000, 0)
</script>
</div>
</div>
</div>
</body>
</html>
ASKER
@ remorina
The layout you provided is almost there but not completely.
If you use the code attached below you will see that the right column don't want to place itself properly.
Do you have any idea on how to fix it?
I colored the two content divs yellow so its easier to see.
The layout you provided is almost there but not completely.
If you use the code attached below you will see that the right column don't want to place itself properly.
Do you have any idea on how to fix it?
I colored the two content divs yellow so its easier to see.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<BASE HREF='http://syskonsult.com/'>
<title>Title text</title>
<style type="text/css">
body {
font:12px Arial;
/* background is a 2064px wide gradient image with a "computer spike" in the "middle" */
background:white url('background2064_2.jpg') repeat-y center top ;
margin:0;
}
h1 {font:20px Arial;}
</style>
<script src='fadeinout.js' type="text/javascript"></script>
</head>
<body>
<!-- This div is placed on top to push the Content up for SEO -->
<div style="width:1064px;margin:0 auto;padding-top:229px;position:relative;">
<!-- Content Text -->
<div style='margin-left:300px; width:503px; background:yellow;'>
<h1>Title text about this.</h1>
Text text text text text text text text text text text text text text text text text text text.<br>
Text text text text.
</div>
<!-- Content Pictures in right side column-->
<div style='float:right; width:261px; background:yellow;'><img src="rightcolpics.jpg" alt="" style='float:right'></div>
<!-- Menu links -->
<div style="position:absolute;top:229px;margin-left:97px;width:203px; font:14px Arial; font-weight:bold; color:white; z-index:100;">
Startsida<br>
Videopresentationer<br>
Teknisk specifikation<br>
Orderformulär<br>
Kontakt<br>
Om Företaget
</div>
</div>
<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png');">
<div style='margin:0 auto;width:1064px; top:0px;'>
<img src='logotype.jpg' style='width:300px; height:229px; float:left;' alt="">
<div style="width:503px; height:229px;float:left;">
<script type='text/javascript'>
// this creates a 503px*229px picture slideshow:
var fadeimages=new Array();
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=['topanim1.jpg', '', ''];
fadeimages[1]=['topanim2.jpg', '', ''];
fadeimages[2]=['topanim3.jpg', '', ''];
fadeimages[3]=['topanim4.jpg', '', ''];
fadeimages[4]=['topanim5.jpg', '', ''];
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
new fadeshow(fadeimages, 503, 229, 0, 7000, 0)
</script>
</div>
</div>
</div>
</body>
</html>
hi kalleanka,
it's because right column was floated with content column isn't so content was taking the full width.
it's because right column was floated with content column isn't so content was taking the full width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<BASE HREF='http://syskonsult.com/'>
<title>Title text</title>
<style type="text/css">
body {
font:12px Arial;
/* background is a 2064px wide gradient image with a "computer spike" in the "middle" */
background:white url('background2064_2.jpg') repeat-y center top ;
margin:0;
}
h1 {font:20px Arial;}
</style>
<script src='fadeinout.js' type="text/javascript"></script>
</head>
<body>
<!-- This div is placed on top to push the Content up for SEO -->
<div style="width:1064px;margin:0 auto;padding-top:229px;position:relative;">
<!-- Content Text -->
<div style='float:left;display:inline;margin-left:300px; width:503px; background:yellow;'>
<h1>Title text about this.</h1>
Text text text text text text text text text text text text text text text text text text text.<br>
Text text text text.
</div>
<!-- Content Pictures in right side column-->
<div style='float:right; width:261px; background:yellow;'><img src="rightcolpics.jpg" alt="" style='float:right'></div>
<!-- Menu links -->
<div style="position:absolute;top:229px;margin-left:97px;width:203px; font:14px Arial; font-weight:bold; color:white; z-index:100;">
Startsida<br>
Videopresentationer<br>
Teknisk specifikation<br>
Orderformulär<br>
Kontakt<br>
Om Företaget
</div>
</div>
<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png');">
<div style='margin:0 auto;width:1064px; top:0px;'>
<img src='logotype.jpg' style='width:300px; height:229px; float:left;' alt="">
<div style="width:503px; height:229px;float:left;">
<script type='text/javascript'>
// this creates a 503px*229px picture slideshow:
var fadeimages=new Array();
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=['topanim1.jpg', '', ''];
fadeimages[1]=['topanim2.jpg', '', ''];
fadeimages[2]=['topanim3.jpg', '', ''];
fadeimages[3]=['topanim4.jpg', '', ''];
fadeimages[4]=['topanim5.jpg', '', ''];
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
new fadeshow(fadeimages, 503, 229, 0, 7000, 0)
</script>
</div>
</div>
</div>
</body>
</html>
ASKER
@ remorina
the menu now ends up on top of the right column.
why does it have to be so damn complicated to do web design nowadays... I remember good old tables. lots of code, but at least it was pretty damn visual. you had boxes. you filled the boxes.
the menu now ends up on top of the right column.
why does it have to be so damn complicated to do web design nowadays... I remember good old tables. lots of code, but at least it was pretty damn visual. you had boxes. you filled the boxes.
If you were to take out the position:absolute in the menu it would ilne up.
Or you could just add left: 95px; and it should line up on the left
Or you could just add left: 95px; and it should line up on the left
Or you could just go with the layout that I provided:
- Seems to meet your requirements.
- Is not cluttered with absolute positions which would all need adjusting if you made changes in the future.
- Probably wont make any difference to SEO (i.e. your motivation for reorganising the elements).
- Is very similar to several WordPress templates that I've seen which work fine with the search engines!
- Seems to meet your requirements.
- Is not cluttered with absolute positions which would all need adjusting if you made changes in the future.
- Probably wont make any difference to SEO (i.e. your motivation for reorganising the elements).
- Is very similar to several WordPress templates that I've seen which work fine with the search engines!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I don't remember where I learned it, but I did understand that what comes first in a web page's code is given higher value by the search engines.
That is also why you should stuff javascript and stylesheets in external documents.
@ remorina - your last solution work and will get my major points, but I will also give a fair share to numberkruncher for his participation.
That is also why you should stuff javascript and stylesheets in external documents.
@ remorina - your last solution work and will get my major points, but I will also give a fair share to numberkruncher for his participation.
ASKER
This is an alternative version of what I was trying to accomplish.
The main thing with this is that the spiky design on the left side is placed in the "bottom container" background instead of the BODY background and the bottom container is set to min-height:100%;
Although I noticed that this wont work all the time. If I have images without width/height defined the spiky design seem to stop before the page is done scrolling.
Anyone knows a way around this?
The main thing with this is that the spiky design on the left side is placed in the "bottom container" background instead of the BODY background and the bottom container is set to min-height:100%;
Although I noticed that this wont work all the time. If I have images without width/height defined the spiky design seem to stop before the page is done scrolling.
Anyone knows a way around this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<BASE HREF='http://syskonsult.com/'>
<title>Title text</title>
<style>
body {
font:12px Arial;
/* background is a 2064px wide gradient image withOUT a "computer spike" in the "middle" */
background:white url('background2064_3.jpg') top center repeat-y;
}
h1 {font:20px Arial;}
</style>
<script src='fadeinout.js'></script>
</head>
<body>
<!-- This div is placed on top to push the Content up for SEO -->
<div style="position: absolute; left: 50%; margin-left: -532px; width: 1064px; top:229px; min-height:100%; background-image:url('background1064.jpg')">
<!-- Content Text -->
<div style='position:absolute; top:0px; left:300px; width:503px'>
<h1>Title text about this.</h1>
Text text text text text text text text text text text text text text text text text text text.<br />
Text text text text.
</div>
<!-- Content Pictures in right side column-->
<div style='position:absolute; top:0px; left:803px; width:261px;'>
<img src="rightcolpics.jpg" style='float:right;'>
</div>
<!-- Menu links -->
<div style="position:absolute; top:20px; left:97px; width:203px; font:14px Arial; font-weight:bold; color:white;">
Startsida<br />
Videopresentationer<br />
Teknisk specifikation<br />
Orderformulär<br />
Kontakt<br />
Om Företaget
</div>
</div>
<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png')">
<div style='position: absolute; left: 50%; margin-left: -532px; width:1064px; top:0px;'>
<img src='logotype.jpg' style='width:300px; height:229px; float:left;'>
<div style="width:503px; height:229px;float:left;">
<script type='text/javascript'>
// this creates a 503px*229px picture slideshow:
var fadeimages=new Array();
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=['topanim1.jpg', '', ''];
fadeimages[1]=['topanim2.jpg', '', ''];
fadeimages[2]=['topanim3.jpg', '', ''];
fadeimages[3]=['topanim4.jpg', '', ''];
fadeimages[4]=['topanim5.jpg', '', ''];
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
new fadeshow(fadeimages, 503, 229, 0, 7000, 0)
</script>
</div>
</div>
</div>
</body>
</html>
ASKER
This to Search Engine Optimize the code. (SEO)