|
CSS - Css Center, Spaces Between Divs
Hi everyone,
I am working on a conceptual design with basic js rollovers and css. When I center the divs I get a small horizontal space between the divs. I have only tested this in firefox. My css for each div is: #foo{ margin: 0 auto; text-align: left; background: #006600; width: 800px; } and the page can be seen he bdgplans.com/concept/roll2.html Similar TutorialsI 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'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. How would I go about horizontally centering a number of divs within another parent div which has a set width of 500px? There maybe 2,3 or 4 divs of varying length within the parent div but no matter the number I always want them centered within the parent div. |............................................................| |............................................................| |............................................................| | <---DIV---> | <---DIV---> | <---DIV---> | |............................................................| |............................................................| |............................................................| Hello. I need some help with positioning css. I want a div in the center of the page with a width of 780 px and a height of the entire page. On the left I want a background image aligning to the right and on the right side I want a background image aligning to the left. These two div's must be stretching to the whatever size your screen is. I just can't get it done. Right now I have this, but well, it's not really working properly. PHP Code: .left { width:30%; margin-bottom:0px; background-position:top right; float:left; height:100%; background: url("../img/left.jpg") top right repeat-y; } .right { width:30%; margin-right:0px; margin-bottom:0px; float:left; height:100%; background: url("../img/right.jpg"); } .centerpositie { width: 40%; //border:1px solid black; float:left; top:0px; background-color:#FFFFFF; width:780px; height:100%; } Hi all, I know there are certain tricks to vertically center texts or images in a div area. And I have read somewhere there are plans to avoid current complexity compared with tables. For example, provided I use same CSS... Code:
div,table{
width: 250px;
height: 100px;
border: 1px solid red;
text-align: center;
}
...we optain well vertically centered text in this table... Code: <table> <tr><td>this IS vertically centered</td></tr> </table> ...but not in this div based one... Code: <div>this IS NOT vertically centered</div> I ask, do you know an easy way to acomplish the same we get with tables? Thanks! I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. I'm using a two column layout (main, sidebar), and within the main column, there is a section that breaks into two columns. I'm using this code:
Code: <div>
<p>Some main column content</p>
</div>
<div id="inner_col_wrap">
<div id="col_left">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div id="col_right">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</div>
<div>
<p>Some more main column content</p>
</div>
The problem is that some of the content that follows the two column block ("Some more main column content") is pushed up into the "col_right" DIV when "col_left" and "col_right" are not equil ("col_right is shorter than "col_left", and there is space at the bottom). How to keep the conent that follows the two column block out of it? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design. Thanks Hi I've trying to use a UL list to display a menu on my site. I'm having a problem with spacing tho. No matter what I do, there always seems to be a slight space between the LI elements. Code is as follows: PHP Code: #menu { margin: 0; padding: 0; list-style: none; } <ul id="menu"> <li><a href="thestore.php"><img src="images/menu_thestore.gif" width="195" height="36" border="0" alt="The Store" onmouseover="this.src='images/menu_thestore_over.gif'" onmouseout="this.src='images/menu_thestore.gif'" /></a></li> <li><a href="steel_toe_cards.php"><img src="images/menu_steeltoe.gif" width="195" height="36" border="0" alt="Steel Toe Cards" onmouseover="this.src='images/menu_steeltoe_over.gif'" onmouseout="this.src='images/menu_steeltoe.gif'" /></a></li> <li><a href="locations.php"><img src="images/menu_locations.gif" width="195" height="36" border="0" alt="Locations" onmouseover="this.src='images/menu_locations_over.gif'" onmouseout="this.src='images/menu_locations.gif'"/></a> </ul> Would it be something to do with the fact I'm using images as menu options?? There's always a slight space between them, and I can't figure out why! Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox. At the moment it's laid out properly in FF, but I have some problems with IE. The cells of a table "deform" while browsing in IE. This is how it looks like: URL http://i38.tinypic.com/5ffe6q.gif Here is html of the cells in question: Code: <table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg"> <tr> <td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg" border="0"> </td> </tr> <tr> <td class="cHs" background="pic/left.jpg" width="47" valign=top></td> <td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top> <td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top"> </td> </tr> </table> Here is used CSS: Code:
table.cHs{ background: transparent;
border: none;
}
td.cHs { border: none;
}
Does anybody see a problem? Thanks in advance. Hi, I have made drop down menus using css and they work fine in Firefox and Opera, but in internet explorer the drop down images all have spaces in between them could someone tell me how to solve this? Thanks xhtml source http://cyberinsomnia.com/index.php css source http://cyberinsomnia.com/styles/default.css Thanks, Jacob I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself. For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc. The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc. The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in. How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it. I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class: Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>" Any help would be very gratefully receive it as I am rapidly running out of hair! Thank you. Can you have the a class name as follows: <tr class="row one"> . At http://www.glish.com/css/7.asp there is a 3 column layout, I have taken it and put it all inside one containing <div>. I am trying to get the columns to have spaces between them, but they won't seperate without going to the bottom of the page. Here are the relevant styles: Code:
#main {
margin:auto;
width:800px;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
float:left;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
#centercontent {
float:left;
margin:auto;
background:#fff;
width:400;
height:1000;
border:1px dashed #000;
}
html>body #centercontent {
margin-left:auto;
margin-right:auto;
}
#rightcontent {
float:left;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
The first and second columns separate but not the third Code: <div id="main"> <div id="banner"> <h1>TITLE</h1> </div> <div id="leftcontent"> <h1>leftcontent</h1> </div> <div id="centercontent"> <h1>centercontent</h1> </div> </div> <div id="rightcontent"> <h1>rightcontent</h1> </div> </div> Thank you [EDIT] Nevermind, after looking at the "Nested Float" example on glish, I just nested it and float:right. If anyone is interested here is the updated #rightcontent style (now called #main #rightcontent) Code:
#main #rightcontent {
float:right;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
All you have to do is change the name and the float. |
|||||||