PDA

View Full Version : 1st CSS Web Page!!


JamesTaylor
06-23-2008, 08:51 AM
So i've just created my 1st page with CSS and generally it seems ok!

www.virtualfrm.net/BPS?index.html (http://www.virtualfrm.net/BPS?index.html)

There is a couple things however that i need a little help with as usual! The page seems to display correctly in IE but when i view it in firefox there is a gap appearing between the header banner and the navigation bar... can anyone help me resolve this issue?

I have still to implement the rollover effects for the links and create the links themselves which will be my next task / challenge!

I'm also slightly unsure about the best way to go for creating / storing the CSS for individual pages? do you guys usually lump it all together into a single CSS file that is applied across the board or should i be trying to create a CSS file for the general page structure and then a unique one for the content which is specific to each page?

finally is anyone is willing to have a glance over my code structure etc. and give me any pointers it would be much appreciated as i'd imagine it can be improved upon!?

Corrosive
06-23-2008, 09:32 AM
So i've just created my 1st page with CSS and generally it seems ok!

www.virtualfrm.net/BPS?index.html (http://www.virtualfrm.net/BPS?index.html)

There is a couple things however that i need a little help with as usual! The page seems to display correctly in IE but when i view it in firefox there is a gap appearing between the header banner and the navigation bar... can anyone help me resolve this issue?

I have still to implement the rollover effects for the links and create the links themselves which will be my next task / challenge!

I'm also slightly unsure about the best way to go for creating / storing the CSS for individual pages? do you guys usually lump it all together into a single CSS file that is applied across the board or should i be trying to create a CSS file for the general page structure and then a unique one for the content which is specific to each page?

finally is anyone is willing to have a glance over my code structure etc. and give me any pointers it would be much appreciated as i'd imagine it can be improved upon!?

Hi James. I've just tried and don't seem to be able to access your page. I am at work and our systems are rubbish but I'd like to have a look.

I tend to do exactly what you have described...

create a CSS file for the general page structure and then a unique one for the content for each specific page.

Also, post your code and we'll take a look. :grin:

JamesTaylor
06-23-2008, 09:51 AM
sorry thats a typo on my part! can't spot how to edit my post so here is the correct link

www.virtualform.net/BPS/index.html (http://www.virtualform.net/BPS/index.html)

Thanks for spotting that one pal!!

Corrosive
06-23-2008, 10:21 AM
http://browsershots.org/http://www.virtualform.net/BPS/index.html

Hi James

Run the page through browsershots (see link above) and, you are right, there are some differences in the layout between browsers. Particularly around the header and navbar. Post your code and we'll take a look.

JamesTaylor
06-23-2008, 10:34 AM
Thanks, thats a handy link to know about!

heres the HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="BPSStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="PageContainer">
<div id="Header">
<dl id="HeaderImages">
<dt id="PalletImage"><img src="Images/HeaderImage.jpg" alt="HeaderImage" /></dt>
<dt id="RecycleSymbol"><img src="Images/RecycleSymbol.jpg" alt="Recycle" /></dt>
<dt id="BPSLogo"><img src="Images/BrighousePalletsLogo.gif" alt="BPSLogo" /></dt>
</dl>
</div>
<div id="NavigationBar">
<dl id="NavLinks">
<dt id="NavHome">Home</dt>
<dt id="NavPallets">Pallets</dt>
<dt id="NavContactUs">Contact Us</dt>
</dl>
</div>
<div id="SidebarContent"></div>
<div id="MainContent">
<h1><span class="Bold">Brighouse Pallet Services</span> provide a comprehensive service for all your pallet requirements. Our experienced team provides a reliable, professional and prompt service at competitive rates whatever your needs. <br />
<br />
Our comprehensive range of services including: <br />
<br />
- Manufacture, sales and delivery of standard size pallets <br />
- Bespoke pallet Manufacture &amp; sales <br />
- Purchasing of used pallets <br />
- Recycling, Reconditioning &amp; sales of used pallets. <br />
- Pallet Repairs <br />
<br />
Our products are manufactured from a high percentage of reclaimed and recycled wood, by doing so we can pass on the cost savings to our clients who also help to lower their carbon emissions and save many trees in the process. <br />
<br />
We have a large selection of pallets ready for immediate delivery and are always pleased to discuss your requirements and help in anyway possible, so feel free to contact us and see how we can help.</h1>
</div>
<div id="Footer">
<dl id="FooterText">
<dt id="Address">Taglock Works - Elland Road - Brighouse - HD6 2RG</dt>
<dt id="Fax"><span class="FaxBlack">Fax:</span> 01422 410 475</dt>
<dt id="Tel"><span class="TelBlack">Tel:</span> 01422 327 690</dt>
</dl>
</div>
</div>
</body>
</html>


and here is the CSS code


@charset "utf-8";
html, body {
background-color: #EEEEEE;
}
#PageContainer {
width: 900px;
margin: auto;
background-color: #bfbfbf;
border: 1px solid #666666;
}
#Header {
background-image: url(Images/HeaderBG.gif);
background-repeat: repeat-x;
height: 172px;
background-color: #BFBFBF;
padding: 0px;
margin-top: 38px;
}
#HeaderImages {
margin-top: 0px;
}
#HeaderImages dt {
float: right;
}
#PalletImage {
margin-top: 5px;

}
#RecycleSymbol {
margin-right: 15px;
margin-top: 60px;
}
#BPSLogo {
margin-top: 15px;
margin-right: 115px;
}
#NavigationBar {
background-image: url(Images/NavigationBG.gif);
background-repeat: repeat-x;
height: 30px;
}
#NavLinks {
font-family: Tahoma;
font-size: 16px;
font-weight: bold;
color: #000000;
margin-left: 20px;
margin-top: 0px;
}
#NavLinks dt {
float: left;
margin-top: 3px;
}
#NavHome {
}
#NavPallets {
margin-left: 20px;
}
#NavContactUs {
margin-left: 20px;
}

