|
CSS - Can't Align Menu #navigator To Left
Hi everyone, I just have this pain with aligning the whole red thing to left of the page browser (cause it just keeps hanging on the center) - you can check my homepage below - you will see the problem - what should I do to move the whole thing to left? Thank you in advance.
Similar TutorialsI have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
I used a form generator online that utilizes CSS and PHP. I am very comfortable with programming; but, I have never used CSS. I tried tweaking everything I could and no luck changing the CSS to left-align the entire form. I thought they used padding; but, I can't figure out where. Also, I removed the CSS to make sure the alignment wasn't part of the HTML - it is definitely embedded in the CSS as the form left-aligned (just not as attractive). Here is the CSS - apologies for the length. As you will undoubtedly see, this is my first post and I am not sure of your protocols for posting code. body { background:#fffff; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:small; margin:8px 0 16px; text-align:left; } #form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; width:640px; } #top { display:block; height:10px; margin:10px auto 0; width:650px; } #footer { width:640px; clear:both; color:#999999; text-align:left; width:640px; padding-bottom: 15px; font-size: 85%; } #footer a{ color:#999999; text-decoration: none; border-bottom: 1px dotted #999999; } #bottom { display:block; height:10px; margin:0 auto; width:650px; } form.appnitro { margin:0px 0px 0; padding:0 0 20px; } There is much more CSS; but, I believe the issue is isolated to this section. Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan Can't get flash anim to line up with left hand margin in IE. FF & Op fine. It's about 15px indented in IE. Don't have anything online - extract of code below... Anything obvious? Many thanks: <div id="movie_position"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" id="Movie1" width="500" height="328" > <param name="movie" value="Movie1.swf"> <param name="wmode" value="transparent"> <param name="bgcolor" value="#FFFFFF"> <param name="quality" value="high"> <param name="allowscriptaccess" value="samedomain"> <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="Movie1" width="500" height="350" src="Movie1.swf" bgcolor="#FFFFFF" quality="high" swliveconnect="true" allowscriptaccess="samedomain" wmode="transparent"> <noembed> </noembed> </embed> </object> </div> AND THE RELEVANT CSS: #container { margin:0 auto; width: 760px; text-align:left; } body { margin:0px; padding:0px; text-align: center; background-color :#FFF; font-family: verdana, arial, sans-serif; color: #000; line-height: 16pt; } h1 { font-family: verdana, arial, sans-serif; color: #7DA1E7; font-size: 15pt; text-align: justify; } h2 { font-family: verdana, arial, sans-serif; color: #7DA1E7; font-size: 24pt; text-align: justify; padding: 20 0 0 0; } #movie_position { position: relative; left: 0; } Hi all, We have a table layout we're experiencing some issues with on users that have smaller screens. Below is a simple 1 row example of elements contained in our div tables Code:
<div class="tracks-result-page" style="">
<div class="track-element">
<input class="track-select-checkbox" type="checkbox"><h4 class="track-name">Track</h4><span class="created-date">23-Jul-2008 17:13</span><span class="duration">47m</span><a href="#" class="view-button">view</a><a href="/viewtrack" class="edit-button">edit</a><a href="#" class="details-button">show details</a><input value="d5f173a2-b35e-4489-b468-33a05b1e4997" class="track-id" type="hidden">
</div>
<div class="track-element">
....more elements
</div>
</div>
Basically, I have 800 px to fit this data in from our site template. What's happening is on smaller resolutions, the 3 anchor tags aren't fitting in 800 px due to large font size vs table width, and the anchor elements are wrapping around. I have a lot of white space after the description, and currently have a fixed width on that div. What I need is to right align everything from the "created-date" class to the end of the element, then left align the "track-select-checkbox" and the "track-name" elements. I'm having a really tough time doing this for some reason. I can't use "float:right;" on the elements that need right aligned. If I do, they all appear in reverse order! Any help would be greatly appreciated. thanks, Todd When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! 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>
Hi there, I am back with another browser issue with css. When I set the position from the top on the center logo it shows correctly at top: 15px in IE but not in Navigator. To make it ok in Navigator I have to put it at 17px and then its off in IE. I would love some help as i have a similar problem occuring in another site which I have also been trying to solve. Here is the link: http://www.paintyourplace.com/emerald/ Here is the CSS: body{ font-family: verdana, helvetica, arial, sans-serif; margin: 0px 0px 0px 0px; padding: 0px; font-size:12px; color: black; background-color: #FFFFFF; scrollbar-arrow-color:#003366; scrollbar-face-color:#0C5331; scrollbar-shadow-color: #9FB304; scrollbar-highlight-color: #FFFFFF; scrollbar-track-color: #CCCCCC; } #menuList { margin: 0px; padding: 0px; } #menuList ul { margin: 0px; padding: 0px; } #menuList li { display: inline; list-style: none; } a.actuator { background-color: transparent; color: #000; font-size: 12px; margin: 0px; padding: 3px 6px; text-decoration: none; } a.actuator:hover { color: #990000; } .menu { color: #000; background-color: #EEE; border: 1px solid #CCC; position: absolute; visibility: hidden; } .menu li a { background-color: #EEE; color: #000; display: block; font-size: 12px; line-height: 1.75em; margin: 0px; padding: 0px 10px; text-decoration: none; } .menu li a:hover { background-color: #0C5331; color: #EEE; } span.key { text-decoration: underline; } #homeMenu { width: 120px; } #aboutMenu { width: 120px; } #productsMenu { width: 120px; } #careersMenu { width: 120px; } #customerMenu { width: 120px; } #healthcareMenu { width: 120px; } #contactMenu { width: 120px; } a{ color:#990000; font-weight:normal; text-decoration:none; } a:visited{ color:#005940 } a:hover{ color:#990000; text-decoration:underline; } #mainMenu { text-align: center; color: #000; margin: 0px; padding: 0px 0px 2px 20px; } DIV.jill_toplogo{ align: left; } DIV.jill_leftgreen{ top: 75px; background-color: #0C5331; height: 95px; position:absolute; width: 50%; } DIV.jill_rightblue{ left: 50%; top: 75px; background-color: #254E7C; height: 95px; position:absolute; width: 50%; } DIV.jill_centered_logo{ position:relative; text-align: center; top: 15px; } DIV.jill_greyback{ padding-top: 112px; background-color: #E1E5E0; position: absolute; top: 60px; width: 100%; text-align: center; font-size: 12px; } DIV.mainBox { position: absolute; top: 230px; font-family: verdana, helvetica, arial, sans-serif; font-size:12px; left: 57px; width: 80%; } #bottomText{ padding: 0px; margin-top: 20px; margin-bottom: 10px; margin-right: 20%; margin-left: 20%; background: none; border: none; border-top: none; text-align:center; font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; color: #ccc; } THANKS!!!! So I have this code... 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" lang="en">
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0 1em;
padding:0;
width:775px;
}
#header {
background:blue;
margin-bottom:1em;
padding:1em;
}
#header h1, #header p {
margin:0;
padding:0;
color:white;
}
#menu {
width:150px;
z-index:50;
}
#menu ul {
list-style-type:none;
margin:0;
padding:0;
text-align:center;
border-top:solid thin orange;
}
#menu li {
border-bottom:solid thin orange;
}
#menu a {
padding:.5em 0;
text-decoration:none;
display:block;
background:white;
color:black;
}
#menu a:hover {
font-weight:bold;
background:blue;
}
#pagebody {
margin-left:175px;
margin-top:-450px;
}
#pagebody h2 {
margin:0;
}
</style>
</head>
<body>
<div id="header">
<h1>Test Page</h1>
<p>Tagline goes here!</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Employees</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Request Information</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Make a payment</a></li>
</ul>
</div>
<div id="pagebody">
<h2>Page Header and other information</h2>
</div>
</body>
</html>
As you can see I am using a left margin and a negative top margin to position the page body next to the menu. This is the first time I've done it this way. In the past I've used floats (either floating the content, and putting a margin on the menu, or floating the menu and putting a maring on the content.) This method does not work in IE7 as the menu's links are not selectable. That doesn't necessarily mean this is the wrong way to do it... but, I was looking for opinions and suggestions as to what's the "right" way to accomplish this so that development and maintenance is easy... the content and menus are self contained (i.e. they don't or at least only minimally affect each other)... and it works cross browser. Thanks Bryan Hi. I just have a simple question. I would like to design a web page that has a menu bar at top, a left side bar, and probably a news wire type bar on the right. Something similar to the way the main Dev Shed page is set up. I'm not asking for anyone to explain to me how to do this, I just don't know what I need to look into to do this. Is CSS what I'm looking for? Or is it something else? I've just started to learn PHP and that's the language I'm programming in, so is there some useful way to do this in PHP? Also, any tips about news wires? Thanks in advance for pointing me in the right direction. Hi I want to create a text rollover menu on the very left hand side only (standard display). I want it in a table so I can have content on right hand side. I don't know whether to have each link in its own cell or 1 big cell and have a list of items. I decided to have a list of items but the items display on right side of the table cell and align left doesn't work. Code:
a {
display: block;
width:100px;
text-decoration: none;
}
#list1 { /* all list items */
background: lightblue;
border-width:1px; /* thin is not the same in different browsers */
border-color:black;
border-style:solid; /* required */
list-style-type:none;
}
I just want the list to display on left hand side and have a box around each item which it isn't. I am spending way too long fiddling about with this . I am trying to space out my menu from the primary container. right now its completely on the left i am want to give it a 4 pixel space but I am relevantly new to css/html cant figure it out. This is what i have for the menu. Code: .twoColHybLtHdr #sidebar1
{ float: left ;
width: 12em;
background: #000000;
padding: 15px 0;
border: 1px solid #ffffff; }
Thanks In Advance The URL: http://www.dudley.nhs.uk/ The problem.... in IE7, the left menu is shifted to the right. If you refresh the page, the issue is resolved.... until you go onto one of the links again! I've split the CSS up into many files (tables, colours, fonts, left list, right list etc etc) One of my colour CSS files contains the code for the colouring of the lists. Within this, I have found: PHP Code: ul#navlist li a:hover, ul#navlistRight li a:hover { border-color: #ff0; background: #9cf; color:#000; } which seems to be causing the problem. Taking it out seems to works fine BUT I do lose the colour change. I've attached the 2 stylesheets that I use for the menu on the left. Please help! I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing. I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think. It's probably easier to see an example of the page I'm talking about: http://edwin.netbits.co.uk/devshed/...blem/index.html In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot). It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem. I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below. HTML: Code: <div id="contentscontainer">
<div id="left">
Menu
</div>
<div id="contents">
Some text<br /><br />and some more text
</div>
</div>
CSS: Code: div#contentscontainer
{
padding: 0px;
margin: 0px;
}
div#left
{
float: left;
width: 50px;
padding: 0px;
margin: 0px;
}
div#contents
{
padding: 0px;
margin-left: 170px;
}
Thanks, Edwin Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Here is my problem. I need to make a menu and a body of a page end at the same pixel, so that they look neat and so that a footer can go underneath. Right now, I'm trying to make a div which contains the menu and the body and making the heights of both 100% so if one is longer than the other, the div should automatically be as long as the other. However, my outer div seems non-existant (0px high) for some reason, even though both the menu and the body are nested in it and have content. Anyone have a solution? Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except: 1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) |
|||||||