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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hover and image problems...

    Hello! I'm still in the process of learning CSS, so I get confused pretty quick still. xD
    I'm incredibly close to finishing my assignment, but there are two things I'm really confused about...
    I can't find the answers in my book either. X.x

    So first off, the assignment told me to make the words on the sidebar, when hovered over, have a white background
    (They aren't actually links, they're lists, so I did the whole li:hover thing).
    The white background worked.
    But, for some reason, the white background doesn't stretch out all the way across the box like it needs to.
    Any suggestions for what I can do to make it go all the way?
    THIS is what it should do. Mine doesn't go all the way.

    The other thing that has me stumped is the bottom section of the page.
    I need to add multiple images down there (Using only CSS).
    What I'm given to work with in that area of the HTML is this:

    (div id="ads")
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (/div)


    We aren't allowed to touch the HTML.
    There are six images, so I'm guessing I have to give each of the 'ad' classes an image background or something?
    I'm really confused. Hint please? xD

    Here is a screen shot of what the finished page is suppose to look like.

    Click here for screen shot!

    I have all of that, except I'm missing the images at the bottom.
    ( have the image files I'm just extremely unsure as to how I get them there XD ).
    Last edited by soryko; 05-11-2011 at 12:14 AM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    the hover issue is most likely becuae your LI or UL has padding that is preventing it from looking the way you intended.


    as for the images,
    example:

    Code:
    .ad
    {
    background-image:url('paper.gif');
    width:100px;
    hieght:100px;
    }

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by soryko View Post

    So first off, the assignment told me to make the words on the sidebar, when hovered over, have a white background
    (They aren't actually links, they're lists, so I did the whole li:hover thing).
    The white background worked.
    But, for some reason, the white background doesn't stretch out all the way across the box like it needs to.
    Something like this?
    Code:
    <!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>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #sidebar {
                    width: 200px;
                }
                .sideBarBox {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    border-left: 4px solid black;
                    border-right: 4px solid black;
                    border-top: 4px solid black;
                }
                #sideBarBox1 {
                    background-color: goldenrod;
                }
                #sideBarBox2 {
                    background-color: darksalmon;
                }
                #lastBarBox {
                    background-color: deepskyblue;
                    border-bottom: 4px solid black;
                }
                .sideBarBox dl, .sideBarBox dd  {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                }
                .sideBarBox dt {
                    font-weight: bold;
                    font-size: 1em;
                    margin: 0px 7px 0px 7px;
                    padding: 0px 0px 0px 0px;
                    border-bottom: 1px solid black;
                }
                .sideBarBox dl a {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 7px;
                    text-decoration: none;
                    color: black;
                    font-size: 0.8em;
                }
                .sideBarBox dd{
                    background-color: inherit;
                }
                .sideBarBox dd:hover {
                    background-color: white;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="sidebar">
                <div class="sideBarBox" id="sideBarBox1">
                    <dl>
                        <dt>Species</dt>
                        <dd><a href="wherever">Painted Lady</a></dd>
                        <dd><a href="wherever">Monarch</a></dd>
                        <dd><a href="wherever">Speckled Wood</a></dd>
                        <dd><a href="wherever">Plum Judy</a></dd>
                        <dd><a href="wherever">Royal Marvel</a></dd>
                    </dl>
                </div>
                <div class="sideBarBox" id="sideBarBox2">
                    <dl>
                        <dt>Books</dt>
                        <dd><a href="wherever">Butterflies for Dummies</a></dd>
                        <dd><a href="wherever">World of Butterflies</a></dd>
                        <dd><a href="wherever">Tale of Two Butterflies</a></dd>
                    </dl>
                </div>
                <div class="sideBarBox" id="lastBarBox">
                    <dl>
                        <dt>Movies</dt>
                        <dd><a href="wherever">Butterfly Love</a></dd>
                        <dd><a href="wherever">Cocoon</a></dd>
                    </dl>
                </div>
            </div>
        </body>
    </html>
    Quote Originally Posted by soryko View Post

    The other thing that has me stumped is the bottom section of the page.
    I need to add multiple images down there (Using only CSS).
    What I'm given to work with in that area of the HTML is this:

    (div id="ads")
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (div class="ad")(/div)
    (/div)


    We aren't allowed to touch the HTML.
    There are six images, so I'm guessing I have to give each of the 'ad' classes an image background or something?
    I'm really confused. Hint please? xD
    This doesn't make sense to me. I'm not sure how you are supposed to add images using only CSS and without adding <img>'s directly in the html or dynamically with javascript unless you are talking about background images perhaps .
    Last edited by bullant; 05-11-2011 at 03:06 AM.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by soryko View Post

    So first off, the assignment told me to make the words on the sidebar, when hovered over, have a white background
    (They aren't actually links, they're lists, so I did the whole li:hover thing).
    and without links, maybe something like this.
    Code:
    <!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>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #sidebar {
                    width: 200px;
                }
                .sideBarBox {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    border-left: 4px solid black;
                    border-right: 4px solid black;
                    border-top: 4px solid black;
                }
                #sideBarBox1 {
                    background-color: goldenrod;
                }
                #sideBarBox2 {
                    background-color: darksalmon;
                }
                #lastBarBox {
                    background-color: deepskyblue;
                    border-bottom: 4px solid black;
                }
                .sideBarBox dl, .sideBarBox dd  {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                }
                .sideBarBox dt {
                    font-weight: bold;
                    font-size: 1em;
                    margin: 0px 7px 0px 7px;
                    padding: 0px 0px 0px 0px;
                    border-bottom: 1px solid black;
                }
                .sideBarBox dd {
                    font-size: 0.8em;
                    background-color: inherit;
                    margin: 0px 0px 0px 0px;
                    padding: 1px 0px 1px 7px;
                }
                .sideBarBox dd:hover {
                    background-color: white;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="sidebar">
                <div class="sideBarBox" id="sideBarBox1">
                    <dl>
                        <dt>Species</dt>
                        <dd>Painted Lady</dd>
                        <dd>Monarch</dd>
                        <dd>Speckled Wood</dd>
                        <dd>Plum Judy</dd>
                        <dd>Royal Marvel</dd>
                    </dl>
                </div>
                <div class="sideBarBox" id="sideBarBox2">
                    <dl>
                        <dt>Books</dt>
                        <dd>Butterflies for Dummies</dd>
                        <dd>World of Butterflies</dd>
                        <dd>Tale of Two Butterflies</dd>
                    </dl>
                </div>
                <div class="sideBarBox" id="lastBarBox">
                    <dl>
                        <dt>Movies</dt>
                        <dd>Butterfly Love</dd>
                        <dd>Cocoon</dd>
                    </dl>
                </div>
            </div>
        </body>
    </html>
    Last edited by bullant; 05-11-2011 at 03:07 AM.

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Dan
    That was the kind of thing I was thinking for the images. =)
    What I don't understand is how I'm suppose to target each ad, even though they have the same class name, and give each of them different images, you know? ^^ I thought maybe I could do something like...well, lemme grab part of my CSS.

    Code:
    .favs {
    	background-color: #EE9A49;
     
    }
    .favs  + .favs {
    	background-color: #00E5EE;
    }
    
    .favs  + .favs + .favs {
    	background-color: #BDFCC9;
    }
    
    .favs  + .favs + .favs + .favs {
    	background-color: #33FF33;
    }
    I did that to give the left side bar different colors even though they had the same class name, "favs". Do you think the same kinda thing can be done for images or am I way off? XD

    @bullant
    Woah lotsa code! Thanks for taking the time to do that. =)
    So pretty much what you're doing is taking away the padding? =o
    And about the image thing, I'm assuming they want me to use background images.
    We can't use java script (Plus I haven't learned it yet).
    I suppose I could show you guys my current CSS sheet. xD
    (I didn't realize we could post code)

    Sorry it's kinda messy. owo; I could post the HTML too, they both just have a lot of code so. @.@

    CSS
    Code:
    #container {
    	width: 760px;
    }
    
    
    
    #banner {
    	background: url('butterfly_logo1.jpg') no-repeat top right;
    }
    
    #sidebar1 {
    	border: 4px solid black;
    	border-bottom: none;
    	float: right;
    	width: 200px;
    	background-image: url('bf.jpg');
    	margin-left: 20px;
    	margin-top: -40px;
    }
    
    #sidebar1 h2 {
    	color: red;
    	font-size: 2em;
    	border-bottom: 4px dotted red;
    	padding: 10px 0 0 10px;
    	margin-right: 10px;
    
    }
    
    
    #sidebar1 li {
    	color: #E3CF57;
    	font-size: 11px;
    	font-weight: bold;
    	padding: 10px;
    }
    
    #sidebar2 {
    	border: 4px solid black;
    	float: left;
    	margin-top: 10px;
    	
    	
    }
    
    #sidebar2 h3 {
    	border-top: 4px solid black;
    	border-bottom: 1px solid black;
    	padding: 2px 0 2px 2px;
    }
    
    #sidebar2 h2 {
    	background-color: #754C78;
    	text-transform: uppercase;
    	font-size: 1em;
    }
    
    #sidebar2 ul {
    	font-size: .9em;
    	padding: 5px 10px 5px 5px;
    }
    
    #sidebar2 li:hover {
    	cursor: pointer;
    	background: white;
    	
    }
    
    ul {
    	list-style: none;
    }
    
    h1 {
    	border: 4px solid black;
    	font-size: 3em;
    	color: #9B30FF;
    	letter-spacing: 10px;
    	padding: 0 0 35px 10px;
    	background: url('butterfly_logo2.jpg') no-repeat bottom left;
    }
    
    #main {
    	border: 4px solid black;
    	background-color: #BF5FFF;
    	margin-left: 155px; 
    	margin-right: 155px; 
    	text-align: justify; 
    	width: 376px;
    	margin-top: 10px;
    	padding-bottom: 30px;
    
    	
    }
    
    #main h3 {
    	font-size: 1.5em;
    	font-weight: bold;
    	color: #E3CF57;
    	padding: 10px 0 0 10px;
    
    }
    
    #main p {
    	padding: 10px;
    }
    
    
    
    .favs {
    	background-color: #EE9A49;
     
    }
    .favs  + .favs {
    	background-color: #00E5EE;
    }
    
    .favs  + .favs + .favs {
    	background-color: #BDFCC9;
    }
    
    .favs  + .favs + .favs + .favs {
    	background-color: #33FF33;
    }
    
    
    
    #ads {
    	border: 4px solid black;
    	background-color: #DDA0DD;
    	padding: 50px;
    	clear: both;
    }
    HTML
    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" xml:lang="en" lang="en">
    <!--File Name: index.htm-->
    <!--Date: 05/10/2011-->
    <!--Programmer: Christina Mort-->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <title>Butterflies R Us</title>
    <style type="text/css">
    @import url(init.css);
    @import url(global.css);
    </style>
    </head>
    
    <body>
    
    <div id="container">
    	<div id="banner">
    		<h1>Butterflies R Us</h1>
    	</div>
    
    	<div id="sidebar1">
    		<h2>Fun Facts</h2>
    		<ul>
    			<li>Butterflies range in size from a tiny 1/8 inch to a huge almost 12 inches.</li>
    			<li>Butterflies can see red, green, and yellow.</li>
    			<li>Some people say that when the black bands on the Woolybear caterpillar are wide, a cold winter is coming.</li>
    			<li>The top butterfly flight speed is 12 miles per hour. Some moths can fly 25 miles per hour!</li>
    			<li>Monarch butterflies journey from the Great Lakes to the Gulf of Mexico, a distance of about 2,000 miles, and return to the north again in the spring.</li>
    			<li>Butterflies cannot fly if their body temperature is less than 86 degrees.</li>
    			<li>There are about 24,000 species of butterflies. The moths are even more numerous: about 140,000 species of them were counted all over the world.</li>
    			<li>The Brimstone butterfly (Gonepterix rhamni) has the longest lifetime of the adult butterflies: 9-10 months.</li>
    		</ul>
    	</div><!-- sidebar1 -->
    
    	<div id="sidebar2">
    		<h2>Recommended</h2>
    		<div class="favs">
    			<h3>Species</h3>
    			<ul>
    				<li>Painted Lady</li>
    				<li>Monarch</li>
    				<li>Speckled Wood</li>
    				<li>Plum Judy</li>
    				<li>Royal Marvel</li>
    			</ul>
    		</div>
    		<div class="favs">
    			<h3>Books</h3>
    			<ul>
    				<li>Butterflies for Dummies</li>
    				<li>World of Butterflies</li>
    				<li>Are You a Butterfly?</li>
    				<li>Tale of Two Butterflies</li>
    				<li>Butterfly Erotica</li>
    				<li>The Happy Butterfly</li>
    				<li>No Bad Butterflies</li>
    			</ul>
    		</div>
    		<div class="favs">
    			<h3>Movies</h3>
    			<ul>
    				<li>Butterfly Love</li>
    				<li>Cocoon</li>
    				<li>Madame Butterfly</li>
    				<li>The Butterfly Effect</li>
    				<li>Butterflies Are Free</li>
    				<li>Why Butter Flies</li>
    				<li>Mothra</li>
    			</ul>
    		</div>
    		<div class="favs">
    			<h3>Sports</h3>
    			<ul>
    				<li>Butterfly Baseball</li>
    				<li>Swim the Butterfly</li>
    				<li>Skiing For Butterflies</li>
    			</ul>
    		</div>
    	</div><!-- sidebar2 -->
    
    	<div id="main">
    		<h3>The Life of the Butterfly</h3>
    		<p>Butterflies belong to the insect order Lepidoptera. The word "Lepidoptera" is derived from a Greek word meaning "scale wing." The butterfly wing scales create the wonderful colors and patterns observed in butterfly wings. There are 165,000 species of Lepidoptera worldwide, but of those, only about 24,000 are butterflies!</p>
    		<p>Butterflies range in size from a tiny 1/8 inch to a huge almost 12 inches. Most adult butterflies only live one or two weeks. Adult butterflies use flower nectar as a food source. To obtain nectar, a butterfly's mouth (proboscis) is a long tube it keeps rolled up until ready for use, and is then used as a straw. Butterflies can see red, green, and yellow.</p>
    		<p>The transformation of the frequently ugly or bizarre caterpillar into an elegant butterfly - is truly one of the regularly performed miracles of Nature. All butterflies have "complete metamorphosis." To grow into an adult they go through 4 stages: egg, larva, pupa and adult. Each stage has a different goal - for instance, caterpillars need to eat a lot, and adults need to reproduce. Because the caterpillar and adult eat different kinds of food, this helps the butterflies to better survive. Depending on the species, the life cycle of a butterfly (one generation) may take anywhere from about one month to an entire year.</p>
    	</div><!-- main -->
    
    	<div id="ads">
    		<div class="ad"></div>
    		<div class="ad"></div>
    		<div class="ad"></div>
    		<div class="ad"></div>
    		<div class="ad"></div>
    		<div class="ad"></div>
    	</div>
    </div><!-- container -->
    </body>
    </html>
    Last edited by soryko; 05-11-2011 at 03:04 AM.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by soryko View Post
    @bullant
    Woah lotsa code! Thanks for taking the time to do that. =)
    So pretty much what you're doing is taking away the padding? =o
    And about the image thing, I'm assuming they want me to use background images.
    We can't use java script (Plus I haven't learned it yet).
    I suppose I could show you guys my current CSS sheet. xD
    (I didn't realize we could post code)
    I decided to use a definition list <dl> rather than a <ul> because imo a <dl> is more semantically correct in this case but it really doesn't matter which you use. I then basically reset all the default margins and paddings for the <dl> and its children to suit the layout in your images.

    Regarding the images at the bottom, in a real world application displaying the images as a background, as opposed to using >img>s, is messy imo because you will have to specify the height and width of each div to be the width and height of the image. A background image will not appear if the div has no content and hence 0px width and height.

    One solution, since this is an assignment and you can only use what you are allowed to use, is to give each class "ad" div an id as well and then assign each div a background image.

    example (asuming each image is 100px x 100px):
    Code:
    .ad {
        width: 100px;
        height: 100px;
    }
    
    #ad1 {
        background-image: url('bg_1.jpg');
    }
    
    #ad2 {
        background-image: url('bg_2.jpg');
    }

  • #7
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    I decided to use a definition list <dl> rather than a <ul> because imo a <dl> is more semantically correct in this case but it really doesn't matter which you use. I then basically reset all the default margins and paddings for the <dl> and its children to suit the layout in your images.

    Regarding the images at the bottom, in a real world application displaying the images as a background, as opposed to using >img>s, is messy imo because you will have to specify the height and width of each div to be the width and height of the image. A background image will not appear if the div has no content and hence 0px width and height.

    One solution, since this is an assignment and you can only use what you are allowed to use, is to give each class "ad" div an id as well and then assign each div a background image.

    example (asuming each image is 100px x 100px):
    Code:
    .ad {
        width: 100px;
        height: 100px;
    }
    
    #ad1 {
        background-image: url('bg_1.jpg');
    }
    
    #ad2 {
        background-image: url('bg_2.jpg');
    }
    Oooh alright that makes sense. =o I'll give that a try.

    Ah as great as that would be to add classes, I can't add any id's classes, anything. I can't touch the HTML at all unless I want to be marked down. xD
    We're given the HTML, and have to do all of the CSS, and nothin' but that.

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by soryko View Post
    Ah as great as that would be to add classes, I can't add any id's classes, anything. I can't touch the HTML at all unless I want to be marked down. xD
    We're given the HTML, and have to do all of the CSS, and nothin' but that.
    ok, then you'll have to go along the path you are heading down earlier with adjacent sibling css selectors to access the child divs in the "ads" div. I hadn't thought of that since I very rarely use sibling selectors.

    Also, I assume then you can't use <dl> for your sidebar lists, but the logic I used in the css earlier should be very similar if using <ul> with "heading" elements for each box in the sidebar. Your heading elements are basically the <dt>s in my demo.
    Last edited by bullant; 05-11-2011 at 03:38 AM.


  •  

    Posting Permissions

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