CSS - Centering Issue
Hi,
I'm trying to get my head around this issue, i want the have the main content section centred along with the header and footer but also want an extra bit to the right of the main section for ads (if page is wide enough otherwise they are cut off). How could this be done? Ive attached an image which might help. Thanks, Mike Similar Tutorialshttp: //www. cathistevenson.com/bookcoverexpress_mockup/ I want to bring the cover samples over to the left, closer to the blue bar on the left. However, when I do that, the "click thumbnails to enlarge" and "click for more covers" links are then off-centered. How do I keep them centered above the covers, no matter where I position the cover samples? Here's a recent site that I've done: http://landscapeexpertsal.com/ I've tested in IE 7 & 6....& 5.5 (using the multiple IE's installer.) I've also tested in Firefox....as well as safari on my MAC... Everywhere I look, it centers..... This customer still says that the site isn't centered on his machine....all I know is that his PC is "3 years old" according to the sales person.... My container class and body tag are as follows: body { background-image: url(images/BG.jpg); background-repeat: repeat-x; background-color: #cccc66; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-align: center; } .container { width: 900px; position: relative; margin: 0 auto; text-align: left; background-image: url(images/middle.jpg); background-repeat: repeat-y; } ?????? Seems to be a recurring theme today. I'm trying to skin osCommerce to match the site. If you go into the front page of the store you'll see the problem. All content is correctly centered in FF, but not in IE. I tried putting a "wrapper" div around all the content (starts immediately after body tag and ends immediately before endbody tag), and set its margins to 0 auto, but no luck. Code: #wrapper { width: 760px; margin: 0 auto; } Any ideas? Here's the link: http://www.EarthArmy.com/index.php I'm trying to center the tshirts/products in the header, but to no avail, they keep aligning to the left. Any ideas? Thanks. I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color. here is the css for header and the text code. Code: #topsection { background: #EAEAEA url(images/png_logo.gif) no-repeat right center; height: 90px; } span.htext { font-color: #3300CC; font-size: 30px; text-decoration: none; letter-spacing: 1px; text-align: left middle; } anyone know how to fix this. Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Good day to you all, I'm working on a pop up css box. My problem is that I can't make it to be centered. Here is my code : PHP Code: echo "<a onmouseover=\"this.style.cursor='pointer'\" onfocus=\"this.blur();\" onclick=\"document.getElementById('$namess').style.display = 'block' \" >\r"; echo "<span><img src=\"http://ponder.peuplies.info/V_0-1/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" /></span></a>\r"; echo "<div id=\"$namess\" align=\"center\" style='display: none; position: absolute; margin: auto; margin-left: auto; margin-right: auto; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; color:#000000; font-size: 12px; '>\r"; echo "This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.\r"; echo "<img src=\"http://test.com/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" />"; echo "<br />\r"; echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('$namess').style.display = 'none' \" ><span style=\"text-decoration: underline; color:#000000;\">Close</span></a></div>\r"; echo "</div>\r"; Can somebody help me ? Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso Hi all, this is my CSS: Code: body { font-family:arial; font-size:14px; background-color:#FFFFFF; margin: 0; padding: 0; } .mainbar { position:absolute; height:100%; width:600px; display:block; background-color:#F2F2F2; top:0px; bottom:0px; z-index:0; border-top: 0px solid #000000; border-right: 1px solid #000000; border-bottom: 0px solid #000000; border-left: 1px solid #000000; } .contact { position:absolute; display:block; height:40px; width:600px; background-color:#FFFFFF; top:80%; bottom:0px; z-index:0; border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } .logo { position:absolute; display:block; height:200px; width:600px; background-color:#CCCCCC; top:10%; bottom:10%; border:1px solid #000000; z-index:2; } .logoborder { border-top: 0px solid #000000; border-right: 1px solid #000000; border-bottom: 0px solid #000000; border-left: 1px solid #000000; } Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated! Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!! Thanks! Jack. Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly. It's very basic. You have blank page. No wrappers no nothing. Then 1 div, holds, 1 ul, with 20 li. The div has specified width. How to center the ul inside the div? I need the UL to NOT have specified width since I'll be adding more items to it over time. Thanks! Hi there, I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE. Any ideas? This is my code: PHP Code: #top_bar{ background-image: url('img/top_bar.jpg'); height: 54px; font-family: arial; font-size: 14px; color: #ffffff; width: 100%; } #top_bar_content{ padding: 18px 0 10px 0px; width: 870px; margin: 0 auto; position: relative; } im trying to center this div but im not to sure on how to do it Code: <style type="text/css"> div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; } </style> </head> <body> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> Hi, This is my first css only layout and I am trying to centre the navigation. But it wont. Any suggestions? http://www.wnv2.com/v9.htm <<link here CSS File: Code: /* CSS Document */ body { background-image:url(bg.jpg); background-repeat: repeat-x; background-color:#65B240; margin:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; } /*---------- Divs ------------*/ #wrapper { margin: 0px; padding: 0px; width: 600px; } #header { margin: 0px; padding: 0px; width: 600px; height: 85px; background-image:url(top.jpg); } #navigation { margin: auto; padding-left: 30px; padding-right: 30px; padding-top: 0px; padding-bottom: 0px; width: 540px; height: 25px; text-align:center; } #navigation ul { margin: 0px; padding: 0px; list-style-type: none; background-color:#DDDDDD; } #navigation ul { display: block; float:left; } #navigation li, #navigation li a { color:#59933E; font-weight:bold; letter-spacing:1px; height: 25px; display: block; margin: 0 2 0 2; float:left; } #navigation .left_nav { width: 22px; height: 25px; display: block; background-image:url(nav_left.jpg); } #navigation .right_nav { width: 22px; height: 25px; display: block; background-image:url(nav_right.jpg); } #middle{ background-image:url(middle.jpg); background-repeat: repeat-y; width:600px; } #navigation .spacer { width: 5px; height: 5px; display: block; background-image:url(nav_spacer.gif); } #contentswrapper { margin: 0px; padding: 5 55 5 55; text-align: left; width: 490px; } #bottom { height:90px; width:600px; background-image:url(bottom.jpg); } HTML: View Cource Thanks How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake. |