PDA

View Full Version : Layout Trouble


hudini16
08-02-2008, 03:08 PM
Hey guys,

Just wondering if you could help me with a little problem, I've just set up my site here www.colourlessclothing.com (http://www.colourlessclothing.com) but there is a slither of grey down the left hand side and the scroll bar appears at the bottom of the page; I want to get rid of both of these.

If anyone has any ideas please reply,

Cheers
jack.

Corrosive
08-02-2008, 05:39 PM
Hey guys,

Just wondering if you could help me with a little problem, I've just set up my site here www.colourlessclothing.com (http://www.colourlessclothing.com) but there is a slither of grey down the left hand side and the scroll bar appears at the bottom of the page; I want to get rid of both of these.

If anyone has any ideas please reply,

Cheers
jack.

Sorry but it's a complete mess on IE. Check it at www.browsershots.org (http://www.browsershots.org) and you'll see what I mean. Post the code for the site if you want a debug.

hudini16
08-02-2008, 06:56 PM
Hey mate, thanks for the reply, that's a great website by the way, didn't even know that existed.

Do you know what might be causing it to go all messed up and how I could fix it?

Cary
08-02-2008, 09:16 PM
As you can see in the code below, I removed the #contentwrapper div. It wasn't needed as the #wrapper div can accomplish the same purpose.

You're applying the background image to both the body and the #wrapper. Only the body needs it and it should be centered.

The #footer styling had a mistake. You typed "height 40px;" but it should have been "height: 40px;" with a colon.

Besides dropping the #contentwrapper styling, I made the following changes to the style sheet (remove the embedded styling from the head of the html).

body {
background: #DBDBDB url(graphics/bg.jpg) no-repeat center top;
text-align: center; /* so page is centered in IE5 */
}
#wrapper {
margin: 0 auto;
width: 850px; /* change to about 860px to remove gray edges */
text-align: left; /* negates the center alignment from the body */
background-color: #FFFFFF; /*will cover gray edges if you make the wrapper wider */
color: #000000;
}

<!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>
<title>Colourless Clothing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<br />
<img src="graphics/header.jpg" alt="Colourless Clothing - The Clothing Company" width="699" height="210" />
</div>
<div id="menu">
<a href="index.html" title="Home/News">HOME/NEWS</a> | <a href="threads.html" title="Threads">THREADS</a> | <a href="http://colourlessclothing.bigcartel.com/" title="Shop">SHOP</a> | <a href="bands.html" title="Bands">BANDS</a> | <a href="help_faq.html" title="Help/FAQ">HELP/FAQ</a>
</div>
<div id ="content">
<p>ALL OUR DESIGNS ARE PRINTED ON AMERICAN APPAREL FOR THE HIGHEST COMFORT AND WE SHIP WORLDWIDE!!!</p>
<p>29/6/2008</p>
<p>Hey guys! Welcome to our new site! We will be regularly updating here to keep you posted on what is happening with COLOURLESS, covering new releases and what we've been up to.</p>
<p>Thanks for checking us out and keep your eyes peeled for more releases!</p>
<p>Jack</p>
<p>Also if you get a chance, head over to emptees.com, it's a great site for all budding designers.</p>
</div>
<div id ="footer">
<img src="graphics/ms.jpg" alt="" width="47" height="50" />
<img src="graphics/bc.jpg" alt="big cartel" width="67" height="50" />
<img src="graphics/americanapparellogo.jpg" alt="American Apparel" width="200" height="48" />
</div>
<div id ="footer2"> ALL IMAGES COPYRIGHT JACK MALSTER 2008 </div>
</div>
</body>
</html>

hudini16
08-02-2008, 09:18 PM
Wow, this is great mate, thanks, I'll try it out tomorrow, thanks again for your help.

Cary
08-02-2008, 09:23 PM
I forgot to mention, the horizontal scrollbar was the result of making you #wrapper div wide enough to contain the background image.

Corrosive
08-03-2008, 06:55 AM
Hey mate, thanks for the reply, that's a great website by the way, didn't even know that existed.

Yep it's dead handy. You only get a couple of goes within 24 hours so use it sparingly but it's good to check when you have your finalised layout. Looks like Cary has fixed the rest for you...he's brilliant like that :)

