|
CSS - Ie Positioning / Layout Problem
Hi been trying for a while now to fix this problem without luck see link below
removed Its a gallery page with a scrolling layer below the main image (you need to click a thumbnail to see the problem). The scrolling layer behaves as if its outside the page flow and does not snap inline with its parent when the page resizes. The page does not reload to view the new main image I'm using ajax and the problem only seems to happen in IE as far as I can see for now. Has anyone time to help? Jimmy Similar TutorialsHey all, Can anyone recommend some good sites and forums, for CSS layout and positioning designs/help? Cheers. I'm trying to position parts of a layout using CSS only. For my assignment I'm not allowed to change anything in the .html document. When I get the layout the way it's supposed to look, I'll preview it using different screen resolutions and the layout changes and looks distorted. How can I make a layout that's 3 columns, 3 rows using CSS that will be viewed properly in different screen resolutions? Here's part of my CSS and how I have it set up... Code:
#main {
background-color:#CCCCCC;
position:absolute;
margin-left:255px;
margin-right:450px;
margin-top:-250px;
}
If you need the whole code I can post that too. I have been using css for a while, but mostly just for style, not layout. I am trying to do a site, with basically three divs. One on the left for content, two on the right...one for a menu, and the other showing an image. I have stripped down the page to the smallest possible that I can show the problem. Basically, I want the image (red background) to be below the menu (dark purple bg), and both of them on the right of the content (lavendar bg). I have validated the html, but I am not getting a response from the css validator right now. Here is my html so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>Vote YES Mosinee!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
padding: 0px;
background-color: #FFF;
text-align: center;
font: 76% Verdana,Arial,sans-serif;
}
div#container{
width:800px;
margin: 0 auto;
text-align: left;
background: #ff0;
}
div#content{
background: #d1c9e2;
width:550px;
}
div#nav{
float: right;
width:240px;
background: #484393;
}
div#nav p{
padding: 5px 0;
}
div#nav h2{
font-size: 110%;
color: #333;
}
div#imageSection{
float: right;
width: 240px;
background: #ff0000;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>There will be a menu here.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
</ul>
</div>
<div id="imageSection">
<img src="(URL address blocked: See forum rules)" alt="Children">
</div>
<div id="content">
<p>Vote YES is dedicated to reaching out to the members of the Mosinee community and to raising awareness of the situation our elementary students face each school day. Through their efforts, they hope to gain the support of Mosinee's voters and help the community create a facility that enables an optimal and safe learning environment.</p>
<p>After years of failed referendums and the advent of another proposed addition, numerous community members have come together and organized "Vote YES" (VOTE for Your Elementary School). The organization was formed to support the referendum proposed by the school board and help educate individuals around the community. </p>
<p>On April 3, 2007, the voters of the Mosinee School District will be asked to approve a referendum to address space inadequacies and safety issues at the current elementary school. The VOTE YES group formed for a number of different reasons. Teachers and parents found it difficult to ignore the glaring parking issues, overcrowding in the cafeteria, the use of hallways and storage closets for classes, and the 20-year band-aid solution of adding portable classrooms. Taxpayers couldn't ignore the problem and individuals throughout the community stepped forward to help. </p>
<p>Many More Paragraphs....</p>
</div>
</div>
</body>
</html>
How can I achieve this? Hey, I'm trying to make a 3-column layout, and I'm having troubles with IE positioning the 3rd column. The address is URL . I have no problems trying to make one where the middle column is the "main" one, but for some reason it is working out now. Also, if possible, I'm also trying to put in a footer image that will cover the whole part of the bottom (from the far left of the browser to the far right of the layout. It's perfectly fine in Firefox, but IE looks bad Thx P.S. here's an image of my problem, since it might look different when someone looks at it as i might still be screwing around w/ it <img src="http://img.photobucket.com/albums/v411/mflotron91/problem.jpg"> So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png Hi all- I m building a tableless site and am having difficulties getting the one section to fit in properly. It works great in FF but bumps down below the left nav in IE and I'm bashing my head against the wall trying to figure out which property is causing this behaviour. The majority of my audience uses IE so this is important that it displays properly See the example he http://verticalextreme.com/redesign.html CSS is he http://verticalextreme.com/_site_stylesheets/veStyle_green.css thanks in advance for any pointers! http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. hey all, i am new to using CSS. (Yes i am very much behind the times). But i am trying to rectify that! Now the problem i am having is that i have a flash object that i simply want to align centered horizontally and it stays centered no matter what. but i would also like to position it y = 100 (x and y positioning) any ideas! I'm using absolutely positioned divs as a dropdown subnavigation. While I have yet program the javascript functionality that will make these divs appear and disappear, I am currently working on placing the divs just right on the page. (The simple part, right?? Right...) Check out this page: http://www.psd7.com/fst/www_live/ It shows one of my subnavigation divs (the rest are hidden). On most browsers, when you roll over the Our Tradition button on the left, the horizontal line lines up perfectly with the top of the subnavigation. However, on the most commonly used browser on the planet (IE for Windows), these things are not lined up, but are slightly offset. I can't imagine how to work this out. If I change the top value for the subnav so it lines up in IE for Windows, then it won't line up in any of the other browsers. Here's the css code: Code:
#subnav_our_tradition {
position: absolute;
left: 155px;
top: 230px;
width: 137px;
background-color: #7C272D;
z-index: 3;
}
Here's the HTML code regarding that one subnav: Code: <div id="subnav_our_tradition"> <div class="subnav_item"><a href="our_tradition/intellectual_tradition.htm">The Franciscan Intellectual Tradition</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/mission.htm">Mission Statement</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/community_life.htm">Community Life</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/resources.htm">Resources</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/links.htm">Links</a></div> </div> Can anyone suggest a workaround? this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs I'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>. So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through. If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious. Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them? The following gives me the staggered layout: Code:
.leftColumn{
margin-left:20px;
width:100px;
border:thin dotted #999999;
}
.middleColumn{
margin-left:121px;
width: 450px;
border:thin dotted #999999;
}
.rightColumn{
margin-left:572px;
width: 200px;
border:thin dotted #999999;
}
.main{
left:200px;
width: 950px;
background-image: url(Images/PaperBkg.gif);
background-repeat:repeat-y;
}
<div class="main">
<div class="leftColumn">
</div>
<div class="middleColumn">
</div>
<div class="rightColumn">
</div>
</div>
Thanks guys. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I am having trouble positioning two <div> elements on my page, I need them to sit in the bottom right and left corners of the page but they only seem to want to sit in the corners of the page when it is first loaded and the window is maximised. The page can be viewed at http://sirgdissertation.zzl.org and the css for the two divs is as follows: Code: #bottomBarLeft {
position:absolute;
bottom:0%;
left:0%;
right:50%;
width:50%;
height:auto;
text-align:left;
font-size:9px;
}
#bottomBarRight {
position:absolute;
bottom:0%;
left:50%;
right:0%;
width:50%;
height:auto;
text-align:right;
font-size:12px;
}
can someone suggest how I could alter the code to fix my problem? Ignore the red lines around the info in the middle at the moment, they are just there for position editing purposes. I have checked my page in Google Chrome, IE8 and Firefox 3.6 and still the same result. As a sidenote, IE8 also doesn't seem to want to display the home page properly, I don't know if it has something to do with the fact that it is a php page or something else - if someone could direct me to the appropriate board for this then I'll post this sidenote there!! I'm trying to get a box to position properly. If you go to this page in firefox, it looks fine, but in IE7 and IE6 the centered image is nudged to the left by one pixel. You can see the white space to the right of the banner. When resizing the IE6/7 window, it sometimes jumps back to the right and into its proper position. Are there any specific methods in CSS that I should use for positioning this? Right now I'm just using this: Code: <div align="center"> <img src="banner.jpg"> </div> The CSS is validated. -The problem only occurs in the 1280x1024 resolution and above. Not in 768 by 1024. I'm sorry but this bothers me! - Thank you. My page is valid xhtml 1.0 strict and valid css 2, however.. i'm still having a problem. for some people, who use IE 6, are having trouble viewing my page correctly. for my (also using IE 6 and firefox) it works perfect. the address is: http://invalidheart.org/about.php the problem that happens is the content overlaps the navigation menu.. any idea why? i have NO clue.. it's driving me nuts, I want to put my page up, but I can't until i figure this out. Thanks SO much for your time css: http://invalidheart.org/default.css I am currently puzzled about a weird problem I've been having with the positioning of my main content div, and all it contains. I don't seem to be having any issue regarding width, just height, which makes me wonder whether it is some sort of issue with the z index property or something. It's probably much simpler :P Here's a couple of screenshots of what I'm talking about: EDIT... Not allowed to post url's.. real helpful, thanks :P Originally the site displayed just fine in IE 7.0, but then I had to set the padding on the top of the content div to 12% (the content frame contains everything below the "navbar") so that the content div displayed the information in the correct place. EDIT... Not allowed to post url's.. real helpful, thanks :P Here you can see it all looking fine and dandy in FF 2.0, but previous to changing the padding for the content div to 12% the text in the content frame and the images were much higher up on the screen. It's like the content div was ignoring the fact that there are a few other divs above it in the flow of the document. Essentially the menubar div contains the little lightening image (in its own div), some text (in its own div) and the navbar div. So I can't figure out why FF seems to act as if they are not there Any idea's? If it will help I'll be happy to show my shockingly messy code (which I'll try and tidy up first). As I am not allowed to post url's, I'll try to pop in a link of the website I am talking about: irrevocableguild dot co dot uk Cheeky of me I know... but I can see no other way of properly describing what I mean Any help would be much appreciated. Thanks ~blueseay (SOLVED) I have positioned a navigation line (previous page, next page, etc) at the top of my static html page using the following css <p class>: p.navigationTop { position:relative; float:right; top:-95px; font-size:0.9em; } It sits inside #content { line-height:1.6em; margin:-95px 185px 5px 185px; padding:0; text-align:left; } It works fine in FF, Opera, Chrome and IE8, but then came IE9, and in that version my simple navigation is way out of place, i.e. too high up (probably those 95px). Has anybody any suggestions as to how I can remedy this? I would be grateful for some help. Gloria2 Hi, I'll apologize up front, I'm a real newbie with css, I have a very limited understanding of it. I'm having a problem with the position of a Div tag. It work fine in Firefox mac/pc but in I.E 6 & 7 the Div's rule for margin-left seem to be ignored. Here's a link the html page: http://www.visualstrategies.ca/jf_mackie/about_us.html. The submenu container div should have a margin-left:12px; but it is igored???? Here's the div structu Code:
<div id="submenu">
<div id="submenu_container">
<div id="submenu_arrow"></div>
<ul id="nav">
<li id="current"><span>Our Investment Philosophy</span></li>
<li id="dash"></li>
<li><a href="#">Our Team</a></li>
<li id="dash"></li>
<li><a href="#">Our Services</a></li>
</ul>
</div>
</div>
Here's the css for the div's: Code: submenu{
height: 41px;
background-image: url(images/content_bg.gif);
background-repeat: repeat-y;
/*border: thin solid red;*/
}
#submenu_container{
margin-left:12px;
margin-right:20px;
height: 41px;
background-image: url(images/sub_bg.gif);
background-repeat: repeat-x;
/*border: thin solid green;*/
}
#submenu_arrow{
float:left;
margin:0 4px 0 45px;
height: 41px;
background-image: url(images/sub_arrow.gif);
background-repeat: no-repeat;
width: 14px;
/*border: thin solid blue;*/
}
Any help would be great! Thanks sskully I'm having a problem with the positioning of my navbar in IE, the problem page is http://www.mckr.ie/test.html In Opera the left navbar div and the main content div are positioned fine but in IE they go up on the page for some reason? Its strange because they are absolutely positioned. Please can you help? Here is the HTML code for the page: Code: <div id="bannerdiv"></div>
<div id="contentdiv"><!-- InstanceBeginEditable name="content" -->
<h1>Welcome to the McKeever Rowan Solicitors/Lawyers Website</h1>
<p>McKeever Rowan Solicitors is a long established Irish law firm located in the International Financial Services Centre in Dublin, Ireland. We also have an office in Paris and representation throughout the European Union through our membership of <a href="http://www.cyrus-ross.com/home.htm">Cyrus Ross International</a>.</p>
<p>The law firm has in depth knowledge of specific industry sectors, which it brings to bear in advising in these sectors and which will save clients time and resources in buying legal services. Our focus always is in providing clear legal advice of the highest quality based on a thorough understanding of the industry sector involved. </p>
<p></p>
Our areas of expertise include:
<ul>
<li> Corporate Law</li>
<li>Regulatory and Commercial Law</li>
<li>Communications and Utilities Law</li>
<li>Information Technology Law</li>
<li>Technology and Electronics Law</li>
<li>e-Commerce Law</li>
<li>Financial Services Law</li>
<li>Litigation</li>
<li>Banking Law</li>
<li>Insolvency, Bankruptcy and Corporate Law</li>
<li>Recovery </li>
<li>Commercial Litigation, Arbitration and ADR</li>
<li>General Personal Litigation</li>
<li>Property and Private Client</li>
<li>Residential Property/ Real Estate Law</li>
<li>Commercial Property/ Real Estate Law</li>
<li>Wills Trusts and Administration of Estates</li>
<li>Buying Property in France</li>
<li>Employment Law</li>
<li>Family Law </li>
</ul>
<p>Please click on the links opposite for more details on the specific areas and our link below for details of our disclaimer.</p>
<!-- InstanceEndEditable --></div>
<div id="leftnavdiv">
<div id="leftnavouterdiv">
<div id="leftnavinnerdiv">
<p><b>Practice Areas</b><br />
Corporate/Commercial<br />
<a href="pages/corporate.html">Corporate</a><br />
<a href="pages/regandcom.html">Regulatory and Commercial</a><br />
<a href="pages/communicationsandutilities.html">Communications and Utilities</a><br />
<a href="pages/informationtech.html">Information Technology</a><br />
<a href="pages/technology.html">Technology and Electronics</a><br />
<a href="pages/ecommerce.html">e-Commerce</a><br />
<a href="pages/financialservices.html">Financial Services</a></p>
<p>
<b>Litigation</b><br />
<a href="pages/banking.html">Banking</a><br />
<a href="pages/insolvency.html">Insolvency, Bankruptcy and Corporate<br />
Recovery</a><br />
<a href="pages/commerciallitigation.html">Commercial Litigation, Arbitration<br />
and ADR</a><br />
<a href="pages/personallitigation.html">General Personal Litigation</a></p>
<p><b>Property and Private Client</b><br />
<a href="pages/residentialproperty.html">Residential Property/ Real Estate</a><br />
<a href="pages/commercialproperty.html">Commercial Property/ Real Estate</a><br />
<a href="pages/willsandtrusts.html">Wills Trusts and Administration<br />
of Estates</a><br />
<a href="pages/frenchproperty.html">Buying Property in France</a></p>
<p> <a href="pages/employment.html">Employment Law</a></p>
<p><a href="pages/familylaw.html">Family Law</a> </p>
</div>
</div>
<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>
<form action="http://search.atomz.com/search/" method="get" target="main">
<b>Search the Site<br />
</b>
<input name="sp-q" size="15" />
<input name="submit" type="submit" value="Go" />
<input name="sp-a" type="hidden" value="sp10023119" />
<input name="sp-f" type="hidden" value="ISO-8859-1" />
</form>
</div>
</div>
</div>
<div id="topnavdiv">
<ul>
<li><a href="/" id="buttonhome"><b>Home</b></a></li>
<li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>
<li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>
<li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>
<li><a href="news.html" id="buttonnews"><b>News</b></a></li>
<li><a href="people.html" id="buttonpeople"><b>People</b></a></li>
<li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>
</ul>
</div>
Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
|
|||||||