SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member be21's Avatar
    Join Date
    Nov 2005
    Location
    Vernon, BC, Canada
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Selectors problems

    Basically i am having trouble with selectors in my code. All the links on my page are displaying properties from other selectors even when they already have a selector of their own.

    My foot navigation is displaying the properties from my logo link, like the background, width, height etc.

    Can anyone point out where I went wrong.

    the HTML:
    HTML Code:
    	<style>@import url("css/lmw-screen2.css");</style>
          
    	<link rel="stylesheet" type="text/css" href="" media="print" />
    	
    	<title>LMW Photography | The Portfolio Of Lee Watkins</title>
    </head>
    
    <body id="lmw-portfolio">
    
    <div id="lmw-nav-bg">&nbsp;</div>
    <div id="lmw-main-nav">
    	<ul id="lmw-navlist">
    		<li id="portrait"><a href="index2.html">&nbsp;</a></li>
    		<li id="landscape"><a href="index2.html">&nbsp;</a></li>
    		<li id="abstract"><a href="index2.html">&nbsp;</a></li>
    		<li id="portfolio"><a href="index2.html">&nbsp;</a></li>
    		<li id="aboutme"><a href="index2.html">&nbsp;</a></li>
    		<li id="contact"><a href="index2.html">&nbsp;</a></li>
    	</ul>
    </div>
    
    <div id="lmw-logo-container">
    	<div id="lmw-logo-link"><a href="index2.html">&nbsp;</a></div>
    </div>
    
    <div id="lmw-container">
    	<h1 class="lmw-content-head"><em>LMW, Your Okanagan inspired photographer.</em><b>Do your eyes a favour, peer through LMW's digital lense</b></h1>
    	
    	<div id="lmw-main-content">&nbsp;
    	</div>
    	
    	<div id="lmw-footer">
    		<ul id="lmw-foot-nav">
    			<li><a href="index2.html">Portrait</a></li>
    			<li><a href="index2.html">Landscape</a></li>
    			<li><a href="index2.html">Abstract</a></li>
    			<li><a href="index2.html">Portfolio</a></li>
    			<li><a href="index2.html">About Me</a></li>
    			<li><a href="index2.html">Contact</a></li>
    		</ul>
    	</div>
    </div>
    
    </body>
    
    </html>
    the CSS:
    Code:
    @charset "utf-8";
    
    #lmw-portrait {background: #000 url(../images/lmw-babyfingers.jpg) top center no-repeat;}
    #lmw-landscape {background: #000 url(../images/lmw-bg-foothills.jpg) top center no-repeat;}
    #lmw-abstract {background: #000 url(../images/lmw-bg-notrus.jpg) top center no-repeat;}
    #lmw-portfolio {background: #000 url(../images/lmw-gravestatue.jpg) top center no-repeat;}
    #lmw-aboutme {background: #000 url(../images/lmw-bg-about.jpg) top center no-repeat;}
    #lmw-contact {background: #000 url(../images/lmw-bg-landscape.jpg) top center no-repeat;}
    
    
    
    /*---------------------------------------------- Main Nav ----------------------------------------------*/
    #lmw-nav-bg {
    width:100&#37;;
    height:35px;
    background:#000;
    margin:10px 0 0 0;
    	
    filter:alpha(opacity=65);
    -moz-opacity:0.65;
    -khtml-opacity: 0.65;
    opacity: 0.65;
    }
    
    #lmw-main-nav {
    width:850px;
    margin:0 auto;
    text-align:left;
    position:relative;
    height:35px;
    top:-35px;
    }
    
    #lmw-main-nav ul {
    text-align: left;
    list-style-type: none;
    }
    
    #lmw-main-nav ul li {float: left;}
    
    /*---------------------------------- Nav Portriat ----------------------------------*/
    #portrait a, a:visited {
    height: 35px;
    width: 83px;
    border:none;
    display:block;
    margin:0 5px 0 0;
    text-decoration: none;
    background: url(../images/lmw-portrait.gif) 0 0 no-repeat;
    }
    
    #portrait a:hover {
    margin:-5px 5px 0 0;
    border-top:solid 5px #66ffcc;
    background-position: -83px 0;
    }
    /*---------------------------------- Nav Landscape ---------------------------------*/
    #landscape a, a:visited {
    height: 35px;
    width: 102px;
    border:none;
    display:block;
    margin:0 5px 0 0;
    text-decoration: none;
    background: url(../images/lmw-landscape.gif) 0 0 no-repeat;
    }
    
    #landscape a:hover {
    margin:-5px 5px 0 0;
    border-top:solid 5px #66ffcc;
    background-position: -102px 0;
    }
    /*---------------------------------- Nav Abstract ----------------------------------*/
    #abstract a, a:visited {
    height: 35px;
    width: 91px;
    border:none;
    display:block;
    margin:0 5px 0 0;
    text-decoration: none;
    background: url(../images/lmw-abstract.gif) 0 0 no-repeat;
    }
    
    #abstract a:hover {
    margin:-5px 5px 0 0;
    border-top:solid 5px #66ffcc;
    background-position: -91px 0;
    }
    /*---------------------------------- Nav Portfolio ---------------------------------*/
    #portfolio a, a:visited {
    height: 35px;
    width: 89px;
    border:none;
    display:block;
    margin:0 5px 0 0;
    text-decoration: none;
    background: url(../images/lmw-portfolio.gif) 0 0 no-repeat;
    }
    
    #portfolio a:hover {
    margin:-5px 5px 0 0;
    border-top:solid 5px #66ffcc;
    background-position: -89px 0;
    }
    /*---------------------------------- Nav About Me ----------------------------------*/
    #aboutme a, a:visited {
    height: 35px;
    width: 97px;
    border:none;
    display:block;
    margin:0 5px 0 0;
    text-decoration: none;
    background: url(../images/lmw-about.gif) 0 0 no-repeat;
    }
    
    #aboutme a:hover {
    margin:-5px 5px 0 0;
    border-top:solid 5px #66ffcc;
    background-position: -97px 0;
    }
    /*----------------------------------- Nav Contact ----------------------------------*/
    #contact a, a:visited {
    height: 35px;
    width: 82px;
    border:none;
    display:block;
    margin:0 5px 0 0;
    text-decoration: none;
    background: url(../images/lmw-contact.gif) 0 0 no-repeat;
    }
    
    #contact a:hover {
    margin:-5px 5px 0 0;
    border-top:solid 5px #66ffcc;
    background-position: -82px 0;
    }
    /*-------------------------------------------- Main Nav End --------------------------------------------*/
    
    /*---------------------------------------------- lmw Logo ----------------------------------------------*/
    #lmw-logo-container {
    width:850px;
    height:158px;
    margin:0 auto;
    text-align:left;	
    }
    
    #lmw-logo-link {
    width:246px;
    height:154px;
    }
    
    #lmw-logo-link a:link, a:visited {
    width:246px;
    height:154px;
    display:block;
    border-bottom: solid 4px #ccc;
    background: url(../images/lmw-logo.png) 0 0 no-repeat;
    }
    
    #lmw-logo-link a:hover {
    background-position: -246px 0;
    }
    /*-------------------------------------------- lmw Logo End --------------------------------------------*/
    
    /*-------------------------------------------- lmw Container -------------------------------------------*/
    #lmw-container {
    width:850px;
    margin:55px auto 0 auto;
    text-align:left;
    }
    /*------------------------------------------ lmw Container End -----------------------------------------*/
    
    /*-------------------------------------------- lmw Main Head -------------------------------------------*/
    .lmw-content-head em {
    color:#333;
    padding:5px 5px;
    margin:0 10px 0 0;
    background:#66ffcc;
    }
    
    .lmw-content-head b {
    color:#fff;
    float:left;
    padding:5px 5px;
    margin:-3px 10px 0 10px;
    font-size:17px;
    font-weight:normal;
    font-style:italic;
    background:#464646;
    }
    
    .lmw-content-head {
    width:500px;
    height:65px;
    background:#fff;
    padding:15px 15px 10px 15px;
    border-bottom:solid 4px #ccc;
    
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    }
    /*------------------------------------------ lmw Main Head End -----------------------------------------*/
    
    /*--------------------------------------------- lmw Footer ---------------------------------------------*/
    #lmw-footer {
    	width:850px;
    }
    #lmw-foot-nav {list-style-type:none;}
    #lmw-foot-nav ul li {float:left;}
    
    #lmw-foot-nav li {
    	height:35px;
    	border:none;
    	background:none;
    	text-decoration:none;
    }
    #lmw-foot-nav a, a:visited {
    	text-decoration:none;
    	color:#fff;
    }
    /*------------------------------------------- lmw Footer End -------------------------------------------*/

  2. #2
    SitePoint Zealot smadeira's Avatar
    Join Date
    Oct 2003
    Location
    Pennsylvania
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the site live somehwere that we can play with it?
    Scott

  3. #3
    SitePoint Evangelist
    Join Date
    May 2006
    Location
    Denmark
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You call it <li id="portrait">, but your selector is #lmw-portrait for instance.

  4. #4
    SitePoint Member be21's Avatar
    Join Date
    Nov 2005
    Location
    Vernon, BC, Canada
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have it live anywhere sorry.

    #lmw-portrait is a selector for the body tag only applying to the background of the page.

    #portrait a, a:visited is only used for the navigation list.


Tags for this Thread

Bookmarks

Posting Permissions

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