hudini16
08-03-2008, 09:43 AM
Hey guys, thanks for the help yesterday, I've added the code were I think it has to go, but I'm not sure. Although there is still a problem shown here www.colourlessclothing.com (http://www.colourlessclothing.com) both in firefox and iexplorer.

I'm a real beginner at this, if you could tell me exactly where to put the code that would be great.

Also, does anyone know why the font style changes from browser to browser and which one I could use that would stay the same throughout?

Cheers guys.

Corrosive
08-03-2008, 02:08 PM
Also, does anyone know why the font style changes from browser to browser and which one I could use that would stay the same throughout?

Hi

Different browsers render fonts slightly differently as do Macs and PCs. It also depends which font is loaded on the machine it is viewed on. DW should give machines the option of a number of fonts in order of preference, i.e. Verdana, Arial, Helvetica, sans-serif. So if the machine doesn't have Verdana it will use Arial and so on. There's no generic 'fix' for this so you need to understand how different fonts will look with your design based on where they are viewed and what is installed.

Cheers

Cary
08-03-2008, 08:02 PM
Hi,

You have this in the head of your html:

<style type="text/css">
<!--
body {
background: #DBDBDB url(graphics/bg.jpg) no-repeat center top;
text-align: center; /* so page is centered in IE5 */
}
#wrapper {
margin: 0 auto;
width: 850px; /* change to about 860px to remove gray edges */
text-align: left; /* negates the center alignment from the body */
background-color: #FFFFFF; /*will cover gray edges if you make the wrapper wider */
color: #000000;
}

body {
background-image: url(graphics/bg.jpg);
background-repeat: no-repeat;
}
-->
</style>

Remove all that, or just replace your html code with what I posted yesterday because you also should remove the #content wrapper div and fix several validation errors such as missing alt tags and a closing p tag. The code I provided fixes all those things.

What you need to look at is the style.css file which starts with this:

body {
background: #DBDBDB;
}

a:link, a:visited, a:active
{ text-decoration: none; color:#838383;}
a:hover
{ text-decoration: underline; color:#a7a7a7;}

#wrapper {
margin: 0px auto;
width: 1010px;
background: url(graphics/bg.jpg);
}

#contentwrapper {
margin: 0 auto;
width: 850px;
}

The body and the #wrapper code need to be changed so they look like the code I posted yesterday and the #contentwrapper code can be removed, so that changed portion of the style sheet will look like this:

body {
background: #DBDBDB url(graphics/bg.jpg) no-repeat center top;
text-align: center; /* so page is centered in IE5 */
}

a:link, a:visited, a:active
{ text-decoration: none; color:#838383;}
a:hover
{ text-decoration: underline; color:#a7a7a7;}

#wrapper {
margin: 0 auto;
width: 850px; /* change to about 860px to remove gray edges */
text-align: left; /* negates the center alignment from the body */
background-color: #FFFFFF; /*will cover gray edges if you make the wrapper wider */
color: #000000;
}

As Corrosive pointed out, you have to tell the browser what font to use, or it will use a default, which isn't the same with all browsers. So you just changed the style.css file. Now you need to change it again. This time you're going to change just the body rule:

body {
background: #DBDBDB url(graphics/bg.jpg) no-repeat center top;
text-align: center; /* so page is centered in IE5 */
}

Double-click the body selector in the CSS panel.

http://www.solsector.com/cary/csspanel.png

Then select a font-family and set the size to 100%.

http://www.solsector.com/cary/csseditor.png

Click OK and different browsers should use similar looking fonts.

Cary
08-03-2008, 08:07 PM
Something else you need to change in your style sheet:

a:link, a:visited, a:active
{ text-decoration: none; color:#838383;}
a:hover
{ text-decoration: underline; color:#a7a7a7;}

a:active needs to come after a:hover so do this instead:

a:link, a:visited
{ text-decoration: none; color:#838383;}
a:hover
{ text-decoration: underline; color:#a7a7a7;}
a:active
{ text-decoration: none; color:#838383;}

hudini16
08-03-2008, 08:30 PM
Cary, man, I don't know what to say, thank you so much, everything seems to be sorted now, you are the man.
Thanks for explaining it all to me, in the last post, layed it out perfectly.
Great forums, everyone's been really helpful.

Thanks again.

Cary
08-03-2008, 09:13 PM
No problem. Just make sure you check your pages here (http://validator.w3.org/) so you can fix any problems. Don't freak out at all the options. Just put in your url and click "Check".