Learn VBA & Macros in 1 Week!

CSS - Darn Thing Wont Get Centered :(

Full Excel VBA Course - Beginner to Expert

Darn Thing Wont Get Centered :(	View Content

Full Excel VBA Course - Beginner to Expert

Darn Sidebar Navigation Bullets!

Similar Tutorials

View Content

I've no idea why my sidebar continues to display unordered list bullets even though I'm pretty sure all parent CSS uses "list-style-none".

I've spent the last 2 hours trying different things, will someone please help this newbie out?

you can see the bulleted sidebar at this link:

www.dalcon.com/business

Ie Doing Its Thing

Similar Tutorials

View Content

and that thing is of course to cause trouble becasue it can't stay compliant, now as much as I would love to just dismiss IE entirly and focus on happier browsers like Firefox and Opera, It seems that the normal human world loves their IE 6 and even IE 5 so I have this
Here now you'll note that if you are looking through both browsers that a php script tacks on an additional stylesheet according to the browser (assuming the script is working) but they both use the same base layout, now with the exception of mabye.. two lines the css is right now basically identical... So I am left to ask. What is it in the base css (layout.css) that is causing all the rucus, I know that IE can't read the display: hidden; but I figured it could atleast read some of the other stuff, any help on the debug? thanks fullphaser

2 Ways To Do The Same Thing Which Is Better?

Similar Tutorials

View Content

Say my page has this layout

<div class="newsheader"><a class="white" href="...">devshed.com</a></div>

and my sheet looks like this,

div.newsheader { font-family: Verdana;
color: white;
background-color: #EFBE56;
}
a:link {color: #C6930A;}
a.white: link {
font-family:Verdana;
color: white;
}

Couldn't the same be accomplished by

div.newsheader a {color: white}
and
<div class="newsheader"><a href="...">Devshed.com</a></div>

Notice I don't have to declare a class for the anchor tag. If I have a lot of these to change it could be a big time saver. But, which is better for CSS compatability, code readability, and possible future changes. Maybe its all about my personal preferences.

Thanks

Need A Roll Over Type Thing

Similar Tutorials

View Content

Hey there I like making websites and for this one website i want to make it look really good and then buy a domain name when I'm done, but I can't figure the code in css to make an image appear at 500px down and 50px to the left when my mouse is over a link . If someone could help me with this I would be so happy! Thank you
and have a nice day

Such Thing As 100% Width Horizontal Navbar With Only Css?

Similar Tutorials

View Content

new to the world of css and now working on a shell for a website I'm doing.

here is the css
PHP Code:
html, body{
margin:0;
padding:0;
}

h1, h2, h3, h4, h5, h6 {
color: #bf9060;
}

img {
    padding-bottom: 2px;
}

#pagewidth{
width:100%;
  min-width: 500px;

}

#header{
height:88px;
width:100%;
background:#ccae8f;
background-image:
url("/images/pillowback3.jpg");
background-repeat: repeat-x;
}
#navcontainer
{
margin: 0;
padding: 0;
height: 25px;
width: 100%;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #ffffff;
width: 125px;
height: 18px;
border: 1px solid #ccae8f;
padding: 0;
margin: 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #806c59;
}

#navcontainer a:active
{
background: #806c59;
color: #ffffff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}

and the list
PHP Code:
<div id="navcontainer">
            <ul id="navlist">
            <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li>
            <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li>
            <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li>
            <li><a href="/products/index.php" title="See our full line of Products">Products</a></li>
            <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li>
            <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li>
            </ul>
            </div>

as you can see i'm using px to style the size of the elements, but that isn't very liquid

Background Color Breaks Ie. Weirdest Thing I've Ever Seen

Similar Tutorials

View Content

This is, without a doubt, the weirdest think I've ever seen when dealing with IE and CSS. Have a look at this webpage in IE and Firefox:

http://atlbloggers.net

Looks fine in FF, no? But in IE, there's this giant white 'box' floating over the content in my #textarea tag. As near as I can tell, its being caused by this CSS:

Code:

#pageContainer
{
	border-color: #418ade;
	background-color: #fff;
}

specifically, the background-color item. Comment that out, the site looks fine in IE. Add it back in, it breaks in IE again. I'd like to be able to set the bg color on the pagContainer tag cause I want to set a different background color for the body...

Has anyone ever seen anything like this? Is it something I'm doing wrong? Please, HELP!!!!!

Ul Li Tags That Float Left - How Do I Center The Whole Thing In A Div?

Similar Tutorials

View Content

Hi all,

http://www.jaysonsgroup.com/zpip2/z.html
- please see the bottom four links (home, glossary, contact, credits)

The HTML is as follows:

Code:

	<div class="centerlinks">

		<table align='center'>
		<tr>
		<td>
                     <ul>
                     <li><a href='#'>Home</a></li>
                     <li><a href='#'>Glossary</a></li>
                     <li><a href='#'>Contact</a></li>
                     <li><a href='#'>Credits</a></li>
                     </ul>
	         </td>
		</tr>
		</table>

	</div>

The CSS:

Code:

	.centerlinks {
		float: left;
		width: 550px;
		text-align: center;
	}

	.centerlinks ul {
		list-style-type: none;
	}

	.centerlinks li {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
	}

As you can see, what I want is a simple UL list that is horizontal, plain text, and centers within the 550px div that surrounds it , even if I add a fifth <li> link in the future.

On Internet Explorer, the <table align='center'> hacks fixes the problem. But it doesn't work on Firefox. Any ideas how I can center this?

(I know I can use padding-left or margin-left but then this isnt a good solution when more menu items are added to that list)

Thanks in advance!!

Centered Div

Similar Tutorials

View Content

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

My Menu Is Not Centered :(

Similar Tutorials

View Content

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?

Centered Search Box

Similar Tutorials

View Content

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.

Un Centered In Firefox

Similar Tutorials

View Content

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;
}

Img Perfectly Centered In Css Box

Similar Tutorials

View Content

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>

Centered 100% Height

Similar Tutorials

View Content

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

Div Left Of Centered Div?

Similar Tutorials

View Content

How can i accomplish this with CSS?

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

(replace x with t)

Centered Horizontal Navigation

Similar Tutorials

View Content

Hi everyone,

I am trying to make a horizontal navigation near the top of my website. But I can't seem to make it center but AND horizontal, i've only been able to center it but not horizontal... or have it horizontal but not center.

This is my CSS so far.

Quote:
ul#nav li {
display:inline;
margin: 0 auto;
width: 100%;
text-align:center;
}

ul#nav li a {
display:block;
height:48px;
width:113px;
background: transparent url(images/nav.png);
margin: 0 auto;
text-indent:-9009px;
}
ul#nav li a:hover {background-position:0 -48px}

