CSS - Icons Next To Text Block

Greetings,

I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done?

Hi All,

I built a website for a friend which is essentially working ok (thanks in large part to help I found on the net). She wanted to add a blog and I decided that this may be a good time to rework the site to a 960px width, partly to make it easier to make everything uniform. (A lot of blog templates are based on the 960)

I have been working on a new homepage based on the old homepage but with things moved around slightly due to the new size.

I also had a very long and convoluted CSS page before as it covered more than one page layout, so I decided to create a new simpler one just for this page.

Basically I took all the elements from the old CSS page that applied to the original homepage and put them in the new one, changing positioning coordinates where appropriate.

I've clearly done something wrong.

While the text links are in the correct places, they're not supposed to be visible (they should be hidden behind the various icons. Those icons should in turn have a rollover effect - If you check the original homepage you can see what I mean.)

The problem is something to do with the #nav1 and #nav2 attributes, but, because I'm a total newb, the original CSS was predominantly created by a couple of helpful souls I found online, but this means that I still don't really understand parts of it (though I am learning)

Please help.


This is my CSS:

Code:

* {
    padding:0;
    margin:0;
    list-style-type:none;
 }
.link1 a:link,.link1 a:visited,.link1 a:active { 
    color:#000000;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
 }
.link1 a:hover { 
    background-color:#000000;
    text-decoration:none;
 }
.link2 a:link,.link2 a:visited,.link2 a:active { 
    color:#00def5;
    font-family:arial,helvetica,sans-serif;
    font-size:100%;
    font-weight:bold;
 }
.link2 a:hover { 
    color:#fff;
    background-color:#286d8c;
    text-decoration: none;
 }
body {
    background-color:#000;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:100%;
    text-align: center;
 }
h1 {
    font:italic 16px tahoma,helvetica,arial,sans-serif;
    color:#fff;
    text-shadow: 0 1px 1px #000;
    text-align: center;
 }
#container1 {
    width:960px;
    height:1186px;
    margin:auto;
    background-image:url(../images/Homepage-Image960.jpg);
 }
#content1 {
    width:430px;
    height:50px;
    padding-top:460px;
    padding-bottom:20px;
    padding-right:5px;
    padding-left:5px;
    border:3px solid transparent;
    margin-top:0px;
    margin-bottom:155px;
    margin-right:0px;
    margin-left:66px;
    text-align:center;
    font-style:italic;
    overflow:auto;
 }
#nav1 {
    margin-bottom:25px;
    overflow:hidden;
 }
#nav1 li {
    margin-bottom:29px;
 }
#li1 {margin-left:697px;}
#li2 {margin-left:631px;}
#li3 {margin-left:565px;}
#li4 {margin-left:499px;}
#li5 {margin-left:433px;}
#li6 {margin-left:367px;}
#li7 {margin-left:36px;}
#li8 {margin-left:93px;}
#li9 {margin-left:93px;}
#li10 {margin-left:98px;}
#li11 {margin-left:320px;}
 }
#nav1 a,#nav2 a { 
    position:relative; 
    display:block;
    height:24px;  
    background-image:url(../images/Homepage-Image960-Invert.jpg);
 } 
#nav1 span,#nav2 span { 
    position:absolute;
    top:0;
    left:0;
    height:24px; 
    z-index:1;
    background-image:url(../images/Homepage-Image960-Invert.jpg);
    cursor:pointer;
 }
#about,#about span {
    width:239px;
    background-position:-697px -691px;
 }
#appts,#appts span {
    width:305px;
    background-position:-631px -740px;
 }
#fees,#fees span {
    width:371px;
    background-position:-565px -789px;
 }
#faq,#faq span {
    width:437px;
    background-position:-499px -838px;
 }
#links,#links span {
    width:513px;
    background-position:-433px -887px;
 }
#blog,#blog span {
    width:579px;
    background-position:-367px -936px;
 }
#about:hover span {
    width:239px;
    background-position:-697px -691px;
 }
#appts:hover span {
    width:305px;
    background-position:-631px -740px;
 }
#fees:hover span {
    width:371px;
    background-position:-565px -789px;
 }
#faq:hover span {
    width:437px;
    background-position:-499px -838px;
 }
#links:hover span {
    width:513px;
    background-position:-433px -887px;
 }
#blog:hover span {
    width:579px;
    background-position:-367px -936px;
 }
#nav2 li {
    float:left;
    display:inline;
 }
#nav2 a {
    height:96px;
 }
#nav2 span { 
    height:96px; 
 }
#bps,#bps span {
    width:131px;
    background-position:-26px -972px;
 }
#hps,#hps span {
    width:131px;
    background-position:-178px -972px;
 }
#scp,#scp span {
    width:131px;
    background-position:-330px -972px;
 }
#pay,#pay span {
    width:131px;
    background-position:-482px -972px;
 }
#email,#email span {
    width:131px;
    background-position:-851px -972px;
 }
#bps:hover span {
    width:131px;
    background-position:-26px -972px;
 }
