CSS - Keeping A Series Of Icons Centered

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

I have a site that I am working on:

test dot choupique dot com

The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why?

Thanks

I have a set of background images that work well in giving the impression that there is a solid page on screen. However, as you can see here , once I start introducing structure it falls apart and I'd really () like to know why. (The CSS validates OK and I've given temporary borders to the divs to help show where on the screen they should appear).

http://www.lightblu.com/

(It speaks for itself)

how come on my test page, http://www.lightblu.com/test.php works fine (ie. the menu is centered correctly), but not on the homepage? What did I do wrong?

Ok,

I give up... can't figure this one out...
the navbar seems to be centered in IE but not in Firefox.

www.moksha.net/index.html

I notice that it doesn't seem to matter whether I am inside the header div or not.

The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential.

Thanks!

#header
{
padding: 1em;
margin: 0px;
text-align:center;
width:100%;
align: center;
display:block;
}
#navbar {
color:#FFCC33;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
margin:0 auto;
}
#navbar ul {
clear:left;
text-align: center;
margin: 0 auto;
list-style-type: none;
text-indent: 0;
width: 600px;
background-color:#996633;}
#navbar li {
/* float:left;
width:80px; */
padding-right: 1em;
height: 3em;
line-height:3em;
font-size: 20px;
display: inline;
list-style-type: none;
text-align: center;
margin:0;
}
#navbar a {
color:#FF9933;
text-decoration: none;
}
#navbar a:hover {
color:#FFCC33;
}

Hey guys,

I know that this is a well covered topic. but I am trying to get a container div to sit centered and 100% of the page.

my css reads:

* {
margin:0;
padding: 0;
}

html, body {
height: 100%;
}

#container {
position: relative;
width: 900px;
height: 100%;
margin: 0 auto;
background: url("imgs/backgroundmain.gif");
}

It works fine for the required browsers until the contents of the page goes beyond the size of the screen then the background stops. it literally stops at 100% of window rather than 100% of content. Any ideas???

James MacLeod

Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual.

I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide.

My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten.

Code:

<div class="header">
	<div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div>
	<div class="rightAlign" id="topRight">
		<jsp:include page="AccountLinks.jsp"></jsp:include>
	</div><br />
	<form id="searchForm" action="/SearchServlet">
		<input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input>
	</form>
</div>

and the relevant css is

Code:

div.header{
	width: 1000px;
	margin: 0 auto;
	min-height: 60px;
	display: block;
	text-align:center;
}

div.leftAlign{
	 float: left;
	 text-align: left;	
}

div.rightAlign{
	float: right;
	text-align: right;
}

#searchForm{
 vertical-align: top;
    margin: 0;
    line-height: 1;
    outline:0;
}

#searchText{
	background:url(/img/searchText.gif) no-repeat top center;
	padding:0px;
	margin:0;
	display:inline;
	border:0;
	width:159px;
	height: 31px;
}

#searchButton {
	background:url(/img/searchButton.gif) no-repeat top center;
	padding-top:0px;
	margin:0;
	display:inline;
	border:0;
	width:42px;
	vertical-align: top;
    line-height: 1;
	height:31px;
}

Any help that you can provide would be greatly appreciated.

Thank you very much.

As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS.
The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way.

#bottom_center {
margin: 0px;
padding: 0px;
background: #ccc;
width: 470px;
height: 90px;
border-style: ridge;
}
---- then in the body ----
<div align="center">
<div id="bottom_center">
<img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc."
width="470" height="90">
</div>
</div>

How can i accomplish this with CSS?

See image he
hxxp://g.imagehost.org/0398/css.png

(replace x with t)

Hi, I have started to get to grips with CSS but I am currently just playing - I have not designed any serious pages but am about to. I wondered if it is possible (I am sure it is but I cannot work out how) to use a h1 tag in the middle of a paragraph <p> without making it start a new line. Does anyone know of a method to force the text within the h1 tag to just flow within the sentance?

For example if the above block was a paragraph the word CSS on the first line could be included within a h1 tag but it would remain on the line as it currently is (however in this case it would be forced to appear as capital letters, but I can take care of that part myself).

Thanks for your time

Hi the
I wonder if there is a way to keep spiders away from certain sections of my web pages? For example, keep them away from the nav_bar, but index the rest of the html page?

Someone told me it could be done by CSS but I've tried to search for it without any luck.

Any suggestions would be greatly appreciated.

Sincerely,
Ponch

Hi

How do I get a <div> to stay at the bottom, constantly, even if a layer above it gets resized so that its longer than the page in the browser.

I have one <div> and then the footer <div> but the upper <div> gets resized to about 1000px and over laps the footer <div>, how do I get the footer <div> to keep at the bottom ?

This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<style type="text/css">
#quikcontainer
{
position:         absolute;
top:              120px;
	left:             30px;
	height:           650px;
	width: 143px;
background: white;
border:           orange 2px solid;
margin: 0 auto;
padding-top:    20px;
font-family:      Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;

}

ul#quiklist
{
text-align: center;
color:     #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}

ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}

ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}

#quikcontainer>ul#quiklist li a { width: auto; }


ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top:    2px solid;
}
</style>

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<div id="quikcontainer">
<p><strong>Quick Links</strong></p>

<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>

<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>

<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>

<li><a href="#">Aaa A-A Aaaa</a></li>

<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>

</body>
</html>

Hello everyone. I would like to thank anyone who attempts to solve this in advance.

I have a css page here . If you need me to post the code let me know, but I temporarily have embedded styles so I figured you could view source easily enough. The entire content of the page centers just fine in Firefox2, but unfortunately is aligned to the left in IE7 on PC. Does anyone know why this might be?

Thanks again for your expertise and time,
phpkata.

having trouble centering a web site

what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div

check out my example the "center1" div should appear inside the top light gray box but it dose not!
http://www.thehopeandanchor.net/nypd/layertest.htm

the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>redeem file</title>
<style type="text/css">
<!--
div#center1 {
/*position:absolute;*/
margin:0px auto;
top:10px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#center2 {
position:absolute;
left: 50%;
margin-left: -300px;
top:80px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#insidebit {
position:absolute;
left:50px; top:10px;
width:64px;
height:26px;
background-color: #eeeeee;
}
-->
</style>
</head>
<body>

<div id="center1">
<div id="insidebit">center1</div>
</div>

<div id="center2">
<div id="insidebit">center2</div>
</div>

</body>
</html>