ul#nav li#photos a {
width:139px;
margin: 0 auto;
background-position:-113px 0;
}
ul#nav li#photos a:hover {background-position:-113px -48px}

My home link and photo link are currently centered and on top of each other in a vertical fashion with this code.

Please help!

My <ul> Is Stuck Centered In A World Of Css

Similar Tutorials

View Content

Struggling to get my <ul> to display itself on the left side of my sidebar navigation. I just want it over maybe 40 pixels to the left. I'm not sure why the ul is aligning itself in the center.

I tried floating the elements left, but the ul is stuck centered. I tried adjust margins/padding but all that does is truncate the text to another line. I set absolute position and got the list to move all the way to the left, but it broke the flow of the page and the list ran over top of the headers. Any thoughts?

All the CSS structures are imbedded in the STYLE section of the index file.
http://www.mgan.net/work/10-20-04/

Bonus question: Anyone know why in internet explorer when you run the mouse of my top navi-bar the footer graphic for the news section disappears?

Centered Page Not Performing In Ie

Similar Tutorials

View Content

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.

Centered, Wrapping Grid - Help

Similar Tutorials

View Content

Hello,

I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

Here is an example of what I want:
URL

...and when I add new content:
URL

I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

This is where I have gotten so far-
http://jimtierneyart.com/test/test.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
        
<html>
	<head>
		<style type="text/css"> 
		
		body {
			margin : auto;
		}
		
		.wrapper {
			width: 900px;
			border: 1px solid #bbbbbb;
			margin: 50 auto;
		}
		
		.item {
			
			line-height: 223;
    		text-align: center;
    		float: left;
			width: 223px;
			height: 223px;
			border: 1px solid #dddddd;
			background: #EBEBEB;
		}
		
		img.a {
			margin: auto; 
			max-width:120px;  
			border:0; 
			max-height:175px; 
		}
		
		

</style>

		
		
		
	</head>

	<body>
		<div class="wrapper">

			header

			<BR>
			<BR>




			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
				<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>


		</div>
	</body>
</html>

I need 2 things to happen:

1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
2. the thumbnails must be vertically centered within the child containers.

Can anyone point me in the right direction?
I would really appreciate some help.

Css Page Centered Template

Similar Tutorials

View Content

Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height.

Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser.

page
----
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container">

<div class="top">top</div>
<div class="main1">main1</div>
<div class="main2">main2</div>
<div class="main3">main3</div>

</div></td></tr></tbody></table></body></html>

CSS Sheet
----------
table {
width: 100%;
height: 100%;
}
td {
text-align: center;
vertical-align: top;
}
div.container {
position: relative;
margin: 0 auto;
width: 780px;
text-align: left;
height: 100%;
}
div.top {
position: absolute;
top: -3px;
left: 0px;
width: 780px;
height: 203px;
background-color: #CCC;
}
div.main1 {
position: absolute;
top: 200px;
left: 0px;
width: 200px;
height: 100%;
background-color: #BBB;
}
div.main2 {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 100%;
background-color: #DDD;
}
div.main3 {
position: absolute;
top: 200px;
left: 400px;
width: 380px;
height: 100%;
background-color: #AAA;
}

Help! Vertical Centered Content.

Similar Tutorials

View Content

Hello I hope this isnt a stupid questions but here goes.

I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600

Thoughts?

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> 
#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="horizon">
<div id="wrapper">
  Line 1<br />
    Line 2<br />
  Line 3<br />
  Line 4
  
</div>
</div>
</body>
</html>