21 replies [Last post]
rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="footer">Footer</div>

</div>

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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/

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

My first css page

Thanks for your answers Smile

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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 Sad

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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">&gt;&gt;&nbsp;&nbsp;01.</span>&nbsp;&nbsp;PRESENTACI&Oacute;N</span
             ></div>

             
             <div id="row2" class="row_menu">
                <span class="texto_menu"><span class="marron">02.</span>&nbsp;&nbsp;EMPRESAS QUE NOS AVALAN</span
             ></div>

             <div id="row3" class="row_menu">
                <span class="texto_menu"><span class="marron">03.</span>&nbsp;&nbsp;OBRAS QUE NOS AVALAN</span
             ></div>
             
             <div id="row4" class="row_menu">
                <span class="texto_menu"><span class="marron">04.</span>&nbsp;&nbsp;CONTACTO</span
             ></div>

             
             <div id="row5" class="row_menu">
                <span class="texto_menu"><span class="marron">05.</span>&nbsp;&nbsp;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&Oacute;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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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 */

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

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.

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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!!!!!. Evil

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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.

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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 Wink

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

My first css page

Quote:
text-align: left;
margin: auto;
}

Earm? Just what I said. ((((scratch head icon))))

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

My first css page

Yeah, joseph, i saw it in you post/layout.

Thanks both for the answer Smile

rulzgz
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

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?

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 5 years 19 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

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

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies