PDA

View Full Version : BG shown in Dreamweaver but not in Browser?


Dennis.
09-22-2010, 09:41 PM
So im the middle of a website and i have a wall (its not the first time either :p )

So in dream weaver i have a nav bar for rollover buttons, however behind this i want another navbar to fill out the sides, you will see why in a second.

In dreamweaver:
http://i52.tinypic.com/2a4zp7t.png

in browser:
http://i53.tinypic.com/a4sbb7.png

HTML Code:
<body>
<div class="content">
<div><img src="images/header.png" width="710" height="210" alt="Banner" /></div>
<div class="nav"><ul class="cssmenu">
<li class="home"><a href="#" class="normal" title="Home"><span class="displace">Home</span></a></li>
<li class="gallery"><a href="#" title="Gallery"><span class="displace">Gallery</span></a></li>
<li class="studio"><a href="#" title="Studio"><span class="displace">Studio</span></a></li>
<li class="links"><a href="#" title="Links"><span class="displace">Links</span></a></li>
</ul>
</div>

CSS Code:
.nav {
width: -710px;
height: -25px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
margin: -16px;
margin-left: 0px;
text-align: center;
background:url('Images/navbg.jpg')

}

/* CSS Hover Naivation Setup */

ul.cssmenu {
list-style: none;
padding: 0px;
}

.displace {
position: absolute;
left: -5000px;
}

/* floats links left */

ul.cssmenu li {
float: left;
}

/* Controls the main image postions and the navigation image */

ul.cssmenu li a {
display: block;
width: 120px;
height: 24px;
background: url('images/navbar2.jpg');
}

/* Normal State Images //

position: 0 0; the first value controls the start position
the second value controls height */

ul.cssmenu li.home a {
background-position: 0 0;
}

/* -120px is the strat of the next image */

ul.cssmenu li.gallery a {
background-position: -120px 0;
}

ul.cssmenu li.studio a {
background-position: -240px 0;
}

ul.cssmenu li.links a {
background-position: -360px 0;
}

/* Hover Links // Same as the above, but this time you will see your hover state */

ul.cssmenu li.home a:hover {
background-position: 0 -552px;
}

ul.cssmenu li.gallery a:hover {
background-position: -120px -552px;
}

ul.cssmenu li.studio a:hover {
background-position: -240px -552px;
}
ul.cssmenu li.links a:hover {
background-position: -360px -552px;
}



I am totally new to the whole HTML, CSS and just about everything else. So i will probably be asking a lot of questions :P

gentleone
09-23-2010, 05:50 AM
What's the meaning of this? I never seen someone used negative widths and heights before. I assume this is causing your issue.


