...

View Full Version : need some help arranging divs and with links



smaashthemac
10-23-2011, 11:50 PM
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:

http://oi51.tinypic.com/iye9g0.jpg

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:

http://oi55.tinypic.com/6ofwat.jpg

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:


#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!

sunfighter
10-24-2011, 04:42 PM
This is probably too late, but you never posted the html.

But this does work:

<div id="navigation">
<a class="iphone">iphone</a>
<a class="skype">skype</a>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum