Moving from Tables

hobbit666 · #1 Mar 9th, 2008, 18:48

OK i'm a table junkie as every time i try CSS the different browsers cause me so much pain i always go back to tables.

But i'm not going to this time, i'm going to get my head around CSS.

But i have a problem

This is the new CSS page: http://dev.hobbit-hosting.com

what i need is to get the bottom of the div to align with the context div.

the page should look like http://dev.c4media.co.uk when i finish the other bits (this one has a table type template with a bit CSS.)

Any tips on getting this to work?

Rob · #2 Mar 9th, 2008, 22:00

Here's some tips for writing cross browser code:-

Reset all elements margins, paddings and text-size's in your css - this is because different browsers use different defaults - be sure to add the following code to the beginning of your css file.

Code: Select all

* {margin:0; padding:0; text-size:12px;}

This means you have to explicitly define margins and paddings on everything that needs them, and specify font-size's for all elements using em units.

My last tip is to never design for internet explorer. Design for firefox, and then fix the bugs in IE.... never the other way round - most people who have massive cross browser headaches dont do this.

The above will make your life twenty times easier.

hobbit666 · #3 Mar 10th, 2008, 07:13

Thanks for the Firefox tip. I tend to use Dreamweaver to do the sites and find what i see there is what firefox will look like.

I do tend to put the margin and padding at the begining, but i tend to put it in the body, should i move it to *?

Rob · #4 Mar 10th, 2008, 07:20

definitly use *.... this will apply to ALL elements and basically reset their defaults. You then need to set these up where needed because nothing will have padding or margin anymore by default.

Doing it this way, and explicitily defining them tends to remove a lot of issues spacing, positioning and text sizing issues across browsers.

hobbit666 · #5 Mar 18th, 2008, 19:23

Right i've been having a play and there's a few things i just can't get working.
http://dev.hobbit-hosting.com

1) The Menu on the left. The white border should go around the whole button but for some reason the green background pops out on the left a bit.

2) The left Div (menu div) the bottom doesn't match up with the context.

Here is the code.

CSS

PHP: Select all


* { padding: 0; margin: 0; }
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}
#wrapper { 
 margin: 0 auto;
 width: 980px;
}
#header {
background-image: url(images/css/background.gif);
width: 980px;
height: 144px;
}
#headertitle {
background-image:url(images/css/background-02.gif);
width: 980px;
height: 44px;
float:left;
}
#left {
background-image:url(images/css/background-03.gif);
background-repeat: repeat;
width: 235px;
height: auto;
float: left;
text-align: center;
font-size: 16px;
font-weight: bold;
}
#leftcontext {
padding-left: 15px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 15px;
width: 470px;
background-color:#999999;
float: left;
}
#rightconext {
width: 250px;
background-color: #00FF00;
float: right;
}
#footer {
clear: both;
background-image: url(images/css/background-05.gif);
width: 980px;
height:48px;
}
#navlist 
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}
#navlist li
{
display: block;
margin: 0;
padding: 0;
border: solid .25em #FFFFFF;
margin-top: 0.3em;
margin-bottom: .7em;
}
#navlist li a
{
text-align: center;
display: block;
width: 100%;
padding: .3em;
color: #FFFFFF;
text-decoration: none;
background: #3d736b;
}
ul {
margin-left: 15px;
}
img {
padding-top: 10px;
padding-bottom: 5px;
}
#logo {
margin-left: 25px;
}

HTML

PHP: Select all


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pentre Bach - Home Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img id="logo" src="images/logo2.gif" alt="logo" width="290" height="113" /></div>
<div id="headertitle"></div>
<div id="left">
    <ul id="navlist">
    <li><a href="index.php">HOME</a></li>           
    <li><a href="thecottages.html">THE COTTAGES</a></li>
    <li><a href="thearea.html">THE AREA</a></li>
    <li><a href="booking.html">BOOKING</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="comments.html">COMMENTS</a></li>
    <li><a href="links.html">LINKS</a></li>
    <li><a href="contacts.html">CONTACT US</a></li>
</ul></div>
 
<div id="leftcontext">
  <p>Pentre Bach House and its three cottages are set in three acres of land overlooking Cardigan Bay, with dramatic Cader Idris and     its fellow mountains outside the back door. </p>
  <p>&nbsp;</p>
  <p>This is a great place for spending the days inhaling lungfuls of briny air on the beach, climbing hills and playing games in the     great outdoors, followed by evenings around the supper table and in front of the fire with books and films. There's a large field     for games, a willow den for the children and a table tennis room. </p>
  <p>&nbsp;</p>
  <p>The nearest beach, ten minutes' walk away, is pebbly, and there are two excellent sandy beaches within a 15 minutes drive in     either direction.</p>
  <p>&nbsp;</p>
    <ul>
    <li>Where mountains meet the sea in beautiful Snowdonia</li>
    <li>Can accommodate from two up to thirty people</li>
    <li>Wide range of outdoor activities on the doorstep</li>
    <li>Open fires in three properties </li>
    <li>Action packed week or romantic short break</li>
    <li>Relax and enjoy seclusion without isolation </li>
    <li>Nearest traffic lights 40miles away but we are only 2-3 hours from Birmingham and Manchester.</li>
    </ul>
</div>
<div id="rightconext">
<img src="images/pb_PICTURE.jpg" alt="pbhouse" width="250" height="178" />
<img src="images/outsidepb.jpg" alt="outsidepb" />
<img src="images/villagefromhill.jpg" alt="view from hill" />
  </div>
<div id="footer"></div>
 
 <!-- End Wrapper and body -->
</div></body>
</html>

awatson · #6 Mar 18th, 2008, 20:50

If you haven't already, i'd recommend installing firebug (firefox extension) and then using that to debug your css - makes life tons easier.

hobbit666 · #7 Mar 19th, 2008, 07:36

I've downloaded that but can't see why the div is not working correctly

awatson · #8 Mar 21st, 2008, 13:57

In firebug, I was able to fix the white border not going around the left side nav items by editing #navlist li a - removing width: 100% - I think that that was pushing the width of the A items such that with the padding they were larger than the containing LI element....

You can fix the gap beneath the nav items by adding url(images/css/background-03.gif) to the div#wrapper and setting it to top left, repeat-y so it tiles down the left side and shows beneath all the other elements.

Hope that helps!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Moving Nav bar	acrikey	Web Page Design	5	Sep 26th, 2007 13:37
Moving	Ryan Fait	Webforumz Cafe	36	Jun 12th, 2007 22:55
Images moving	notagz1	Web Page Design	5	May 22nd, 2007 03:04

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Moving from Tables