Trouble getting layout right..

@surfin009Jul 15.2007

Hey guys,

I’m new to CSS and have been browsing around the internet trying to learn all I can. I tested my page and got rid of all errors. I probably have not coded things as correctly as I should have.. Anyways, on my comp in Firefox I have gotten the page to look how I want it to(though I will probably make some changes later..) See picture 1 as the one I like. Now in Safari, and many other peoples comps the page gets all messed up, as you can see in picture 2. Any suggestions? The site is ~~[url]~~www.coreybringas.com[/url]. Thanks!
-Corey

~~[upl-file uuid=19e30165-df66-45e9-b49b-468754cfff3e size=77kB]~~1.jpg[/upl-file]

~~[upl-file uuid=cc42cf28-f92b-478d-a745-21f001850c75 size=67kB]~~2.jpg[/upl-file]

to post a comment

CSS

7 Comments(s) _↴

@sticks464Jul 16.2007 — #Add a doctype so browsers know how to render the content

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 [/CODE]

Then add this line to the head section
[CODE]<meta http-equiv="Content-Type" content="text/html; charset=utf-8">[/CODE]

@CentauriJul 16.2007 — #As sticks said, a doctype is necessary, but the rest of the coding needs a [B]lot[/B] of work ......

Think [B]content[/B] and semantics, and start by marking up the html using elements most suited to the task - <h> heading tags for headings, lists of links for menus etc - and then add logical groupings, and finally style the [I]content[/I]. All that absolute positioning is locking you into a layout that is hard to change, and doesn't centre. It also causes too many divs and ids.

Have a look at this html :

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="description" content="Corey Bringas, Director of Photography">
 <meta name="keywords" content="Corey, Bringas, Corey Bringas, Director of Photography, Director, Photography, Cinematography, Cinematographer, Camera, Lens, Film, Filmmaker, Filmmakers, Mitchell, Cinema,35mm,16mm">
 <meta name="author" content="Corey Bringas">
 
 <title>Corey Bringas</title>
 <link href="style.css" rel="stylesheet" type="text/css">
 </head>
 
 <body>
 <div id="wrapper">
 <div id="header">
 <h1>Corey Bringas</h1>
 <h2>Director of Photography</h2>
 </div>
 <div id="nav">
 <ul>
 <li><a href="#" class="current"><b>P</b>ROJECTS</a></li>
 <li><a href="#"><b>N</b>EWS</a></li>
 <li><a href="#"><b>R</b>EEL</a></li>
 <li><a href="#"><b>A</b>BOUT <b>M</b>E</a></li>
 <li><a href="#"><b>L</b>INKS</a></li>
 <li><a href="#"><b>P</b>HOTOGRAPHS</a></li>
 </ul>
 </div>
 <div id="content">
 <ul id="gallery">
 <li><a href="trails.html" title="Trails of Dust"><img src="tod.png" alt=""></a><b>T</b>RAILS <b>O</b>F <b>D</b>UST</li>
 <li><a href="lonely_grave.html" title="The Lonely Grave"><img src="linus.png" alt=""></a><b>T</b>HE <b>L</b>ONELY <b>G</b>RAVE</li>
 <li><a href="psychophobia.html" title="Psychophobia"><img src="psycho.png" alt=""></a><b>P</b>SYCHOPHOBIA</li>
 <li><a href="powerade.html" title="Powerade Spec Commercial"><img src="powerade.png" alt=""></a><b>P</b>OWERADE</li>
 <li><a href="darren.html" title="Darren Gunther S.A.T."><img src="darren.png" alt=""></a><b>D</b>ARREN <b>G</b>UNTHER</li>
 <li><a href="fortes.html" title="Fortes"><img src="fortes.png" alt=""></a><b>F</b>ORTES</li>
 </ul>
 </div>
 <div id="footer">Corey Bringas &nbsp; - &nbsp; Director of Photography &nbsp; - &nbsp; 858-705-4869 &nbsp; - &nbsp; [email protected]</div>
 </div>
 </body>
 </html>
 [/CODE]

and this css :