#hps:hover span {
    width:131px;
    background-position:-178px -972px;
 }
#scp:hover span {
    width:131px;
    background-position:-330px -972px;
 }
#pay:hover span {
    width:131px;
    background-position:-482px -972px;
 }
#email:hover span {
    width:131px;
    background-position:-851px -972px;
 }

And this is the HTML it applies to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Helen Stow - Counselling Psychologist, Therapist, Life Coach.</title>
<meta name="google-site-verification" content="3hCMQLpWU3lVVahmEEWDtI_wRso4VELEwEnMbYvlTBk" >
<meta name="keywords" content="Lincoln, Psychologist, Counselling, Therapy, Therapist, Life Coach, Coaching, Paypal" >
<meta name="description" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." >
<meta name="abstract" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." >
<meta name="author" content="Helen Stow" >
<meta name="copyright" content="April 2011" >
<meta name="contact" content="helenstowcpsychol@btinternet.com" >
<meta name="googlebot" content="all, index, follow, none, noindex, nofollow, noarchive, nosnippet" >
<meta name="revisit" content="2 days" >
<meta name="subject" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." >
<meta name="title" content="<title>Homepage for Counselling Psychologist, Therapist and Life Coach Helen Stow</title>" >
<meta name="seoconsultantsdirectory" content="5" >

<link rel="stylesheet" type="text/css" href="style_homepage.css">

</head>
<body>

<div id="container1">
<div id="content1">
<p><h1>Helen Stow is a Lincoln
  based, Counselling Psychologist, Therapist and Life Coach.</h1></p>
</div>
<div class="link1">
<ul id="nav1">
 <li id="li1"><a id="about" href="http://helenstow-cpsychol.co.uk/about_helen.html" title="About">ABOUT<span></span></a></li>
 <li id="li2"><a id="appts" href="http://helenstow-cpsychol.co.uk/appts_fees.html" title="Appointments" >APPTS<span></span></a></li>
 <li id="li3"><a id="fees" href="http://helenstow-cpsychol.co.uk/fees.html" title="Fees">FEES<span></span></a></li>
 <li id="li4"><a id="faq" href="http://helenstow-cpsychol.co.uk/faqs.html" title="FAQs">FAQs<span></span></a></li>
 <li id="li5"><a id="links" href="http://helenstow-cpsychol.co.uk/links.html" title="Links">LINKS<span></span></a></li>
 <li id="li6"><a id="blog" href="http://helenstow-cpsychol.co.uk/blog/" title="Blog">BLOG<span></span></a></li>
</ul></div>

<div class="link1">
<ul id="nav2">
 <li id="li7"><a id="bps" href="http://www.bps.org.uk/" title="http://www.bps.org.uk/">BPS UK<span></span></a></li>
 <li id="li8"><a id="hps" href="http://www.hpc-uk.org/" title="http://www.hpc-uk.org/">HPC UK<span></span></a></li>
 <li id="li9"><a id="scp" href="http://www.societyforcoachingpsychology.net/" title="http://www.societyforcoachingpsychology.net/">SCP UK<span></span></a></li>
 <li id="li10"><a id="pay" href="http://helenstow-cpsychol.co.uk/paypal_payment.html" title="Paypal Payments">PAY<span></span></a></li>
 <li id="li11"><a id="email" href="mailto:helenstowcpsychol@btinternet.com" title="Email Me">EMAIL ME<span></span></a></li>
</ul></div>

</div><!-- end #container -->

</body>
</html>

I really would be incredibly grateful for all and any help.

My very best wishes,

Tom

hello

I am currently working on a website with a template from mambo open source.

Unfortunately there are some icons built in the css that are rather ugly to look at.

Would any one of you know how to hide them?

thank you and regards,

schnauzer

I can't post URLs here, so please copy/paste the URL below.
Look at the "email to friend" and "post to facebook" links on this page (url) proofs.gentryfoto.com/p/rswedding/1281copy27 (/url). My goal is to:

1. underline the text only, not the icon.
2. center the icons over the large image on the screen
3. Have it look the same in IE and FF. Currently, the icons are in the same row in IE, but are breaking into multiple lines in FF. I want them all on one line.

What am I doing wrong? I am doing all kinds of experiments but can't get this right.

Thanks.

What I need to do is align a series of icons to the center, but there are a few complications, they must continue to be centered with any combination of 4-5 different(same sized) icons. For example icon 3 and 4, when displayed must be centered together, and at the same time, if icon 1 and 5 are being displayed they must also be centered correctly.

First of all they are appearing on 2 seperate lines, and I seem to be unable to put them on the same line without using float:left on one.

But I can't just float:left image one to put them on the same line, as image one may not be displayed in the next instance(with a different combination of images). And I don't think I can set a width on the div and center it because there will not be the same number of icons displayed in each instance(could be 1-5, 14x14 icons). My guess is that some % values can make this work but I'm just not sure how.

I was going to post an illustration of what I mean but I guess it's blocked...

Any help would be greatly appreciated. Thanks.