...

View Full Version : alignment and hover!!??



jhaime
06-06-2012, 08:56 PM
Hey guys/gals,

I'm a product designer currently prototyping an iMac accessory and don't have the necessary funds to support an awesome, accompanying website, so decided I'd build it myself (naive maybe). Anyway, a week in and coming to terms with textmate, etc etc, been through relevant mark-up and css3 tutorials however I'm some serious issues with alignment of my footer paragraphs and other basic stuff. So any push in th right direction is seriously appreciated.

I've only bootstrapped the page as I wanted to sort out the footer and links first as image prototypes and videos aren't done yet.

Markup.


<body>

<div id="page">
<div id="background-wrap">
<img id="still-background" src="img/home/still-background.jpg" width="1500" height="660">
</div>
</div>


<br>

<div id="footer-wrap">
<ul class="nav-bottom">
<li><a href="/">home</a></li>
<li><a href="about">about</a></li>
<li><a href="help">help</a></li>
<li><a href="jobs">jobs</a></li>
<li><a href="contact">contact</a></li>
<li><a target="_blank" class="share-sift" id="share-sift-facebook" href="http://www.facebook.com/sift"></a></li>
<li><a target="_blank" class="share-sift" id="share-sift-twitter" href="http://www.twitter.com/sift"></a></li>
</ul>

<br>
</div>

<div>
<p>Copyright 2012 *****, inc. Made with love, exclusively in the United Kingdom by <a target="_blank" id="aulter" href="http://www.aulter.com">link</a>.</p>
<p>***** brand and our logo are trademarks of *****, ltd. <a href="/terms">Terms</a> <a href="/privacy">Policy</a></p>
</div>
</body>

CSS


#page {
background: #eee;
}

#footer-wrap {
float:left;
width:100%;
font-weight: bold;
background:#fff;
overflow:hidden;
position:relative;
}

#footer-wrap ul {
font-style: serif;
clear:left;
float:left;
list-style:none;
margin:0;
padding:5px;
position:relative;
left:50%;
text-align:center;
}

#footer-wrap ul li {
font-style: serif;
display:block;
float:left;
list-style:none;
margin:0;
padding:10px;
position:relative;
right:50%;
}

#footer-wrap ul li a {
font-style: serif;
display:block;
margin:10px 0 0 40px;
padding:20px 30px;
background:#ddd;
border: bold;
color:#000;
text-decoration:none;
line-height:1.3em;


p {
margin-left: auto;
margin-right: auto;
width: 60%;
}



Now, that CSS isn't even allowing me to enter background or anything for the hover class which I've excluded there... which was #footer-wrap ul li a:hover {

and I can't seem to centre the paragraphs.. tried giving them id's and classes, that didn't work.. I'm assuming I've screwed up my selectors or something..

anyway, any help is massively appreciated and I apologise for the simplicity of the problem, my first week and first page..

jhaime
06-07-2012, 01:53 PM
buuump :(

sunfighter
06-07-2012, 03:39 PM
In your CSS the "#footer-wrap ul li a " does not have a closing } so the paragraph style does not register.
Use text-align:center; NOT margin-left: auto; margin-right: auto;

This may be your problem with the #footer-wrap ul li a:hover , but can't guess at that because you didn't include it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum