|
CSS - Left Margin In Centered Page
Hi guys. I am building a website where some pages are long (and the slidebar appears) and others are short (so the slidebar doesnt appear)
The problem is that the page is centered and when the slidebar appears, the page moves a bit to the left. I could set the left-margin to X pixels but then it wont work as expected with different resolutions. Is there anyway to solve this problem? Similar TutorialsI always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
How can i accomplish this with CSS? See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. My site is here... css here... I have two .gif files I want to use in the header... the main one (header.gif) should be centered (as it is now)... while the other (header_spread.gif) should repeat on the left and right sides of the centered header.gif... The .gif files are transparent, so I can't use the spread as the entire background... I'd also like to refrain from making header.gif (don't care about header_spread.gif) a background or making the background of header.gif white, and have it in an <img> tag instead so I can dynamically change my header with the seasons... (though if background is the only way, I could have a header class for each season and have my script change it, so that solution would technically work too, but create a larger css file.) I need help formatting this properly... I can get the spread to work as a background for the entire div header, but that messes up the look of the center gif... Thanks Bryan hello genius people... please help this designer move more toward css after years of tables and images... I have a prob with ie 5 and 6 [not sure on 7] showing the content of a scrolling div outside of a containing frame. http://jodihelmer.com/portfolio.html and http://jodihelmer.com/journal.html the content in the scrolling frame shows up outside of the centered content. one possible fix I came up with is to increase the size of the divs at the edge and give them a background color. this seems to work. but, I also need to hide the content to thetop and left of the frame as well. is there a way to keep these divs within the centered wrapper while allowing them to expand to go to the edge of the browser window's relative size? or is there a better way to do this altogether? thanks so much. s Thanks for taking the time to read my question. I have a container that is floated left. I've put a margin-left: 80px; on it. the 80px seems to be quite a bit bigger in IE(6) than in FF. The page works well in FF but craps out in IE. I can't figure out what's going on here. In my body{} I have margin: 0px; and padding: 0px; Any ideas? Brad Greetings! Please, take a look at http://147.32.113.143/biotest/Sourc...SectionId=10000. Almost everything is ok, except one thing: in left menu (TOC), margin-left is not applied on <a> elements in <li> (menu items - red bordered) in IE 6.0. In FF, everything is OK, but what's much more interesting, in IE 5.5 it works too. So the only problematic browser stays IE 6.0. Could anybody tell me please why this happens? So far, margin-rules worked well for me, even in IE. P.S.: The discussed rule is in Web_Toc.css Hey there I have a small IE6 problem where my "boxR" margin-left positioned div is moving more away from left than expected but works perfectly fine in FF. 3px more to the left to be exact. This is happening to my "boxL" div also (but only 1px more to the left than expected) CSS: Code: .bigBox {background-color:#eeeeee; width:800px; clear:both;}
.leftCol {width:240px; float:left; position:relative; display:block; background-color:tan;}
.rightCol {width:560px; float:left; position:relative; display:block; background-color:lightBlue;}
.boxL {width:230px; margin-left:7px; margin-top:5px; position:relative; display:block;}
.boxR {width:550px; margin-left:3px; margin-top:5px; position:relative; display:block;}
HTML: Code: <table class="bigBox" border="0" cellpadding="0" cellspacing="0"> <tr><td valign="top"> <div class="leftCol"> <div class="boxL">Content Goes Here...</div> </div> <div class="rightCol"> <div class="boxR">Content Goes Here...</div> </div> </td></tr> </table> Pictures of problem: FF: IE6: The 2 blue boxes are "boxL" and boxR" The background color "Tan" and "lightBlue" is the "leftCol" and rightCol" divs See how the "boxL" div has moved left 1px more and the boxR has moved 3px more to the left in IE6... how can i fix this? Thanks heaps Can't figure out why. I validated with W3 and everything was fine. I want p. leftmargin to be left indented 332px. Its just a single column site, should be easy...... This is the CSS Code: p. leftmargin {
margin-left: 332px;
}
#content {
text-align:left;
float:right;
width: 713px;
padding: 0px 17px 20px 30px;
background-color: #B11626;
height: 1100px;
}
this is the HTML Code: <div id='content'> <p class="leftmargin"> <h2> COMING SOON </h2> </p> </div> page can also be found he http://www.kdpatton.com/cosmopolis/program.htm Hi, I have this attributes left:504px; to align my picture but margin:0 0 0 387px; can be use as well. Whats the best thing to use? Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here mactyler.com/NEWIDF/ Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7. iphonedevforums.com/news/index.php I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions. I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me... I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem.... check it out.. http://centralfloridacomputerrepair.com/test.php the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page. the css is here http://centralfloridacomputerrepair.com/style.css (what you are looking at is div#sidetext) and the css/xhtml validates http://validator.w3.org/check?verbo...ir.com/test.php http://jigsaw.w3.org/css-validator/...ir.com/test.php I just can't figure it out... I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either... it gets to the right place horizontally.. but not vertically... I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way. any ideas? edit: I've been here a whole year... and this is my first post. HA. No worries, made an obvious error. Please delete this =) ( sorry for waste of moderators time ) The following script has been validated and is working fine (not in IE/Win): body { margin-top:5px; margin-bottom:5px; padding:0; background:#ccffff; } a { text-decoration: none; } a:link { color: #0000ff; } a:visited { color: #33cc00; } t{line-height:36px;} #wrap { width:613px; left:50%; margin-left:-336px; background:#ffffff; margin-left:auto; margin-right:auto; } #sidebar { position:absolute; float:left; width:150px; border: 1px solid #000033; padding:15px; background:#ffffff; height:650px; z-index:1; } #main { float:right; width:390px; border: 1px solid #000033; overflow: auto; font-family: "Times New Roman", serif; font-size:13px; text-align:left; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; background:#ffffff; background-repeat:no-repeat; background-position:66% 540px; background-image:url(smalljester.jpg); height:750px; overflow:auto; z-index:2; } I'm still trying to figure out why it works. In particular, there are two margin-left tags in the #wrap div, one is -336 px and the other auto. I seem to remember this had to do with centering the layout (the negative margin) but how is it valid with two margin-left properties? TIA [I'd post the html from the dozen or so pages this is working on but there are too many urls.] I've a menu bar that's a horizontally displayed list (i.e. set up with the following values: ul{ margin-top:5px; margin-bottom:5px; margin-left:0px; } li.inline { display:inline; padding-left:5px; padding-right:5px; border-left:1px solid #fff; } Contained in the following code: <div id="mainNav"> <UL> <li class="first"><a href="../about/index.html">About</a></li> <li class="inline"><a href="../contact/index.html">Contact</a></li> <li class="inline"><a href="../services/index.html">Services</a></li> <li class="inline"><a href="index.html">Portfolio</a></li> </UL> On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element. Is there a way to get both Firefox and IE to have no padding? Thanks </div> You can view the site I'm working on here and the style sheet here . The #left and #right divs inside the container are set up so that a 15px margin should exist all the way around the outside as well as between the two divs. This is the white space that you can see. From what I can tell, it displays correctly in Firefox, Opera and IE7, but not in IE6 or below. In IE6, which I test in using VirtualPC, the left-margin of the #left div seems to double and become 30px wide. This pushes the #right div all the way out to the edge of the container, though you can't see this happening because the background of #right is transparent. I have spent the last hour looking at my css trying to figure out why IE6 is doubling the width of this margin, but I'm completely baffled. I'm convinced there's something obvious I'm missing because I'm a bit of a css amateur. Can anyone help? I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px. This is my input field code on my form: Code: <input type="text" class="field" name="title" size="45" maxlength="200"/> On my stylesheets I placed this: Code: input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}
Doesn't work?? I can't figure out why. Hi to all I am pasting here the code where i have problem <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .mainUL { float: left; list-style: none; line-height: 1; font-weight: bold; padding:0; font-size:12px; margin:0; text-align:center; vertical-align:middle; border:2px solid #000000; border-bottom:none; /*border-left:none;*/ border-top:none; /*margin-left:63px;*/ border:1px solid red; width:294px; height:150px; margin-top:40px; margin-left:300px; } .mailULLI { background:#FFFF99; float: left; width: 12em; color:#000000; padding:5px 0 5px 0; border:2px solid #000000; border-left:none; border-bottom:none; text-align:center; margin:0; border:1px solid blue; height:15px; } .innerUL { width:100px; height:30px; border:1px solid red; display:none; margin-top:-52px; } </style> <script language="javascript"> function showpopup(id) { var id=document.getElementById(id); id.style.display='block'; } function hidepopup(id) { var id=document.getElementById(id); id.style.display='none'; } </script> </head> <body> <ul class="mainUL"> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a> <ul id="popup" class="innerUL"> </ul> </li> </ul> </body> </html> Currently when i mouseover the "click here 1" a popup open above it its fine I want when i mouse over the "click here 2 " pop up should open above it same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell thanks in advance |
|||||||