Page 1 of 1
Hints on how to properly slice this site ?
Posted: Mon Mar 26, 2007 10:19 am
by Draco_03
Click here to see the jpg
I want to avoid absolute positionning (to maximize compatibility) and I'm trying to find the best way to slice up this site so I can build an intelligent design behind it (CSS).
I'd like to get some feedback.
PS: Im not asking for anyone to do my job, just some hints
Posted: Mon Mar 26, 2007 4:00 pm
by Kieran Huggins
IMO, you should use absolute positioning for the absolutely positioned elements, that's what it's there for

You can always provide a crappy-er layout for OLD browsers, but nobody uses ie5 mac anymore.
I can see you having trouble with the top of the beige gradient and the bottom of the body gradient.
There's a strange shadow beneath the bottom right of the ad, and your paragraph text could stand a little tweaking (less spacing between paragraphs.. and maybe a different typeface / size?)
Posted: Tue Mar 27, 2007 1:41 am
by matthijs
Don't think you need (much) absolute positioning.
A 1 minute look at the picture makes me think of something like:
Code: Select all
<body>
<div id="container">
<div id="header">
<h1 id="logo"><a href="/">Laboratoire ..</h1>
<ul id="nav">
<li><a href="">Les tests</a></li>
...
</ul>
</div>
<div id="content">
<div id="main">
<h2>L'intolerance alimentaire ..</h2>
..
</div>
<div id="sub">
<h2>Quelles</h2>
...
</div>
</div>
<p id="footer">Lesttest ...</p>
</div>
Code: Select all
#container {width:800px;margin:0 auto;}
#header {height:200px;}
#logo {float:left;width:300px;background:url(logo.gif) 0 0 no-repeat;text-indent:-9999px; .. }
#nav {float:right;width:450px; .. }
#nav li {display:inline; .. }
#content {}
#main, #sub {float:left;width:300px;}
#footer {clear:both;}
etc etc
The problem I have with absolute positioning is that the layout gets really fragile. A little resizing of the text-size often leads to overlapping content problems. For something like the extra navigation (Accueil, about us, etc) you could use absolute positioning.
Posted: Tue Mar 27, 2007 8:42 am
by Draco_03
Oh yeah, the extrashadow won't be there.
My main problem wasnt just the top and bottom but actually the whole background page.
I didn't want to be using a big image for my background, but like it is right now it seem I wont have a choice.
I'll post what I've came up with
Thanks for the heads up guys
Posted: Tue Mar 27, 2007 10:45 am
by matthijs
You can use a 1px wide 800px high background image and repeat that (on body or html)
Posted: Tue Mar 27, 2007 12:56 pm
by Draco_03
matthijs wrote:You can use a 1px wide 800px high background image and repeat that (on body or html)
Yeah, thats what I did(500 px high actually), I'll post my code soon (I being tossed from one priority to another) so you guys can give me your opinion on it.
Cheers
Posted: Wed Mar 28, 2007 3:04 pm
by Draco_03
feyd | Please use Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
FInally I got to work on it [url]http://www.danielehenkel.com/test/home_fr.php[/url]
[syntax="html"]
<body>
<div id="container">
<div id="header"><a href="home_fr.php"><img src="images/logo_fr.gif" alt="Laboratoire d'Intolerance Alimentaire" /></a></div>
<div class="submenufr">
<ul>
<li>Accueil</li>
<li>À propos de nous</li>
<li>Contact</li>
<li>English</li>
</ul>
</div>
<div class="mainmenu">
<ul>
<li><a href="#">Tests<br /><img src="images/btn_test_fr.gif" alt="Test Imupro intolerance allergies" /></a></li>
<li><a href="#">Symptomes<br /><img src="images/btn_symptoms_fr.gif" alt="Symptomes allergies" /></a></li>
<li><a href="#">Nouvelles<br /><img src="images/btn_news_fr.gif" alt="Nouvelles" /></a></li>
<li><a href="#">Commandez<br /><img src="images/btn_shop_fr.gif" alt="Commandez le test d'allergies" /></a></li>
<li><a href="#">FAQ<br /><img src="images/btn_faq_fr.gif" alt="FAQ allergies" /></a></li>
</ul>
</div>
<div class="banner"><img src="images/banner_kiwi_fr.jpg" alt="Laboratoire Scientifique d'Intolerance Alimentaire" /></div>
<div id="content">
<div id="leftcolumn">LEFT COLUMN</div>
<div id="midcolumn">MID COLUMN</div>
<div id="rightcolumn">RIGHT COLUMN</div>
</div>
<div id="footer"></div>
</div>
</body>
I had a problem with the content, I'm not sure how to do the content part, the best idea I had was a 3 col design but my 3rd column is 1 line beneath...And also I want the
#content height to extend (with whatever size the the insides divs will get)
any advice ?
EDIT : My CSS
Code: Select all
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
text-align: center;
background-color: #EDEBDB;
background-image: url(../images/bg_main.gif);
background-repeat: repeat-x;
}
img {
border: 0;
}
img.right {
float: right;
}
img.left {
float: left;
}
#container {
display: block;
z-index: 5;
margin: 0 auto;
width: 847px;
text-align: left;
}
#header {
padding: 0;
display: block;
height: 100px;
width: 100%;
}
#content {
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0;
padding: 0px;
display: block;
width: 100%;
background-color: #FFFFFF;
}
#leftcolumn {
float: left;
width: 297px;
background-color: #CC3300;
}
#midcolumn {
margin-left: 297px;
background-color: #3399FF;
}
#rightcolumn {
float: right;
width: 297px;
background-color: #33FF00;
}
.leftcolumn h1, .rightcolumn h1 {
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #0067CF;
}
.submenufr {
position: absolute;
top: 0px;
left: 639px;
display: block;
width: 281px;
height: 30px;
background-image: url(../images/bg_submenu_fr.gif);
background-repeat: no-repeat;
overflow: hidden;
}
.submenuen {
position: absolute;
top: 0px;
left: 700px;
display: block;
width: 220px;
height: 30px;
background-image: url(../images/bg_submenu_en.gif);
background-repeat: no-repeat;
overflow: hidden;
}
.submenufr ul, .submenuen ul, .mainmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.submenufr li, .submenuen li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0;
padding-left: 12px;
padding-top: 7px;
float: left;
}
.banner {
display: block;
width: 100%;
}
.mainmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0067CF;
font-weight: bold;
position: absolute;
top: 55px;
left: 520px;
display: block;
height: 70px;
}
.mainmenu li {
float: left;
padding-left: 15px;
text-align: center;
}
.mainmenu a, .mainmenu a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0067CF;
font-weight: bold;
text-decoration: none;
}
feyd | Please use[/syntax]Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Posted: Wed Mar 28, 2007 3:54 pm
by Christopher
Looks like your right column is being pushed below the other columns.
Posted: Wed Mar 28, 2007 4:07 pm
by Draco_03
arborint wrote:Looks like your right column is being pushed below the other columns.
I know, i've tried putting the width of each of my div to 10% and it didn't work (i also tried fixed width)
Posted: Fri Mar 30, 2007 3:45 pm
by Draco_03
Posted: Sat Mar 31, 2007 9:04 am
by matthijs
You forgot to give the mid column a margin-right. That's why he's pushing down the right column.
Another way to get the same 3 cols is floating all three.
Posted: Mon Apr 02, 2007 8:07 am
by Draco_03
matthijs wrote:You forgot to give the mid column a margin-right. That's why he's pushing down the right column.
Another way to get the same 3 cols is floating all three.
Margin right didn't do much, but floating left the mid column worked like charm, thank you
Posted: Tue Apr 03, 2007 11:29 am
by Draco_03
Thanks for everyone's help
The template
Ie7 and mozilla 1.5 compatible