[CODE]* {
 margin: 0;
 padding: 0;
 }
 body {
 font-family: "Bernard MT Condensed", Arial, "Gill Sans";
 font-size: 14px;
 color: #FFFFFF;
 background-color: #000000;
 }
 #wrapper {
 width: 806px;
 margin: 0 auto;
 }
 #header {
 border-bottom: 2px solid #DDD;
 overflow: visible;
 padding-left: 140px;
 }
 #header h1 {
 text-align: center;
 font-size: 35px;
 font-weight: normal;
 }
 #header h2 {
 text-align: center;
 font-size: 28px;
 font-weight: normal;
 margin-bottom: -5px;
 }
 #nav {
 border-right: 2px solid #DDD;
 float: left;
 margin-top: -75px;
 padding-top: 95px;
 width: 120px;
 }
 #nav li {
 list-style: none;
 float: left;
 margin-right: -10px;
 padding-bottom: 60px;
 }
 #nav a {
 font-family: "Century Gothic", "Gill Sans", Georgia, Arial;
 color: #C0C0C0;
 text-decoration: none;
 font-size: 16px;
 font-weight: bold;
 float: left;
 border-bottom: 2px solid #DDD;
 clear: both;
 width: 130px;
 }
 #nav a:hover {
 color: #CCC;
 }
 #nav a b {
 color: #FFFFFF;
 font-size: 20px;
 }
 #nav a:hover b {
 color: #C0C0C0;
 }
 #nav a.current, #nav a:hover.current {
 color: #FFFFFF;
 }
 #content {
 margin: 20px 0 0 140px;
 }
 #gallery {
 width: 380px;
 margin: 50px auto 0;
 }
 #gallery li {
 list-style: none;
 text-align: center;
 float: left;
 margin-right: 25px;
 margin-bottom: 10px;
 color: #C0C0C0;
 font-size: 13px;
 }
 #gallery a {
 display: block;
 color: #FFFFFF;
 }
 #gallery a:hover {
 color: #C0C0C0;
 }
 
 
 #gallery a img {
 display: block;
 border-color: #FFFFFF;
 }
 #gallery a:hover img {
 border-color: #C0C0C0;
 }
 
 #gallery b {
 color: #FFFFFF;
 font-size: 14px;
 }
 #footer {
 clear: both;
 text-align: center;
 font-size: 12px;
 }
 [/CODE]

Layout centred, works cross-browser, makes sense semantically, and eliminated the graphics for the divider lines (faster load). All positioning is done with margins / padding and floats.

Cheers

Graeme

@surfin009authorJul 20.2007 — #wow, that is much better Graeme! Thanks so much. Now, is there a way to make something similar to frames, so that if I am to change my left menu i do not have to change it in every page? I have read about doing an insert via php but cannot master it..

I also was wondering if you could explain the code to me. I do not understand where you are writing in the lines that are underlining my left menu. They were images but I cannot see where they are? I'll look through it some more but I am somewhat confused. Thanks again for the help, it means a lot!

-Corey

@CentauriJul 21.2007 — #As the lines images you originally used were a uniform colour, they can be done with borders. The top line across the site under the heading is a bottom border on #header, the vertical line is a right border on #nav, and the menu item underlines are bottom borders on the <a> links.

[CODE]#header {
 [COLOR="Blue"]border-bottom: 2px solid #DDD[/COLOR];
 overflow: visible;
 padding-left: 140px;
 }
 #nav {
 [COLOR="Blue"]border-right: 2px solid #DDD[/COLOR];
 float: left;
 margin-top: -75px;
 padding-top: 95px;
 width: 120px;
 }
 #nav a {
 font-family: "Century Gothic", "Gill Sans", Georgia, Arial;
 color: #C0C0C0;
 text-decoration: none;
 font-size: 16px;
 font-weight: bold;
 float: left;
 [COLOR="Blue"]border-bottom: 2px solid #DDD[/COLOR];
 clear: both;
 width: 130px;
 }[/CODE]

To include the menu via php, put just the menu code and nothing else in a separate file, say named "menu.html" - so menu.html will just be

[CODE]  <div id="nav">
 <ul>
 <li><a href="#" class="current"><b>P</b>ROJECTS</a></li>
 <li><a href="#"><b>N</b>EWS</a></li>
 <li><a href="#"><b>R</b>EEL</a></li>
 <li><a href="#"><b>A</b>BOUT <b>M</b>E</a></li>
 <li><a href="#"><b>L</b>INKS</a></li>
 <li><a href="#"><b>P</b>HOTOGRAPHS</a></li>
 </ul>
 </div>
 [/CODE]

and nothing else - No doctype, NO head and body tags, JUST the menu code. Then in each page you "include" the menu with

[CODE]<div id="wrapper">
 <div id="header">
 <h1>Corey Bringas</h1>
 <h2>Director of Photography</h2>
 </div>
 [COLOR="Red"]<?php include('menu.html'); ?>[/COLOR]
 <div id="content">
 <ul id="gallery">
 [/CODE]

And most importantly, the page html file must be given a file extension of "php", so if your page was originally "projects.html" it now becomes "projects.php" - this means that all links in the menu will also point to .php pages. Now only one file (menu.html) needs to be updated with any menu changes. Note that for the include to work on your own computer while developing the site, you will need a web server running php installed on your computer - I suggest the free open-source xampp package.