.nav {
width: -710px;
height: -25px;

Dennis.
09-23-2010, 09:45 PM
Thanks man, it worked. I think the only reason i kept it as Negatives was because when they wernt negatives, in dreamweaver it looked like this:

http://i52.tinypic.com/1zqwkeo.png

I never realised thats what caused it.

However now, when in a browser it does show up. But it is in the wrong place. Which in turn brings the content box up to where it ends (this is about half way through the buttons.

http://i54.tinypic.com/nqxve1.png

Any ideas?

gentleone
09-24-2010, 05:42 AM
when they wernt negatives, in dreamweaver it looked like this
Never use design view to adjust margins, padding or actualy anything. Use a browser as reference and also the other 4 most uses ones. You build websites for browsers not for dreamweaver's design view.

However now, when in a browser it does show up. But it is in the wrong place. Which in turn brings the content box up to where it ends (this is about half way through the buttons.
Need more CSS to see what rules you have for the content div.

Dennis.
09-24-2010, 12:14 PM
Need more CSS to see what rules you have for the content div.

Here is all the CSS:

@charset "UTF-8";
/* CSS Document */
/* Content Controller */
body {
background-color: #000;
background-image: url(Images/bg.png);
background-repeat: repeat;

font-family: Arial, sans-serif;
font-size: 16px;
color: #999;
}
/* Content Wrapper */
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;

padding: 0;
}
/* Nav positioning */
.nav {
width: 710px;
height: 24px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
margin: -16px;
margin-left: 0px;
text-align: center;
background-image:url(Images/navbg.jpg)

}
/* CSS Hover Naivation Setup */
ul.cssmenu {
list-style: none;
padding: 0px;
}
.displace {
position: absolute;
left: -5000px;
}

/* floats links left */
ul.cssmenu li {
float: left;
}
/* Controls the main image postions and the navigation image */
ul.cssmenu li a {
display: block;
width: 120px;
height: 24px;
background: url('images/navbar2.jpg');
}
/* Normal State Images //
position: 0 0; the first value controls the start position
the second value controls height */
ul.cssmenu li.home a {
background-position: 0 0;
}
/* -120px is the strat of the next image */
ul.cssmenu li.gallery a {
background-position: -120px 0;
}
ul.cssmenu li.studio a {
background-position: -240px 0;
}

ul.cssmenu li.links a {
background-position: -360px 0;
}
/* Hover Links // Same as the above, but this time you will see your hover state */
ul.cssmenu li.home a:hover {
background-position: 0 -552px;
}
ul.cssmenu li.gallery a:hover {
background-position: -120px -552px;
}
ul.cssmenu li.studio a:hover {
background-position: -240px -552px;
}
ul.cssmenu li.links a:hover {
background-position: -360px -552px;
}
.Maincontent {
width: 680px;
margin: 0px auto;
text-align: left;
margin-top: -430px;
text-align: center
}
.Mainconent {
position: absolute;
top:252px;
left: 249px;
width:680px;
height:400px;
text-align: center
center; margin: 0px auto;
}

gentleone
09-24-2010, 12:40 PM
I see another weird CSS rule in your .nav.
margin: -16px; Can you change the -16px to 0. I'm sure this will do the trick.

Dennis.
09-24-2010, 01:37 PM
Thanks man, it worked! it ended up with a gap between the banner and the nav bar but i fixed that (im proud of myself :P)

Now all i need to fix is the width of the navbg. Its still too long compared to the rest :/

gentleone
09-24-2010, 04:34 PM
Thanks man, it worked! it ended up with a gap between the banner and the nav bar but i fixed that (im proud of myself :P)

Now all i need to fix is the width of the navbg. Its still too long compared to the rest :/

Glad your sorted it out.

The navbg issue is because you apply a left-padding of 100px in the CSS of .nav. The width of your content wrapper is 710px and so is also the width of your .nav div.
Because of that left padding is the actual width of .nav 710px + 100px = 810px. To solve this make the width of .nav 610px, so that the total is the right 710px.

This is actually one of the basics of CSS. Doing all the time math according to the CSS box model.

http://www.w3schools.com/css/css_boxmodel.asp

BUT! IE wouldn't be IE if they wouldn't handle things differently. IE uses another CSS box model, but to be honest this one makes more sense IMO.

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

So if you have margin and padding differences between Firefox and IE then you'll have to correct these in an IE specific stylesheet through conditional comments.

http://www.quirksmode.org/css/condcom.html

Dennis.
09-24-2010, 04:58 PM
Thanks man, ill give them a read. I need to make a website soon for my College course so all this info is great, i really appreciate it :)

So with this new CSS i need, do i just attach it like the other and just put the conditional comments into it?

gentleone
09-24-2010, 05:10 PM
you just make a IE stylesheet called ie.css and link to this in your head after your default stylesheet:
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"/><![endif]-->Only Internet Explorer will take those styles and the rest of the browsers will ignore them.

Dennis.
09-24-2010, 05:11 PM
Alright, thanks :)

gentleone
09-24-2010, 05:17 PM
No props! ;)

Dennis.
09-24-2010, 09:26 PM
I hate to say it man but i have no idea how to find out what properties i need for this conditional comment.
I assume that i need it to look like this but just edit the properties so that it works in IE. Is there a way i can find out my box model size?

<!--[if IE]>
.nav {
width: 610px;
height: 24px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
margin: 0px;
margin-left: 0px;
margin-right: 0px;
<![endif]-->

Edit: I just re-read this link:
http://www.w3schools.com/css/css_boxmodel.asp

And it says something about adding this code to the top of my code so IE doesnt add padding and border width to the total. Could i just add this?

gentleone
09-24-2010, 09:47 PM
I didn't say that you had to put your .nav in a conditional comment. :) All I did was a little lecture about how padding has effect on the heights and widths of HTML elements.

About the CSS box model... I forgot to mention that if you have a doctype declared at the top of your page then you don't have to worry about the IE box-model. It only has effect if you don't have a doctype and thus the page is in quirks mode. So forget about this if you have a doctype at the top ;) If not, then put one there, but DW add a doctype automatically if you open a new page.

