|
CSS - Div Not Centered And Doesn't Start New Line
Hi,
This is my code Code: <style type="text/css">
#leftcolumn {
float: left;
width: 10%;
text-align: center;
margin: 30px auto;
}
#rightcolumn {
float: left;
width: 25%;
text-align: center;
margin: 30px auto;
}
</style>
<div id="leftcolumn">
<p>Left 1</p>
</div>
<div id="rightcolumn">
<p>Right 1</p>
</div>
<div id="leftcolumn">
<p>Left 2</p>
</div>
<div id="rightcolumn">
<p>Right 2</p>
</div>
I expected it to be centered and both left and right 1 and 2 to be on the same line each left and right I want to start on a new line, although currently they are both on the same line, how can I do this Thanks Similar TutorialsUsiing ONLY CSS, is it possible to "justify" a block of text and have the last line centered? For example: Code:
Fig. 13. Scatter diagram comparing two subspecies of
Nyctimene albiventer. One individual of specimens thought
to be intergrades is as large as specimens of Nyctimene a.
bougainville, whereas the other three intergrades are about
the same size as specimens of N. a. minor.
CSS seems to only offer one or the other text-align:justify; or text-align:center; Thanks. http://i.domaindlx.com/wheelofgod/kingjames.asp The navigation bar isn't lining up I use Mozilla Firefox and the 2 images "examples" and "articles" are not in the column no matter how hard I tried. This might be a CSS problem. This is what I have: Code: /* Layout Stylesheet */
body {
margin:10px;
background:#FFFFFF;
color: #333333;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:1050px;
margin:auto;
}
#hdr {
height:60px;
background:#9ACD32;
color: #333333;
}
#bar {
height:25px;
background:#688E23;
color: #FFFFFF;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #FFCC80;
color: #FFFF33;
width:650px;
padding:0;
}
#l-col {
font: Verdana;
float:left;
background:#9ACD32;
color: #333333;
width:120px;
}
#cont {
width:800px;
background:#FFFFFF;
font: verdana;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:25px;
background:#9ACD32;
color: #FFFFFF;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Code: /* Presentation Stylesheet */
h3, p {
margin:0;
padding:15px;
}
h4 {
margin:0;
padding: 5px 0;
}
p:first-letter {
font-size: 80%;
font-weight: bold;
color:blue;
}
/*<![CDATA[*/a.piclink:active{color:red;background-color:grey;text-decoration:none}
a.piclink:visited{color:blue;background-color:grey;text-decoration:none}
a.piclink:hover{color:#B36B00;background-color:white;text-decoration:none}/*]]>*/
Exactly that question. I got this menu from a website. 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" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... 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 Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! 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 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; } 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. 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? How can i accomplish this with CSS? See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) 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> 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. 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. Hi, there. Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF : #full-image { float: right; width: 380px; height: 380px; text-align: center; line-height: 0px; background-color: #F0F5F7; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #full-image img { margin-top: expression(( 380 - this.height ) / 2); } That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance. 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"> <!--*******page content start*******--> <div class="top">top</div> <div class="main1">main1</div> <div class="main2">main2</div> <div class="main3">main3</div> <!--*******page content end*******--> </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; } 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! |
|||||||