|
HTML - Html Centering
Hello there.
I'm not very fluent in HTML, but I have a working knowledge. The template from my website (http://unearthlypodcast.co.cc) was one that was in the HTML editor Pagebreeze. As I'm editing, it is the same as it is in the above link, except there is a <div> tag at the bottom of the right sidebar that adds a feed to my Twitter account. However, when I add the feed the length of the sidebar is extended, so the main content in the centre is moved down to the middle, leaving an unsightly gap at the top. I tried changing HTML Code: <table cellspacing="6" cellpadding="0" width="100%" align="center" border=0><tbody> to HTML Code: <table cellspacing="6" cellpadding="0" width="100%" align="top" border=0><tbody> but it hasn't done anything. How do I move the content up? Thanks, James Similar Tutorialsresolvd. thx for the help I'm trying to create a button image in HTML. and I would like the the button to be 100 pixels left of the center of the page and 150 pixels from the top. I need it to work with different resolutions. This is what I tried which doesn't work. <img src="Banner/edv_banner.png" style="position:absoulte; top:130px; center:10;"> so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> Take a look at this image. What I want to do is make the background black (which I know how to do), but to add in the black header plus the gray box--same width. What I'm trying to do is my forum is fixed width (in the center, not expanded on browser) and I want to do the same to a new non-forum site starting from scratch. I know some HTML but not a lot. I'm working on an HTML version of my companies website (it's currently in flash.) I'm happy with the design right now but I can'ty seem to find a way to center all of the contents of the page. Any help would be very much appreciated. http://www.ars-guardian.com/htmlhome.html Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance. Code: <div width="100%"> <div align = "left" style="width:200px;float:left;background-color:#ff0000;"> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> </div> <div align="center" style="background-color:#00ff00;"> <div style="width: 500px;background-color:#0000ff;"> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered </p> </div> </div> Hi, Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to. In some versions of IE its sits to the far left. Here is the page: http://www.ironworksstudio.co.uk/ And here is the CSS: Code: *{
margin: 0;
padding: 0;
}
body{
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 15px;
color: #000000;
background-color:#000000;
}
#container {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 700px;
background-color:#000000;
}
p{
padding-top: 10px;
font-size: 13px;
line-height: 18px;
}
#header {
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
height: 100px;
width:700px;
background-color:#000000;
padding: 0 0 10px 0;
}
#menu ul{
margin-left:0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
background-color:#FFFFFF;
}
#menu li{
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #000000;
list-style-type: none;
width: 84px;
height: 20px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom; 3px;
margin-right: 2px;
margin-left: 2px;
float: left;
border: 1px solid;
}
#menu li:hover {
color: #ffffff;
background-color: #333333;
}
#menu li a {
text-decoration: none;
color: #ffffff;
}
#menu li a:hover {
color: #ffffff;
}
#footer {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 700px;
margin-right: auto;
margin-left: auto;
clear: both;
background-color:#000;
color: #FFF;
}
#top_image {
margin-bottom:20px;
clear: left;
background-color:#000000;
}
#menu {
float: left;
width: 700px;
margin-bottom:10px;
background-color:#000000;
}
#two_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
line-height:1.4;
margin-top: 10px;
margin-bottom: 50px;
float: left;
width: 700px;
text-align: left;
background-color:#000;
}
#l_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#FFF;
line-height:1.4;
margin-top: 10px;
margin-right: 30px;
margin-bottom: 50px;
float: left;
width: 335px;
text-align: left;
background-color:#000;
}
#l_column a{color:999999;}
#r_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#fff;
line-height:1.4;
margin-top: 23px;
float: right;
width: 335px;
background-color:#000;
padding: 0 0 10px 0;
}
.left {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: left;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
background-color:#000000;
}
.right {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: right;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
margin-top:12px;
background-color:#000000;
}
th {
font-weight: bold;
font-size:13px;
color: #000000;
background-color:#FFFFFF;
padding: 5px;
}
td {
padding:5px;
}
tr {
color:#FFFFFF;
}
.rowstyle1 {
border-bottom:1px dotted;
}
#gallery {
background-color:#000;
width: 680px;
padding-left: 0;
}
#gallery ul { list-style: none;
margin-left: 0;
}
#gallery li {
padding-left:1.2px;
}
#gallery ul li { display: inline;
padding-right: 0;
}
#gallery ul img {
border: 0;
border-width: 0;
}
#gallery ul a:hover img {
border: 0 solid;
}
#gallery ul a:hover { color: #cccccc; }
hr {color:#333333;
border-style:normal;
padding: 0 0 0 0;
margin: 0 0 10 0;
}
h2 {color:#ffffff;}
</style>
I would like to center three button images under an image. In the old day we would put our text into the image and create a two-row table, with the top row having one cell three columns wide and the bottom row having three cells. I have tried making my image with three uls with background images under them, but of course I can't force the full image to show since my content doesn't take up the full space. I am currently putting things in a table, just to make the full image show, but I feel like I'm still doing things old-school. Is there a newer, spiffier way to do this? table { width:780px; font-size:125%; padding:0; overflow:hidden; } td { width:254px; height:60px; background-repeat:no-repeat; background-position:top left; background-image:url(images/navbackground2.png); padding:0 0 0 20px; } Also my images won't justify. The space between the cells seems predetermined no matter what I futz with and there's a space to the right of the last image that I don't want. Finally, is there a way to put all three background statements into one code? (I know that's a CSS question, but I don't want to cross-post.) Elisabeth I am having difficulty centering pages for Firefox and Chrome. Please view the source code of http://www.alicm.com. It centers fine in all versions of IE. Definitely need a little help. I am not very experienced, so any "before and after" pasting of coding would be very much appreciated. Thanks in advance. http://insomnia.eternal-glory.org/2.0/index.php I'm trying to imitate a Mac computer, Tiger. Looks great in FF/Safari, but in IE7, the dock refuses to center. I have: Code: body {
text-align:center;}
in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not? Help, please? Doctype is Strict, and I have margin-left/-right set to auto. Thanks in advance, Michele hello there can someone please give some advice / fixes for centering my website in IE and Chrome etc I programmed it in Dreamweaver and previewed it in Safari and Firefox where it looks lovely and central, however people have told me that in IE it is centered to the left. I can't figure out how to fix it. http://www.formconstant.co.uk any help would be greatly appreciated john Hi. I can't remember how to center a table to the center of the page. Here is my current code: HTML Code: <table style="width: 66%" > <tr> <td class="style4"> <a href="http://au.youtube.com/user/bombardieraddict123" style="color:white" class="style5"> Bombardieraddict123</a></td> </tr> <tr> <td style="background-color:white">More Information Will go here</td> </tr> </table> I want it to be centered in the middlof thepage. How can I do that? thanks Hi everyone, I couldn't really find a thread with this question... If there's already one with a solution to the problem, a link to the thread would be prefered over an answer here. Basically, my problem is that a layout I made doesn't center properly in IE. I have an y-repeated background in the center of the page, and on top a table. In Firefox everything looks fine and dandy, but in IE the table is a few pixels off to the left causing an error in the alignment. http://lastsong.sadil.net/ I don't really know how to fix it - I like it coded with tables better than with divs, so recoding it into divs won't do. (I am aware it doesn't validate on 6 points for those who care, but I can live with that for now...) If anybody has a solution to this problem, I'd love to hear it. Thanks! I am trying to center some text in a table, but horizontally only. It centers vertically inside a cell in a table when i use either of these tags. HTML Code: <h2 style="text-align:center"> <center>text</center> How do i fix this? I clarified what i want in the attatched picture. OK, just put my new site up etc. I'm just finishing it with images etc for my friends: http://bparch.freehostia.com/ When you look at the images on the front page, is there a way of centering them? Here is the CSS for the gallery: Code: ul#gallery {
margin:0 auto;
padding:0;
list-style-type:none;
width:90%;
font-family: verdana, arial, helvetica, sans-serif;
text-align: center;
}
ul#gallery li {
float: left;
margin:5px;
text-align: center;
}
ul#gallery li p {
text-align: center;
margin:5px 0;
}
Here is the CSS for the other parts: Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:#ccccff;
}
h1 {
margin:0px 0px 0px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#666666;
text-align: center;
}
h2 {
font-size:22px;
text-align: center;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {
color:#00009c;}
a:visited {
color:#00009c;}
a:hover {
color:#ccccff ;
background-color:#FFFFFF;
border-style:dashed;
border-color:black;
border-width:1px 0px
}
.headings {
color: #000000;
text-decoration: underline;
font-size: 20px;
font-weight: bold;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 14px 14px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;
text-align: center;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
background-color:#eee;
border:1px dashed #666666;
}
#Menu {
text-align: center;
position:absolute;
top:110px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #666666;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
Thanks -- Chris Here is the code i have for the only(and first) page of the website. HTML Code: <!DOCTYPE html> <html> <body background="piginsun.png"> <div id="container" style="width:1903px"> <div align="center"> <div id="header" style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;text-align:center"> <h1 style="margin-bottom:0;"> </div> <div style="width:340px;text-align:left;align:center;"> <a href="http://www.w3schools.com"><img width="868" height="90" src="mcad.png" alt="html.html" style="border:0;margin-top:0px;"></a> <div id="menu" style="height:315px;width:120px;float:left;"> <b><a target="_top" href="html.html">Home</a></br></br> <b><a target="_top" href="html_forums.asp">Server Forums</a></br></br> <b><a target="_top" href="html_updates.asp">Server Updates</a></br></br> <b><a target="_top" href="html_videos.asp">Server Videos</a></br></br> <b><a target="_top" href="html_staff.asp">Server Staff</a></br></br><b><a target="_top" href="html_pics.asp">Server Pictures</a></br></br> <b><a target="_top" href="html_donate.asp">Donations</a></br><b></br><a target="_top" href="html_contact.asp">Contact Us</a> </div> <div id="content" style="height:940px;width:1200px;text-align:center;"> <font size=40px;font color="#7373FF">Random</font><font size=40px;font color="#CB59E8">Craft</font></br> <i>A Minecraft Server</i> </br> <div id="content" style="height:598px;width:1200px;text-align:center;"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <div id="footer" style="clear:both;text-align:center;"> Copyright ®RandomCraft Server</div> </div> </body> </html> I need some help centering the whole thing. It looks good now but is off to the side, i need it centered. If someone could show me how to do that, that would be awesome. Thanks |
|||||||