|
CSS - Div Left Of Centered Div?
How can i accomplish this with CSS?
See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) Similar Tutorialshi, 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. 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? 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 I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
I 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;
}
Hi, I have this page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB I have a site that I am working on: test dot choupique dot com The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why? Thanks http://www.lightblu.com/ (It speaks for itself) how come on my test page, http://www.lightblu.com/test.php works fine (ie. the menu is centered correctly), but not on the homepage? What did I do wrong? Ok, I give up... can't figure this one out... the navbar seems to be centered in IE but not in Firefox. www.moksha.net/index.html I notice that it doesn't seem to matter whether I am inside the header div or not. The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential. Thanks! #header { padding: 1em; margin: 0px; text-align:center; width:100%; align: center; display:block; } #navbar { color:#FFCC33; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; margin:0 auto; } #navbar ul { clear:left; text-align: center; margin: 0 auto; list-style-type: none; text-indent: 0; width: 600px; background-color:#996633;} #navbar li { /* float:left; width:80px; */ padding-right: 1em; height: 3em; line-height:3em; font-size: 20px; display: inline; list-style-type: none; text-align: center; margin:0; } #navbar a { color:#FF9933; text-decoration: none; } #navbar a:hover { color:#FFCC33; } Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual. I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide. My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten. Code: <div class="header"> <div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div> <div class="rightAlign" id="topRight"> <jsp:include page="AccountLinks.jsp"></jsp:include> </div><br /> <form id="searchForm" action="/SearchServlet"> <input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input> </form> </div> and the relevant css is Code:
div.header{
width: 1000px;
margin: 0 auto;
min-height: 60px;
display: block;
text-align:center;
}
div.leftAlign{
float: left;
text-align: left;
}
div.rightAlign{
float: right;
text-align: right;
}
#searchForm{
vertical-align: top;
margin: 0;
line-height: 1;
outline:0;
}
#searchText{
background:url(/img/searchText.gif) no-repeat top center;
padding:0px;
margin:0;
display:inline;
border:0;
width:159px;
height: 31px;
}
#searchButton {
background:url(/img/searchButton.gif) no-repeat top center;
padding-top:0px;
margin:0;
display:inline;
border:0;
width:42px;
vertical-align: top;
line-height: 1;
height:31px;
}
Any help that you can provide would be greatly appreciated. Thank you very much. Hey guys, I know that this is a well covered topic. but I am trying to get a container div to sit centered and 100% of the page. my css reads: * { margin:0; padding: 0; } html, body { height: 100%; } #container { position: relative; width: 900px; height: 100%; margin: 0 auto; background: url("imgs/backgroundmain.gif"); } It works fine for the required browsers until the contents of the page goes beyond the size of the screen then the background stops. it literally stops at 100% of window rather than 100% of content. Any ideas??? James MacLeod As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS. The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way. #bottom_center { margin: 0px; padding: 0px; background: #ccc; width: 470px; height: 90px; border-style: ridge; } ---- then in the body ---- <div align="center"> <div id="bottom_center"> <img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc." width="470" height="90"> </div> </div> This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<style type="text/css">
#quikcontainer
{
position: absolute;
top: 120px;
left: 30px;
height: 650px;
width: 143px;
background: white;
border: orange 2px solid;
margin: 0 auto;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;
}
ul#quiklist
{
text-align: center;
color: #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}
ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}
#quikcontainer>ul#quiklist li a { width: auto; }
ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top: 2px solid;
}
</style>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="quikcontainer">
<p><strong>Quick Links</strong></p>
<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>
<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>
<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>
<li><a href="#">Aaa A-A Aaaa</a></li>
<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>
</body>
</html>
having trouble centering a web site what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div check out my example the "center1" div should appear inside the top light gray box but it dose not! http://www.thehopeandanchor.net/nypd/layertest.htm the code: <!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" xml:lang="en" lang="en"> <head> <title>redeem file</title> <style type="text/css"> <!-- div#center1 { /*position:absolute;*/ margin:0px auto; top:10px; width:600px; height:47px; background-color: #cccccc; } div#center2 { position:absolute; left: 50%; margin-left: -300px; top:80px; width:600px; height:47px; background-color: #cccccc; } div#insidebit { position:absolute; left:50px; top:10px; width:64px; height:26px; background-color: #eeeeee; } --> </style> </head> <body> <div id="center1"> <div id="insidebit">center1</div> </div> <div id="center2"> <div id="insidebit">center2</div> </div> </body> </html> Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height. Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser. page ---- <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container"> <!--*******page content start*******--> <div class="top">top</div> <div class="main1">main1</div> <div class="main2">main2</div> <div class="main3">main3</div> <!--*******page content end*******--> </div></td></tr></tbody></table></body></html> CSS Sheet ---------- table { width: 100%; height: 100%; } td { text-align: center; vertical-align: top; } div.container { position: relative; margin: 0 auto; width: 780px; text-align: left; height: 100%; } div.top { position: absolute; top: -3px; left: 0px; width: 780px; height: 203px; background-color: #CCC; } div.main1 { position: absolute; top: 200px; left: 0px; width: 200px; height: 100%; background-color: #BBB; } div.main2 { position: absolute; top: 200px; left: 200px; width: 200px; height: 100%; background-color: #DDD; } div.main3 { position: absolute; top: 200px; left: 400px; width: 380px; height: 100%; background-color: #AAA; } |
|||||||