#SidebarContent {
float: right;
width: 380px;
background-image: url(Images/Pallets.jpg);
background-position: right bottom;
background-repeat: no-repeat;
height: 423px;
}
#MainContent {
margin-right: 380px;
padding: 20px;
}
#MainContent h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: lighter;
line-height: 13pt;
}
.Bold {
font-weight: bold;
}
#Footer {
clear: both;
background-image: url(Images/GreenBand.gif);
background-repeat: repeat-x;
height: 86px;
background-color: #FFFFFF;
}
#FooterText {
font-family: Tahoma;
font-size: 14px;
font-weight: bold;
color: #377e14;
margin: 0;
margin-left: 20px;
}
#FooterText dt {
float: left;
margin-top: 20px;
}
#Address {
}
#Fax {
margin-left: 145px;
}
.FaxBlack {
color: #000000;
margin-right: 10px;
}
#Tel {
margin-left: 50px;
}
.TelBlack {
color: #000000;
margin-right: 10px;
}



Thanks for taking a look!

Corrosive
06-23-2008, 12:27 PM
I have to say that, for a first page/attempt, you have done really well. Both HTML and CSS validate at http://w3.org I'm afraid that I can't see what is causing your nav bar issue for looking :( :confused: . I take it that how it displays in IE is how you would like it to look?

As I said, I am at work now, but I can have a look again later when away from other distractions.

In the meantime...'bug fix anyone??'

ayok
06-23-2008, 04:43 PM
You need to set all margin and padding to zero (margin:0; padding:0; ) Because every browser has different default margin and padding.

domedia
06-23-2008, 04:44 PM
add this css declaration to #NavLinks:

height: 1%;

JamesTaylor
06-23-2008, 05:21 PM
add this css declaration to #NavLinks:

height: 1%;

Domedia you are a star!! that has worked a treat...

any chance you could briefly explain what was causing the problem and how height: 1% is solving it, to help me understand for the future!

domedia
06-23-2008, 05:40 PM
If #Navlinks only has only floated elements inside it, it has a problem drawing a box around it. This sounds like a weird explanation, but it's the best I can do :)
By setting a height value to anything at all, you'll force #Navlinks to draw it's box around the floated elements, even though there's nothing to float against in the box.

JamesTaylor
06-23-2008, 05:58 PM
Cheers Domedia, that make sense and i now know to look out for it!

JamesTaylor
06-23-2008, 08:25 PM
Right, so now were onto the next issue!!

i've got the navigation links working, so i have moved onto the pallets page.

i'm trying to recreate the layout shown in the attachment... i've got so far but i'm not entirely convinced i've gone about it in the correct manner. The further i've got the more difficult the CSS is becoming to predict! For example if i apply a left margin to the #4WayWingText it updates and appears to apply as expected but then doesn't have any effect when viewed in the browser??

my progress so far can be seen at www.virtualform.net/BPS/pallets.html (http://www.virtualform.net/BPS/pallets.html) any suggestion much appreciated!

can i actually achieve this purely with CSS or do i need to revert to inserting a table?

JamesTaylor
06-23-2008, 10:26 PM
with a bit of perseverance i 've almost managed to get the page working as i want, although i'd be suprised if the professionals out there would have created it the same way!

The problem i have now is that when viewed in IE the text in the Main Content div and the text in the SideContentPallets div don't line up in their vertical position? Both divs have 20px padding applied and no line breaks or spacing above the 1st line of text?

It views correctly and everything lines up in FF

any help and suggestions much appreciated! again it can viewed at www.virtualform.net/BPS/pallets.html