Dennis.
09-24-2010, 10:04 PM
Thank god haha, glad i re-read that then :)
My template is now done, woohoo. Now for the extra content -_-

Thanks again haha

Dennis.
09-24-2010, 11:36 PM
Thought i would post in here again, i would PM but i dont have that option yet.

So i am on the final step of finishing this page. One thing is holding me back. This stupid image, it seems like it has gone behind my content box (which is slightly transparent).

http://i55.tinypic.com/2mnn58j.png

HTML:

<!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="styles.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div class="content">
<div><img src="images/header.png" width="710" height="210" alt="Banner" /></div>
<div class="nav"><ul class="cssmenu">
<li class="home"><a href="#" class="normal" title="Home"><span class="displace">Home</span></a></li>
<li class="gallery"><a href="#" title="Gallery"><span class="displace">Gallery</span></a></li>
<li class="studio"><a href="#" title="Studio"><span class="displace">Studio</span></a></li>
<li class="links"><a href="#" title="Links"><span class="displace">Links</span></a></li>
</ul>
</div>
<img src="images/template.png" width="710" height="435" alt="Background" />
<div class="Maincontent">
<img src="../Images/shop.jpg" width="350" height="237" alt="Studio" class="floatRight"/>
<p>Welcome to Triple T’s tattoo studio, whether you are looking for a timeless traditional tattoo, new school artwork, classic black and grey design,</p>
portrait work or a completely custom piece, Triple T’s can accommodate your every need. You can also choose a design from the latest flash available.Triple T’s offers a clean and professional environment that welcomes and is accustom to all customers. All instruments are autoclaved and sterilized for our customer’s safety. Triple T’s is a health authority registered business therefore meeting all health regulations and standards.
<p>Finally we hope that you enjoy browsing the material present on the website that will be updated with the latest work regularly, and we hope to see you in the near future.</p>
</div>
</div>
</div>
</body>
</html>


CSS:

@charset "UTF-8";
/* CSS Document */

/* Content Controller */

body {
background-color: #000;
background-image: url(Images/bg.png);
background-repeat: repeat;

font-family: Arial, sans-serif;
font-size: 16px;
color: #999;
}

/* Content Wrapper */

.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
padding: 0;

}

/* Nav positioning */

.nav {
width: 610px;
height: 24px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
margin: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-image:url(Images/navbg.jpg)

}

/* CSS Hover Naivation Setup */

ul.cssmenu {
list-style: none;
padding: 0px;
margin: 0px;
}

.displace {
position: absolute;
left: -5000px;
}

/* floats links left */

ul.cssmenu li {
float: left;
}

/* Controls the main image postions and the navigation image */

ul.cssmenu li a {
display: block;
width: 120px;
height: 24px;
background: url('images/navbar2.jpg');
}

/* Normal State Images //

position: 0 0; the first value controls the start position
the second value controls height */

ul.cssmenu li.home a {
background-position: 0 0;
}

/* -120px is the strat of the next image */

ul.cssmenu li.gallery a {
background-position: -120px 0;
}

ul.cssmenu li.studio a {
background-position: -240px 0;
}

ul.cssmenu li.links a {
background-position: -360px 0;
}

/* Hover Links // Same as the above, but this time you will see your hover state */

ul.cssmenu li.home a:hover {
background-position: 0 -552px;
}

ul.cssmenu li.gallery a:hover {
background-position: -120px -552px;
}

ul.cssmenu li.studio a:hover {
background-position: -240px -552px;
}
ul.cssmenu li.links a:hover {
background-position: -360px -552px;
}


img.floatRight {
float: right;
margin: 4px;
}


.Maincontent {
width: 680px;
margin: 0px auto;
margin-top: -430px;
text-align: center;
}




.Mainconent {
position: absolute;
top:252px;
left: 249px;
width:680px;
height:400px;
text-align: center
center; margin: 0px auto;
}

gentleone
09-25-2010, 08:41 AM
Do you mean this image?
<img src="images/template.png" width="710" height="435" alt="Background" />
If so anyways... it shouldn't be there in the first place. It's an image that's part of your layout and therefor it belongs in your CSS. Perhaps as background-image of .maincontent.

Dennis.
09-26-2010, 03:47 PM
I have tried that with this:

.Maincontent {
width: 710px;
height: 435px;
margin: 0px;
margin-top: -430px;
text-align: center;
background:url(../Images/Template.png)
}

it just makes the text and image go all over the place.