@surfin009authorJul 21.2007 — #Hey guys!

Thanks so much for your help thus far. I have a few more questions for you.

1. I am having trouble staying away from absolutes.. An example-on my "Links" section i dont know how to make a second section without using absolutes- i.e. the column that starts with "jeff speed". I tried using margins and padding and couldnt get it to work.

2. I also need to do this in the about me section. to the right of my picture i want to add some text..

3. the footer is floating, which is both good and bad. I like the way it looks on my main page but when you go to pages with less content it floats to the top...

4. in FF on my main page my vids have a white border.. i do not like this. it doesnt show up in safari, but does in FF. I've tried border: clear; to no avail..

Thanks so much guys!

@CentauriJul 22.2007 — #There is no need to muck around with absolute positioning - use margins in association with floats. You also don't need to enclose everthing within divs - if you have only 1 element inside a div, it is a sure sign that div is not required, and the element itself can be styled. You have many syntax error in the links lists - mostly unclosed tags (li, span, and p tags not closed). Once a parent element is individually identifiable, there is no need to give every child element a class to identify it, so the "list" classes can go. Each <ul> can be floated left (to sit them side by side) and positioned with margins. (If you add another <ul> list it will sit beside the other two).

The links lists can be simplified to

[CODE]  <div id="content">
 <ul class="links">
 <li><a href="http://www.thebuzzla.com">Ron Najor</a></li>
 <li><a href="http://www.robinbuday.com">Robin Buday</a></li> 
 <li><a href="http://www.defiantfilms.net">Dave Gallegos</a></li>
 <li><a href="http://www.dpjasonhafer.com">Jason Hafer</a></li>
 <li><a href="http://www.demobrianthompson.com">Brian Thompson</a></li> 
 </ul>
 <ul class="links"> 
 <li><a href="http://www.jeffspeedfilms.com">Jeff Speed</a></li>
 <li><a href="http://www.erikknox.com">Erik Knox</a></li> 
 <li><a href="http://www.poly-motion.com">Todd Smith</a></li> 
 <li><a href="http://www.michaelrizzi.com">Michael Rizzi</a></li> 
 <li><a href="http://www.syncpicture.com">Trevor Fernando</a></li> 
 </ul>
 </div>
 <div id="footer">Corey Bringas &nbsp; - &nbsp; Director of Photography &nbsp; - &nbsp; 858-705-4869 &nbsp; - &nbsp; [email protected]</div>
 </div>
 [/CODE]

with the relevant css :

[CODE].links {
 font-size: 18px;
 font-weight: bold;
 float: left;
 display: inline;
 width: 10em;
 margin: 30px -50px 0 70px;
 }
 [/CODE]

Note that I retained the #content div - this should be on every page to keep the content out of the menu area. I note you changed the left margin of #content to 80px - this is not wide enough to prevent overlap of the menu, and should be reset to 150px.

Also, note the negative right margin on the .links class above - this allows each list to sit closer tgether while still being spaced away from the left edge.

Will discuss other questions next post

@CentauriJul 22.2007 — #With reference to the contact page, again you have syntax errors in the list structure - <li> s not closed, unclosed (and unnecessary) <p>s, unclosed <span>s. What is this [COLOR="Blue"]<span class="blacktext">[/COLOR] you keep putting in there? - there is no such class, and the spans are unclosed anyway.....

As this is a photographer's site, you should be concerned with [B]image quality[/B]. Resizing the corey.jpg image to 300px wide in the browser results in loss of image quality - do not use the browser to resize images. If you want that image displayed at 300px wide, then resize it with a graphics program before uploading. Floating the graphic to the left will allow text to flow around it.

Not sure what you mean by the footer floating to the top - it should always be below the bottom of the menu due to the clear:both.

When I did the main page rewrite, I specifically made the borders white as this matched your original look. As the thumbnails are links, the border is normal and the colour is set here

[CODE]#gallery a img {
 display: block;
 border-color: #FFFFFF;
 }
 #gallery a:hover img {
 border-color: #C0C0C0;
 }
 [/CODE]

If you do not want [B]any[/B] border, change the colour declaration to border:none;

I also noted you changed the menu border width to 1.5px - a browser cannot render half a pixel, but must round up or down. At the moment some of the horizontal menu lines render at 1 pixel, some at 2 pixels - looks a little strange.

Also in #CSS _↴

looking for a css photo gallery tutorial Hover CSS aligning elements

Success!

Help @surfin009 spread the word by sharing this article on Twitter...

Tweet This

Trouble getting layout right..

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Trouble getting layout right..

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