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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Arrow need some help arranging divs and with links

    I'm kind of a newbie at all of this, so if the answers to my questions end up being really simple, sorry! I'm working on a 6 page site for my first web design class project, due tomorrow, and I'm stuck on a few things.

    First is this:



    where i simply cannot figure out how to bring the right text div up, to sit next to the other.

    My second problem is this:



    I'm trying to have each link color correspond to each page's color. "iphone" this particular screen cap should be the same blue as "revolution". but "netflix" is the only one that's cooperating... the other links should be dark gray with a light gray hover.

    here's my code:

    Code:
    #iphoneHeader{
    	height: 20px;
    	padding-top: 50px;
    	padding-bottom: 70px;
    	border-bottom: 1px solid #959595;
    	margin-bottom: 85px;
    }
    
    #navigation{
    	float: right;
    	padding-top: 55px;
    	font-size: 16px;
    	font-family: Lucida Sans Unicode,Verdana,sans-serif;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    }
    
    #navigation a.iphone{ text-decoration: none;}
    #navigation a.iphone:link { color: #5D6DB4; }
    #navigation a.iphone:visited { color: #5D6DB4; }
    #navigation a.iphone:hover { color: #5D6DB4; }
    #navigation a.iphone:active { color: #5D6DB4; }
    
    #navigation a.facebook{ text-decoration: none;}
    #navigation a.facebook:link { color: #555555; }
    #navigation a.facebook:visited { color: #555555; }
    #navigation a.facebook:hover { color: #959595; }
    #navigation a.facebook:active { color: #959595; }
    
    #navigation a.amazon{ text-decoration: none;}
    #navigation a.amazon:link { color: #555555; }
    #navigation a.amazon:visited { color: #555555; }
    #navigation a.amazon:hover { color: #959595; }
    #navigation a.amazon:active { color: #959595; }
    
    #navigation a.skype{ text-decoration: none;}
    #navigation a.skype:link { color: #555555; }
    #navigation a.skype:visited { color: #555555; }
    #navigation a.skype:hover { color: #959595; }
    #navigation a.skype:active { color: #959595; }
    
    #navigation a.netflix{ text-decoration: none;}
    #navigation a.netflix:link { color: #555555; }
    #navigation a.netflix:visited { color: #555555; }
    #navigation a.netflix:hover { color: #959595; }
    #navigation a.netflix:active { color: #959595; }
    
    #iphoneContent{
    	width: 875px;
    	height: 430px;
    }
    
    #leftIphoneIllustration{
    	margin-left: 50px;
    	margin-right: 60px;
    	background: url('images/iphone_illus.png') transparent no-repeat 0 0;
    	width: 225px;
    	height: 350px;
    }
    
    #rightIphoneContent{
    	float: right;
    	width: 545px;
    	height: 350px;
    	margin-right: 50px;
    }
    
    .iphoneTitleText{
    	color: #5D6DB4;
    	font-size: 36px;
    	line-height: 110%;
    }
    as far as the links are concerned, i've pasted the really long set of links code in each page's css section, which seems redundant, and doesn't even work, so i'm looking for a better way for the link color to change on each page.

    i hope this makes sense; and i hope someone can help! thanks!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,761
    Thanks
    23
    Thanked 546 Times in 545 Posts
    This is probably too late, but you never posted the html.

    But this does work:
    Code:
    <div id="navigation">
    <a class="iphone">iphone</a>
    <a class="skype">skype</a>
    </div>
    Last edited by sunfighter; 10-24-2011 at 04:49 PM.


  •  

    Posting Permissions

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