Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Css Issues. Please Help.

    I'm having some troubles with my css and a page I'm working on. In dreamweaver in code/design mode it shows the changes happening but when I upload to preview it doesn't change:

    The border around the side_image isn't showing up and neither is the color for the body_text. here is the code and css. I have tried to avoid posting and have been trying to figure it out myself but i'm stuck. could anyone shed some light on this?

    Page code:

    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="stylesheets/walkerindustries.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
      <div id="topback">
        <div id="navbar">
          <ul>
            <li class="home"><a href="index.html">home</a></li>
            <li class="about"><a href="about.html">about</a></li>
            <li class="services"><a href="services.html">services</a></li>
            <li class="showcase"><a href="showcase.html">showcase</a></li>
            <li class="quote"><a href="quote.html">request a quote</a></li>
            <li class="contact"><a href="contact.html">contact</a></li>
          </ul>
        </div>
        <img src="images/walker_logo.png" width="286" height="85" align="absmiddle" class="logo" /><span class="logotext">providing a wide range of professional rensovation services</span>
           </div>
      <div id="body_content"><img src="images/side_image5.jpg" width="201" height="450" class="side_image"/>
        <div id="body_text">Content for  id "body_text" Goes Here</div>
      </div>
      
    </div>
    </body>
    </html>
    here is the css code that i'm working with atm: (updated)

    Code:
    @charset "utf-8";
    #wrapper {
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #wrapper #topback {
    	background-repeat: no-repeat;
    	background-color: #191205;
    }
    #wrapper #topback .logotext {
    	font-size: 12px;
    	color: #FC3;
    	text-align: center;
    	font-weight: bold;
    	display: block;
    	line-height: 90px;
    	font-variant: small-caps;
    	font-family: Arial, Helvetica, sans-serif;
    	padding-top: 3px;
    	padding-left: 3px;
    }
    body {
    	font-size: 100%;
    	margin: 0px;
    	padding: 0px;
    	background-color: #000;
    }
    .designer {
    	display: block;
    	float: left;
    	margin-top: 5px;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: xx-small;
    	color: #FFF;
    }
    
    #wrapper #topback img.logo {
    	float: left;
    	padding-top: 5px;
    	padding-left: 5px;
    }
    
    #wrapper #topback #navbar {
    	background-color: #09F;
    	background-repeat: repeat-y;
    	height: 46px;
    	display: block;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #B19A54;
    	border-right-color: #B19A54;
    	border-bottom-color: #B19A54;
    	border-left-color: #B19A54;
    	overflow: hidden;
    	background-position: right top;
    	color: 42340a;
    }
    #wrapper #topback #navbar ul li {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	background-repeat: repeat-x;
    	display: block;
    	margin: 0px;
    	padding: 0px;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 46px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	background-image: url(../images/navbar.jpg);
    	height: 46px;
    	font-weight: normal;
    }
    #wrapper #topback #navbar ul li.home {
    	width: 102px;
    	height: 46px;
    }
    #wrapper #topback #navbar ul .home a {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 102px;
    	text-decoration: none;
    }
    
    #wrapper #topback #navbar ul .home a:hover {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 102px;
    	text-decoration: none;
    	background-image: url(../images/navbar_overlay.jpg);
    	background-repeat: repeat-x;
    }
    
    #wrapper #topback #navbar ul li.about {
    	width: 101px;
    }
    
    #wrapper #topback #navbar ul .about a {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 101px;
    	text-decoration: none;
    }
    
    
    #wrapper #topback #navbar ul .about a:hover {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 101px;
    	text-decoration: none;
    	background-image: url(../images/navbar_overlay.jpg);
    	background-repeat: repeat-x;
    }
    
    #wrapper #topback #navbar ul li.quote {
    	width: 210px;
    }
    
    #wrapper #topback #navbar ul .quote a {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 210px;
    	text-decoration: none;
    }
    
    #wrapper #topback #navbar ul .quote a:hover {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 210px;
    	text-decoration: none;
    	background-image: url(../images/navbar_overlay.jpg);
    	background-repeat: repeat-x;
    }
    
    
    #wrapper #topback #navbar ul li.showcase {
    	width: 135px;
    }
    
    #wrapper #topback #navbar ul .showcase a {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 135px;
    	text-decoration: none;
    }
    
    #wrapper #topback #navbar ul .showcase a:hover {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 135px;
    	text-decoration: none;
    	background-image: url(../images/navbar_overlay.jpg);
    	background-repeat: repeat-x;
    }
    
    
    #wrapper #topback #navbar ul li.contact {
    	width: 125px;
    }
    
    #wrapper #topback #navbar ul .contact a {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 125px;
    	text-decoration: none;
    }
    
    #wrapper #topback #navbar ul .contact a:hover {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 125px;
    	text-decoration: none;
    	background-image: url(../images/navbar_overlay.jpg);
    	background-repeat: repeat-x;
    }
    
    
    #wrapper #topback #navbar ul li.services {
    	width: 120px;
    }
    
    #wrapper #topback #navbar ul .services a {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 120px;
    	text-decoration: none;
    }
    
    #wrapper #topback #navbar ul .services a:hover {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #B19A54;
    	display: block;
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-variant: small-caps;
    	line-height: 47px;
    	font-family: "Myriad Pro";
    	font-size: 24px;
    	color: #42340a;
    	height: 46px;
    	font-weight: normal;
    	width: 120px;
    	text-decoration: none;
    	background-image: url(../images/navbar_overlay.jpg);
    	background-repeat: repeat-x;
    }
    
    
    
    
    #wrapper #topback #slideshow {
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #C1B281;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #C1B281;
    	border-right-color: #C1B281;
    	border-left-color: #C1B281;
    }
    
    #wrapper #bottomback {
    	background-color: #CCC;
    	background-repeat: repeat;
    	width: 800px;
    	height: 500px;
    }
    #wrapper #bottomback #content {
    	display: block;
    	width: 390px;
    	float: left;
    	padding-right: 5px;
    	padding-left: 5px;
    	overflow: hidden;
    	color: #FFF;
    }
    #wrapper #bottomback #content .welcome_text {
    	font-size: 20px;
    	color: #C1B281;
    }
    
    #wrapper #bottomback #content img.welcome {
    	padding-top: 20px;
    }
    #wrapper #bottomback #content hr.content {
    	background-color: #956F45;
    	height: 1px;
    	color: #8E663C;
    }
    
    hr {
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper #body_content {
    }
    
    
    
    #wrapper #bottomback #content2 {
    	float: right;
    	display: block;
    	width: 320px;
    	color: #FFF;
    	padding-left: 20px;
    	padding-top: 10px;
    	background-color: #9B784D;
    	margin-top: 40px;
    	margin-left: 40px;
    	padding-right: 20px;
    	padding-bottom: 10px;
    	margin-bottom: 40px;
    }
    #wrapper #bottomback #footer {
    	float: right;
    	background-color: #99F;
    	display: block;
    	width: 790px;
    	margin-right: 5px;
    	margin-left: 5px;
    	margin-top: 5px;
    	text-align: center;
    	background-image: url(../images/nav_back.jpg);
    	background-repeat: repeat-x;
    	color: #42340a;
    	font-size: 12px;
    	margin-bottom: 5px;
    }
    ol, ul, li {
    	list-style-type: none;
    	vertical-align: top;
    	margin: 0px;
    	padding: 0px;
    }
    .topheader {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    	color: #FC0;
    	text-align: left;
    }
    #wrapper #body_content {
    	border: thin none #CF0;
    	background-color: #CCC;
    }
    #wrapper #body_content #footer {
    	float: right;
    	background-color: #99F;
    	display: block;
    	width: 790px;
    	margin-right: 5px;
    	margin-left: 5px;
    	margin-top: 5px;
    	text-align: center;
    	background-image: url(../images/nav_back.jpg);
    	background-repeat: repeat-x;
    	color: #42340a;
    	font-size: 12px;
    	margin-bottom: 5px;
    }
    
    #wrapper #body_content #body_text {
    	color: #CCC;
    	background-color: #6CC;
    	float: left;
    	display: block;
    	padding-left: 30px;
    	width: 567px;
    }
    #wrapper #body_content img.side_image {
    	border: 1px solid #0CF;
    	float: left;
    }
    Last edited by Syrehn; 10-27-2009 at 10:18 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You're missing a closing bracket in your css here:

    Code:
    ol, ul, li {
    	list-style-type: none;
    	vertical-align: top;
    	margin: 0px;
    	padding: 0px;
    .topheader {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    	color: #FC0;
    	text-align: left;
    }

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    aah! perfect. thanks for the fresh eyes. i didn't see that the first time around. that solved the problem ^_^

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i just curious. i have a div titled body_content that i'm trying to set a background color to. yet the css does not show this color unless i set the height of the div. i didn't exactly want to have to do this. is there a reason for this?

    i just updated the code in my previous post to reflect what I'm currently working with
    Last edited by Syrehn; 10-27-2009 at 10:18 PM.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It's because (some of) the content in #body_content is floated, so the div doesn't extend down beyond the floated comment.

    A possible solution is to add overflow:auto to #body_content - this will clear the float at the end of the div and the background colour should then be OK.

  • #6
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cool i will try that. my only other question is. I'm planning to use hr to make a single line but every time i have tried to use this and set the height to 1px and set a color say black it looks like it has a drop shadow inside it.. is there a way to get rid of this?

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I'd advise against using hr - it is awkward to style and in particular IE adds additional top and bottom margins on top of any applied margins. It's much easier to use the border css property instead.

  • #8
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the advice about the overflow. it worked like a charm.

    normally i wouldn't use the hr. but i need to be able to set the length of the line i'm trying to create not just the height (or width via the border option) and as far as i'm aware this can't be done with css border?

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Well, don't say I didn't warn you...

    From memory you need something like:

    Code:
    hr{
     width: 50%;
     height: 1px;
     background-color: #A7A669;
     color: #A7A669;
     border:none;
     }
    border:none gets rid of the shadow, I think, and you need to set both background-color and color for browser consistency, IE uses colour, and FF uses background-color.

    Then, IE7 (at least) adds a top and bottom margin of 8px, on top of any margin that's applied, and there's no way to change this. If this is critical then you can address the issue with conditional css to target IE.

    Or, you could use an image instead...

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Syrehn View Post
    thanks for the advice about the overflow. it worked like a charm.

    normally i wouldn't use the hr. but i need to be able to set the length of the line i'm trying to create not just the height (or width via the border option) and as far as i'm aware this can't be done with css border?
    I've got some examples of styling hr at http://nopeople.com/CSS/hr/index.html ...might help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Well, don't say I didn't warn you...

    From memory you need something like:

    Code:
    hr{
     width: 50%;
     height: 1px;
     background-color: #A7A669;
     color: #A7A669;
     border:none;
     }
    border:none gets rid of the shadow, I think, and you need to set both background-color and color for browser consistency, IE uses colour, and FF uses background-color.

    Then, IE7 (at least) adds a top and bottom margin of 8px, on top of any margin that's applied, and there's no way to change this. If this is critical then you can address the issue with conditional css to target IE.

    Or, you could use an image instead...
    cool the border:none seems to resolve the issue i was referring to. i'll give this a try. thanks

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'll just chip in to agree with SB65 about avoiding <hr /> elements. I have wrestled with them before and they really are a bane to cross-browser consistency. I can't think of any occassion where a border would fail you for this. Even if you need to declare a different width than that of the container you still have options.

    But anyway, like SB65 said, if you can find no other way to do it you could use an image (even a 1px by 1px image and then set the height and width as you need to stretch it as needed - if you use a transparent .gif image you can even change the color of this bar whenever you please with background-color styling) and it will be much more controlled and versatile. The only cost for this convenience is a small ding to the old "semantic markup" ego which is small potatoes in this case. It's a rather minor offense.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #13
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    that's a good thought. i will probably look into doing that then. the transparent image suggestion.

    my other question would be on this example i have posted, it's for an about page. how would i set in the css to have the link be different for the navbar_about (same goes if they were to load onto any different page)

    should i just make a different class for that one link per page and apply it?

    i hope that question made sense.

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    That's one method, yes. A popular and more complex, but easier to "set-and-forget" method is to stagger classes. For example, on the home page, set the body to have a class of "home" and on the about page set the body to have a class of "about".

    With that done, set one generic style for the menus as usual and then add a class to each menu item that tells which page it links to. So, the link to the home page would also have a class of "home" and the link to the about page would have a class of "about." Then use something like this to show the current page:

    Code:
    .home #nav .home, .about #nav .about {
    ...whatever style you want to use to show the user that this is the current page...
    }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •