homepage Welcome to WebmasterWorld Guest from 54.227.67.210
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
center positioning new text
reworking CSS footer
thunderwoman




msg:4542590
 4:47 pm on Feb 5, 2013 (gmt 0)

Hi, need to rework the footer on this site:
[snowcityarts.org...]

This is the current CSS code:
#footer {
position: relative;
top: -50px;
left: -7px;
margin: 0 auto;
background: #FFDE7C;
width: 100%;
height: 63px;
vertical-align: middle;

}

#footer p {
font-size: 10px;
margin: 0 0 0 10px;
}

#footer #right-side {
width: 330px;
position: absolute;
right: 10px;
top: 1px;
}

#footer #right-side img {
padding: 2px 10px 0 0;
vertical-align: middle;
}

#footer #left-side {
width: 400px;
height: 100%;
vertical-align: middle;
padding: 15px 0 0 10px;
}
I need to add name and address to the center of the band but no matter what I do, it positions below the left side text.

This is what the footer code currently looks like:
<div id="footer">
<div id="left-side">
Copyright &copy;<?php echo date("Y"); echo " "; bloginfo('name'); ?> <br />
<a href="/contact" style="color:#FF8D00;">Contact Us</a> |<a href="/privacy" style="color:#FF8D00;"> Privacy Policy &amp; Terms</a></p>
</div>
<div id="right-side"><img src="/web_images/footer-national-endowment.jpg" /><img src="/web_images/footer-arts-council.jpg" /><img src="/web_images/footer-city-arts-grants.jpg" /></div>
</div>

ANY help would be greatly appreciated.
dk

 

Fotiman




msg:4542604
 5:43 pm on Feb 5, 2013 (gmt 0)

Welcome to WebmasterWorld!

First, some advice:
1. Avoid using id and class values like "left-side" and "right-side". id and class values should describe the content, not the presentation. Otherwise, if you later decide you want them flipped, you'll have to either:
a. Modify the content in order to change the presentation (changing the id/class values), which you shouldn't need to change if it's just a presentational change.
b. Have an id of "left-side" that styles something to be on the right, which would be confusing.

Something like this would be better:

<div id="footer">
<div class="copyright">Copyright &copy;...</div>
<div class="endowments"><img ...>...</div>
</div>


2. It's not a good idea to style font sizes in px. For accessibility reasons, you should avoid using fixed size units like px and pt. Instead use em or %.

With that said, you could do something like this with your existing code:

<div id="footer">
<div id="left-side">Copyright &copy;...</div>
<div class="vcard">
<span class="fn">NAME HERE</span>
<div class="adr">
<div class="street-address">630 South Hermitage</div>
<div class="extended-address">Suite 103K</div>
<span class="locality">Chicago</span>,
<span class="region">IL</span>
<span class="postal-code">60612-3833</span>
<div class="country-name">U.S.A.</div>
</div>
</div>
<div id="right-side"><img ...>...</div>
</div>


And then in your CSS, something like this:


#footer .vcard {
position: absolute;
left: 400px; /* Modify these to get it where you want it */
top: 14px;
}


Hope that helps.

Side note, I used the Microformats conventions for marking up your name/address (see [microformats.org...]

thunderwoman




msg:4542663
 8:20 pm on Feb 5, 2013 (gmt 0)

Thank you, thank you, thank you. Yeah, I didn't write the original code so I greatly appreciate you helping me with the work around.
dk

Fotiman




msg:4542669
 8:33 pm on Feb 5, 2013 (gmt 0)

You're welcome! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved