|
CSS - Complex Center Align Issue
My first time posting a thread, any help is greatly appreciated.
After inserting an id to the body tag in order to achieve an active page in my image sprite navbar, all of my center aligned content becomes left aligned. Here is the associated css for one link: Code: body {
margin: 0;
text-align: center;
background-color: #000;
}
#wrapper {
margin: 50px auto 0px auto;
text-align: left;
width: 900px;
}
.........
#navbar {
padding: 0;
margin: 0;
list-style: none;
width: 900px;
height: 50px;
overflow: hidden;
}
#navbar li {
float: left;
}
#navbar a {
display: block;
background-image: url(images/main-navbar.gif);
padding-top: 50px;
text-decoration: none;
}
#home {
width: 182px;
}
#home:hover {
background-position: 0px -50px;
}
#home:active {
background-position: 0px 0px;
}
#home li.home a {
background-position: 0px -50px;
}
..........
And the html: Code: <body id="home">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Top Navbar -->
<div id="topnavbar">
<ul id="navbar">
<li class="home"><a id="home">Home</a></li>
<li><a id="events" href="events.html">Events</a></li>
<li><a id="menu" href="menu.html">Menu</a></li>
<li><a id="photos" href="photos.html">Photos</a></li>
<li><a id="contact" href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End Top Navbar -->
.....................................
</div>
<!-- End Wrapper -->
</body>
Navigation bar works perfect but wrapper is not center aligned as it was previously. This is driving me crazy and I'm running out of time! Please Help. -Thanks Similar TutorialsHi all, I have a layout where I have a banner at the top and I want the column below it to align in the center of the page, like this ... How can I do this? Also, can someone tell me how to make the top banner column fill the whole width of the page? Thanks. How? I want to be able to do it from my stylesheet. Thanks guys. My new site can be found at http://www.rockapedia.co.uk/index2.php It works exactly how I want it in Firefox but IE doesn't appear to centre the whole page. Can someone advise please. my entire page's body is contained in a div. the width of this thing doesnt change. i want to keep the page on the center of the browser widow. i tried <div align=center>...... but this aligns the contents of the div and not the div itself. please help I've tried the usual trick of setting the width and margin-left and right to auto but it just doesnt work. If someone could please help with this, that would be great. This is all the code in my css file as of now, i'm using an img tag as my bacground incase people were wondering, so that it would resize to fit the window. the #content block is the one that i'm referring to. css Code: Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; text-align: center; margin-left: auto; margin-right: auto; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #content { width: 800px; height: 600px; top: 0px; left: 0px; position: absolute; z-index: 6000; border: 1px solid #FFFFFF; margin-left: auto; margin-right: auto; } .nav { background-image: url('images/blank.jpg'); background-repeat: no-repeat; } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }
body {
hello i have this style in a css file.... .subheadinginvgreen { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #006666; font-weight: bold; sline-height: .2em; align:center; } somehow when i apply it to a div tag, it does not center the text...e.g. <div class="">test text</div> Ok, you can do this with a table by setting its height and width to 100% and then valigning to middle and centering. However is there a way to do it using CSS? i've heard talk of text-align wrapper hacks, or just plain using tables... i got my main container div to align center by setting it to "margin:auto" but that code doesnt work for the divs inside that div.... can you please help me out... cuz i dont even know what the text-align hack is... i just have heard of it/ Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you. <div style="width:800px"> <div style="width:730px;border:solid 1px red;float:left;"> LOTS OF CONTENT... MORE THAN 1 LINES </div> <div style="width:50px;float:right;border:solid 1px red;"> CLOSE LINK SHOULD BE HERE LATER </div> <div style="clear:both;"></div> </div> I was having some trouble centering my layout in Firefox. It looked fine in IE6 (yes... it's a pain to work in, but it's the nature of the beast when doing internal intranet stuff) when I simply used "text-align: center;" but the layout wouldn't center until I added "text-align: -moz-center;" under that (in the body style). Is this an acceptable way of doing things? Is this a flaw in Firefox or is it more likely that I'm not doing things right? (yes I know I haven't posted code, this was more a high level question of when/if "text-align: -moz-center;" should be used). hi.. I have created a site. I want to put all the content in the center of the screen. so I have written the code: <body> <table align="center"> <tr> <td align="center"> Here goes all the content + menu+ logo+ banner </td> </tr> </table> </body> It is working fine for some pages like home ,aboutus but for every other page content is not in the center. please help me on this. Sorry i can't paste the code for each page so i am giving the link of website renukainstitute.com I am trying to get a row of mixed divs to align horizontally center on the page. I would also like to move the Google Checkout logo up a bit so it is vertically centered relative to the logos on that row. Can you help me do these things? TIA! I've tried doing a lot of things including profanity but no go. The screenshot below is how the page looks now with this css: Code: .row div { height:75px; float:left; } #AuthorizeNetSeal,#googleCheckoutLogo,#paypal { margin-top:25px; }
Code: <div class="row"> <!-- (c) 2005, 2011. Authorize.Net is a registered trademark of CyberSource Corporation --> <div class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="xxxxxxxx";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payment Service</a> </div> <img src="http://www.hotscripts.com/forums/images-manual/small_cc_icon_discover.gif" > <div><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=xxxxxxxxxxx" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0"></A><!-- End Official PayPal Seal --></div> <div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=xxxxxxxxxxxx&loc=en_US&f=png' ></script> <span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxx"></script></span> <img src="http://www.hotscripts.com/forums/images-manual/100satisguar80x79.gif"> </div> Here's what it looks like now: I have some text in a DIV that is updated dynamically with removeChild() and appendChild(). I've tried numerous combinations but I can't seem to get it to work correctly. CSS Code: Original - CSS Code div.chatlayer { position: absolute; top: -50px; left: 50px; border: 1px solid black; -moz-border-radius: 10px; padding: 5px; background-color: white; min-width: 100px; width: auto; text-align: center; visibility: hidden; }
div.chatlayer {
I have used an image file "picture.PNG" like this : <h1><img src="picture.PNG" /></h1> then the css is h1{ text-align: center; margin: 20px; padding: 10px; height: 100px; } But it will not align the image in the center ? Am i going about this the wrong way ? or is it just a syntax error ? Hi when i use this in my css file Code: div.head {
width: 100%;
border: 1px dotted black;
align: center;
}
and place an image within the div using head class. it doesn't put the image in the center of the div. however if on the page i use Code: <div class=head align=center><img src='pic.gif'></div> it does work. can anybody guide me please why the align attribute doesn't take affect from css file? thank you OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 {
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
text-align:center;
}
.footer_header_link{
text-align:center;
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
}
You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks What is the equivalent of <table align="center"> in CSS. I'm moving my page from HTML 4.01 to XHTML 1.0 and the ALIGN attribute of TABLE is not supported in XHTML 1.0. Any help is greatly appreciated. how do i center align table on page with CSS? I am relatively new to using div tags - transitioning from table tag to organize pages. I want the checkboxes to be aligned to the left inside a container that is centered in the body. Currently it is all aligned to the left for some reason. The body tag has no text-align or any other css rule manually set. Code: <div style="display: block;text-align;left;float: center;margin-left: auto;margin-right: auto; border: .1em solid;width:400px; position: relative; clear:both;"> <div style="display: block;text-align;left;float: left;margin-left: auto;margin-right: auto; border: .1em solid; position: relative; clear:both;"> <INPUT TYPE="CHECKBOX" NAME="cartoon">cartoon<BR> <INPUT TYPE="CHECKBOX" NAME="comicstrips">comicstrips<BR> </div> </div> thanks. Firefox: all looks fine except the checkbox container does not appear to be inside the surrounding container - the outer container div appears as a line (it's border) at the top of the inside div with the checkboxes IE8: on a test page with nothing else - appears as Firefox. In my page with several other divs it appears with one container inside another fine, but the main container is not centered. I have looked at several tutorials about float etc but...wits end... thanks. Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. |
|||||||