Hints on how to properly slice this site ?

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Hints on how to properly slice this site ?

Post 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
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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?)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

You can use a 1px wide 800px high background image and repeat that (on body or html)
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

feyd | Please use

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>&Agrave; 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

,

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]
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

Looks like your right column is being pushed below the other columns.
(#10850)
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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)
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

I can find another way to make my design work, but i'm curious why this methode isn't working. My CSS seems okay.


:?: :?: :?:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

Thanks for everyone's help

The template

Ie7 and mozilla 1.5 compatible
Post Reply