Mon, 2005-06-20 10:25
Hi, i'm trying to do a web for a client, with css and standars.
I nee to build a layout like that:
But, i have a lot of problems.
Mainly because i can get that working in any browser, and it looks very different in all of them (bad in all)
What's the best way to implement sumthing like that??
Sorry for my poor english
Mon, 2005-06-20 10:44
#1
My first css page
Here is a simple layout that I posted for somebody else a while ago. Have ago at studying and tweaking it. Then if you have any problems or questions post back.
It is basically set up to give you an idea on how a page should be set up such as meta tags and head links etc.
The css code will eventually need moving to an external file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Title Here</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Good solid description of the site goes here." /> <meta name="keywords" content="Keywords, Go Here, Like, This," /> <meta name="designer" content="You - www.yourdesignsite.co.uk" /> <meta name="copyright" content="Owner/Client Copyright 2005" /> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="yoursite_default.css" rel="stylesheet" type="text/css" /> <script src="scriptname.js" type="text/javascript"></script> <style type="text/css"> /* Start of page layout */ #container { width:750px; margin:0 auto; border:1px solid #000; background:#ccc; text-align:left; /* corrects IE 5x centering hack */ } #header { width:750px; height:150px; background:#f00; margin:0 0 10px 0; } #navigation { float:left; width:150px; background:#0f0; } #content { float:right; width:550px; margin:0 0 10px 10px; padding:20px; background:#00f; } #footer { clear:both; width:710px; height:90px; padding:5px 20px; background:#f00; } /* Start of selectors */ #navigation ul, #navigation li { margin:0; padding:0; list-style:none; } #navigation a { display:block; width:118px; line-height:30px; border:1px solid #000; padding:0 0 0 30px; background:#0ff; font:normal 16px verdana, arial, helvetica, sans-serif; color:#000; text-decoration:none; } #navigation a:hover { background:#ff0; } #content p { margin:0 0 17px 0; padding:0; } /* Start of tag styles */ body { text-align:center;} /* centers in IE 5x hack */ </style> </head> <body onload="window.status='Stick what you want in here.'"> <div id="container"> <div id="header">Header</div> <div id="navigation"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">IMAGES</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">LINKS</a></li> <li><a href="#">MAP</a></li> </ul> </div> <div id="content"> <p>Content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="footer">Footer</div> </div> </body> </html>
Mon, 2005-06-20 10:44
#2
My first css page
Google for two column CSS layouts. Or take a look around at some websites that look similar to your layout and investigate their CSS. When you do that, don't let all the little details get in your way, you only need to look at the layout (outermost) containers.
Also check these links.
http://www.glish.com/css/
http://css-discuss.incutio.com/?page=TwoColumnLayouts
http://webhost.bridgew.edu/etribou/layouts/
Mon, 2005-06-20 11:06
#3
My first css page
Thanks for your answers 
Mon, 2005-06-20 11:59
#4
My first css page
After some changes, the layout looks good on FF.
But with IE it looks weird.
You can look it in:
http://antramos.la-pcra.com/css/
Other problem i have, is in menu rows.
I use :hover to colorize the divs, when the mouse is over. But with IE it hasn't any effect 
Mon, 2005-06-20 12:06
#5
My first css page
That is because IE doesn't allow :hover on anything other than <a>
If you want to design to standards you should put your navigation into an Unordered list like my example shows.
Mon, 2005-06-20 12:08
#6
My first css page
IE doesn't support :hover on anything except anchor (link) tags.
You can either fake it with a .htaccess file, or make them links. The second option seems inifintely better.
<div id="menu">
<div id="header_menu">
</div>
<div id="row1" class="row_menu">
<span class="texto_menu"><span class="marron">>> 01.</span> PRESENTACIÓN</span
></div>
<div id="row2" class="row_menu">
<span class="texto_menu"><span class="marron">02.</span> EMPRESAS QUE NOS AVALAN</span
></div>
<div id="row3" class="row_menu">
<span class="texto_menu"><span class="marron">03.</span> OBRAS QUE NOS AVALAN</span
></div>
<div id="row4" class="row_menu">
<span class="texto_menu"><span class="marron">04.</span> CONTACTO</span
></div>
<div id="row5" class="row_menu">
<span class="texto_menu"><span class="marron">05.</span> TARIFAS Y PRESUPUESTOS</span
></div>
</div>
would be better as a list:
<div id="menu"> <h3>Menu</h3> <ul id="navigation"> <li id="active"> <span>01.</span>PRESENTACIÓN</li> <li><span>02.</span>EMPRESAS QUE NOS AVALAN</li> <li><span>03.</span>OBRAS QUE NOS AVALAN</li> <li><span>04.</span>CONTACTO </li> <li><span>05.</span>TARIFAS Y PRESUPUESTOS</li> </ul> </div>
If you need help styling that give us a shout 
Mon, 2005-06-20 15:02
#7
My first css page
Thanks for your answers guys, you're helping me a lot.
I'll put the menu into a unordered list.
But, if i do that. When the mouse cames over, all the row will be colorized of only the link text? that's the effect i want.
thanks
Mon, 2005-06-20 15:07
#8
My first css page
set the <a> element to be display:block, that will ensure the whole off the menu "cell" is hoverable. Also put it into hasLayout mode to avoid the IE whitespace bug. So something like:
#menu li a {
display:block;
width: 100%;
}
if using width:100% messes things up you will need the following instead:
/* holly hack for IE/Win to get into hasLayout mode - and hide from IE/Mac \*/
* html #menu li a {
height: 1px;
}
/* unhide from IE/Mac */
Mon, 2005-06-20 16:40
#9
My first css page
Yeah!, thanks for your reply, my menu is working well now.
And the layout is good of FF, but on IE i get this margin at rigt.
The other menor problem is with FF, the main DIV is aligned at left instead in center as i want.
Mon, 2005-06-20 19:45
#10
My first css page
I'm unable to replicate the IE problem.
Good job though, I'm glad you managed to figure out the styling of the list items by yourself. Good job
The only reason I gave the first <li> the active class as in your original design you had the >> in front of the link to show it was active. I though it would be easier to gice the active link a class and give the class a background image.
Top marks though, it's coming along well.
Mon, 2005-06-20 22:08
#11
My first css page
I saw the IE problem. I am not sure what is causing it. However you are using some odd markup there.
<div id="contenido_header"> <span class="texto_header">PRESENTACION</span> </div>
When
<h2>PRESENTACION</h2>
would make more sense.
Tue, 2005-06-21 00:33
#12
My first css page
Explorer incorrectly centers divs by giving the body text-align:center
If you want to center the container in FF and other correct browsers you need to give the container AUTO side margins (margin:0 auto;) like my example shows!!!!!. 
Tue, 2005-06-21 08:18
#13
My first css page
Sorry joseph, i didn't take a closer look to your layout :oops: .
But after looking it, i've fixed my center issue with FF.
Really thanks.
I have changed <span> fo <h2> in the content div, but still appears the bug on IE. :S
Thanks everybody for reading and answer my doubts.
Tue, 2005-06-21 08:34
#14
My first css page
Now is fixed this issue.
I've delete te <h2> tag and i'll put the text of the header in the image of the background.
Now, i've problems setting the content text attributes on IE, i've put a line height of 13 px to keep the text clear and readable. But IE ignores me again :roll:
Tue, 2005-06-21 08:46
#15
My first css page
Rulgz, you're missing a nattribute in your wrapper div 'contenedor'
#contenedor{
width : 800px;
background: url(img/fondo.gif);
border: 1px solid;
padding: 10px;
text-align: left;
margin: auto;
}
This will center it in Firefox.
Kudos though, it's getting close to matching your original layout
Tue, 2005-06-21 09:53
#16
My first css page
Really thanks for your helps, two days ago, i was thinking to get back to tables. But now with your help guys i'm happy with my change to CSS and web standars.
Really thanks 
Tue, 2005-06-21 09:53
#17
My first css page
Quote:
text-align: left;
margin: auto;
}
Earm? Just what I said. ((((scratch head icon))))
Tue, 2005-06-21 12:37
#18
My first css page
Yeah, joseph, i saw it in you post/layout.
Thanks both for the answer
Tue, 2005-06-21 16:41
#19
My first css page
Again with my css problems....
I'm trying to use drop shadows in some divs in my page.
Something like that:
http://www.alistapart.com/articles/onionskin/
But, i can't get to work:
http://antramos.la-pcra.com/css/
¿Maybe this method can't be used with divs, only with images?
Tue, 2005-06-21 17:03
#20
My first css page
Hello there, I was just at your site and viewed it with IE and then FireFox. I think this time around, some of the elements got misplaced in FireFox. In IE it looked OK.
Here's what I got right now:
http://thebeastunleashed.nexuswebs.net/CheckDESSA.html
Tue, 2005-06-21 18:21
#21
My first css page
Looks like the contenedor div isn't wide enough to accomodate the divs and the shadows. Try increasing it's width and see if it works.