Hints on how to properly slice this site ?
Moderator: General Moderators
Hints on how to properly slice this site ?
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
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
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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?)
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?)
Don't think you need (much) absolute positioning.
A 1 minute look at the picture makes me think of something like:
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.
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;}
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.
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
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
feyd | Please use
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
feyd | Please use[/syntax]
Code: Select all
,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>
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
,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]- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US