SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Quick Question

  1. #1
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick Question

    I have a DIV that is currently using an ID to display its formatting.
    How can I set all the links within the DIV to display a certain way (and their hover's to be different) without applying a class to each link and without using a simple:
    a {... }
    in the CSS (so that not every link on the page is applied).
    ?

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you ask for is called a descendant selector. Pretty easy to use...

    div#id a {
    /* style rules */
    }

    They can also be tiered...

    div#whatever b a {
    text-decoration: none;
    }

    <div id="whatever">
    <b><a href="page.htm">Link</a></b>
    <a href="page.htm">Link</a>
    </div>
    Last edited by beetle; Oct 19, 2002 at 13:00.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot.

    Two more questions.

    On: www.syscompsjax.com
    I made the left menu using CSS (not tables). Should I convert the top part to CSS instead of tables as well? If so, how would I do that to still let it "stretch" to the browser width by repeating the middle image?

    On the same page, how could I change the height of the left menu to fill the content area (I set it to 100% but then it started at the top (where the image is)

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <head>
    <title>System Components Corporation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    html, body {
    	height:100%;
    	background-color:#FFF;
    	color: #000;
    	margin: 0px;
    	}
    div#header {
    	position:absolute;
    	width: 100%;
    	height: 102px;
    	z-index: 10;
    	background-image: url(images/middlestretch.jpg);
    	}
    img#topleft {
    	position:absolute;
    	}
    img#topright {
    	position:absolute;
    	right: 0px;
    	}
    #menu {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 150px;
    	padding: 112px 10px 0px 0px;
    	text-align: right;
    	font: 10pt Verdana, sans-serif;
    	height: 100%;
    	border-left:0px;
    	border-right:1px dotted blue;
    	border-top:1px solid #ccccff;
    	border-bottom:1px dotted blue;
    	background-color: #90BADE;
    	}
    #main {
    	position: absolute;
    	top: 102px;
    	left: 150px;
    	padding: 10px;
    	}
    
    </style>
    </head>
    <body>
    
    <div id="header">
    	<img id="topleft" src="images/topleft.jpg" width="368" height="102" />
    	<img id="topright" src="images/topright.jpg" width="385" height="102" />
    </div>
    
    <div id="menu">
    	<a href="/">Home</a><br />
    	<a href="/login.asp">Login</a><br />
    	<a href="/contact.asp">Contact</a><br />
    </div>
    
    <div id="main">
    	<i>Coming Soon!</i>
    </div>
    
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you so much... I get it... you started the left menu at the top but put the padding so that the text didn't start until past the image.

    I just added the:
    Code:
    #menu a {
    		color: white;
    		text-decoration: none;
    		}
    #menu a:hover {
    		color: white;
    		text-decoration: underline;
    		}
    to make the links work.

    Thanks a lot.

    Phil

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NP. Sometimes with CSS you have to be a little be abstract with your thinking to get it done right. I just finished my XHTML/CSS valid layout for my new site, and it took quite a while to get it 100%. But, it works in IE5, IE6, NS6.2, NS7, Moz1.0, Moz1.1, Opera (I think) and it validates as XHTML1.0

    Whew...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I'm really excited about that. I think I get it now (less questions for you guys). My HTML is so clean now...
    Last edited by fillup07; Oct 19, 2002 at 16:36.

  8. #8
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I thought it was doing exactly what I wanted... but when I looked at a longer page (that required a scroll bar), the left menu stops right before you have to scroll down (I guess thats what the 100% is, lol). Is there any way to make it go all the way down to the bottom of the page? (I could do it easily by using tables, but I'm trying to avoid that)

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes...uhhh. Here's a little experiment for you...

    Redo the page so that the menu is inside the DIV that has the content...that way it will 'stretch' with the lenght of the content....

    Let me know how it goes...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works! I just had to put the menu inside the main content, and change the CSS on the main content to start at 0, with padding on the top and left to keep the text position, and set the height to 100.

    Thanks


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
  •