|
CSS - Div Positioning Trouble
In the header section design, I have three parts. Menu; upper left, gallery; lower left and Logo right. So in my stylesheet, I created three parts. The problem I am having is logo is not centered as in the design (check the attachment). I could not figure why not. Looking for suggestions.
http://www.refinethetaste.com/AT/ Similar TutorialsI'm having trouble with creating a nav bar in css. The code I'm using is this for the html: Code: <div id="wrap"> <div id="nav"><a id="home" href="#" title="home"><span>home</span></a> </div> </div> <div id="bottom"></div> </div> and this for the css: Code: @charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x; } #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; } #wrap { background-color: #FFFFFF; border-color: #660000; border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; } #nav { height:50px; } #home { display: block; width: 226px; height: 50px; background: url("home.gif") no-repeat 0 0; } #home:hover { background-position: 0 -50px; } #home span { display: none; }
The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you. Im having issues positioning a div that contains a background image. The idea is to have the image positioned in the lower right hand corner of the screen. I get it there, but then the problem is that the image floats to the height of the div it contains. i need it to just be in the bottom right hand corner. how can I do this? here is the page, im so embarrased to have to ask this but i swear, the CSS people could not have made this more confusing if they tried. http://www.doublethinkdesigns.com/main.php I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div. In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning. I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape? Code:
<div id='container'>
<div id='first'></div>
<div id='second'>All of the images are loaded here.</div>
<div id='third'></div>
</div>
Code: #img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
display: block;
border: 3px solid #B8860B;
width: 100px;
height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
margin-left: 10px;
}
#img1 {
margin-top: 60px;
}
#img2 {
margin-top: 10px;
}
#img3 {
margin-top: 10px;
}
#img4 {
margin-top: 10px;
}
#img5 {
margin-top: 10px;
}
#img6 {
margin-top: -590px;
margin-left: 125px;
}
#img7 {
margin-top: -136px;
margin-left: 240px;
}
#img8 {
margin-top: -76px;
margin-left: 355px;
}
#img9 {
margin-top: 10px;
margin-left: 380px;
}
#img10 {
margin-top: 10px;
margin-left: 355px;
}
#img11 {
margin-top: -87px;
margin-left: 240px;
}
#img12 {
margin-top: -125px;
margin-left: 125px;
}
#img13 {
margin-top: 30px;
margin-left: 305px;
}
#img14 {
margin-top: 10px;
margin-left: 365px;
}
Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help! I'm trying to adjust the location of the "main menu" on this page he http://www.jeditemplearchives.com/hasbrodb/welcome.php Currently, it is set in reference to the side of the browser in this CSS code: Code: .menuContainer
{
position: absolute;
top:113px;
right:210px;
margin: 10px;
margin-top: 50px;
}
I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links: Code: #header ul.headerLinks
{
list-style-type: none;
margin: 0px;
padding: 10px;
position: absolute;
right: 0px;
top: 95px;
white-space: nowrap;
}
Thanks for any suggestions anyone comes up with! I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am. I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header. I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end. I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window. I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning. My HTML is: Code: <body> <div id="header"> <div id="header_ads"> <?php display_banner() ?> </div> <h1 id="heading"><span class="invisible">This is the heading</span></h1> </div> </body> My CSS is: Code: * {margin:0;padding:0;}
body {width:100%}
.invisible {visibility:hidden;}
/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}
#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}
#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}
The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized... I would greatly appreciate any help! I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such. Can anyone help make suggestions as to the best way of achieving this? Here is some of my css code which is also viewable on the website which is located at: 8< snip >8 Code:
#container
{
margin: 1em 4em 1em 4em;
/* width: 750px; dynamic width */
text-align: left;
background: #FFFFCC;
border: 2px solid black;
}
#menu
{
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
font-family: Verdana;
font-size: 12px;
width: 150px;
display: inline;
}
#content
{
float: right;
width: 20em;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
/* margin-left: 170px; */
padding-top: 5px;
padding-left: 20px;
padding-bottom: 20px;
border-left: 2px solid black;
height: 100%;
}
Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox. BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work. Hey guys, Here's my problem: http://www.3rdcoastpc.com/moonstoys/ Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design. Here's my css: http://www.3rdcoastpc.com/moonstoys/main.css and the HTML: http://www.3rdcoastpc.com/moonstoys/index.html Thanks in advance! Dustin 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 This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; } TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; } A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; } A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; } A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; } A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; } #poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px} #poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold } select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; } .pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline} .pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none} body { SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA; ; background-color: D8E0E9 } FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; } TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )} And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at: http://www.getbrightstar.com/v2/ And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing. Thanks, -Daniel I'm trying to manipulate a stylesheet to make elements appear and disappear on an HTML form. The code I've adapted from various sources works fine on non-IE browsers and sort of works on IE but there's something I don't understand and can't get to work. My page starts: Code:
<style ID=\"xyzzy\" TYPE=\"text/css\">
</style>
<SCRIPT TYPE=\"text/javascript\">
<!--
function setClassAttr(c, a, v) {
var agt=navigator.userAgent.toLowerCase();
var e;
// Style sheet management depends on browser.
// See URL or URL
if (agt.indexOf('gecko') != -1) {
e=document.getElementById('xyzzy');
e.sheet.insertRule(c + ' { ' + a + ': ' + v + '}',
e.sheet.cssRules.length)
}
else if ( (parseInt(navigator.appVersion)>=4)
&& (agt.indexOf('msie') != -1) ) {
document.styleSheets['xyzzy'].addRule(c, a+':'+v);
}
}
...
And I use this to set "display" to "block" or "none" for subordinate elements when a checkbox is checked or unchecked. As I said, this works for non-IE browsers but in IE, I click the first checkbox and nothing appears to happen. If I then click the background of the document, the elements appear. I've searched the web and MSDN for some way of flushing the stylesheet change or generating a Click from JavaScript and I can't find anything. I tried disabling and reabling the stylesheet and it didn't help. I tried moveBy(0,0) and it didn't help. Is this a bug in IE or in my understanding of what should happen? If the former, how can I work around it? Can I generate a Click from JavaScript somehow? Redraw the window somehow? If the latter, what am I missing? TIA. Greetings! I seem to have some problems with the hover pseudo-class in IE6. I have tried many combinations but cannot get the color to change on a hover. The other attributes seem to work ok, such as background color, cursor, etc. When I place the COLOR attribute in, IE6 just seems to ignore it. here are the significant snippets of the CSS: This is at the very top of the CSS external..note that the color that is desired on hover is #0000FF or blue: Code:
A:link {color: #FFFF00; text-decoration: none}
A:visited {color: #FFBF00; text-decoration: none}
A:hover {color: #0000FF; text-decoration: none}
A:active {color: #C0FFC0; text-decoration: none}
I am using relative positioning for my "menu" elements, so I created a CSS block for each item that results in the following: Code:
#home, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -200px;
left: -390px;
text-decoration: none;
}
#aboutus, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -170px;
left: -460px;
text-decoration: none;
}
#services, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -140px;
left: -553px;
text-decoration: none;
}
#faqs, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -110px;
left: -682px;
text-decoration: none;
}
#contact, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -97px;
left: 170px;
text-decoration: none;
}
As can be seen the base color or starting color of the menu item is #CC0000 (red). The actual HTML is very simple: Code: <a id="home" href="index3.html">Home</a> <a id="aboutus" href="aboutus.htm">About Us</a> <a id="services" href="services.htm">Our Services</a> <a id="faqs" href="faqs.htm">Questions</a> <a id="contact" href="contactus.htm">Contact Us</a> What now happens, is that each menu item displays in RED, but when you hover over it, the text does not change color to the BLUE that I want. It just remains RED. Yet, when I add an attribute such as "background-color: green" to that HOVER directive, it works fine, it just wont change the text. Is this one of those Microsoft IE problems, or am I doing something wrong?? Thanks, in advance for your help! Kork Hey, First off, please check out: identityrocket.com/website/index.php Notice the huge negative space just above the big orange button in the bottom left corner. I can't get rid of that space or seem to align it properly. I'm getting so frustrated because it is probably something small. Any help would be tremendously appreciated. Thanks, Ian. Hello, this is my first time here so not really sure how to ask for help so i am just going to poste the html/css code here and say what i want to say and hope no rules will be broken This is the body of the html: <body> <div id="wrap"> <div id="logo"><img src="images/logo.jpg"/></div> <div id="header"> <ul> <li id="home"> <a href="#"><img src="images/home_button.jpg"></a></li> <li id="about"> <a href="#"><img src="images/about_button.jpg"></a></li> <li id="fun"> <a href="#"><img src="images/fun_button.jpg"></a></li> <li id="gallery"> <a href="#"><img src="images/gallery_button.jpg"></a></li> <input type="text" name="s" id="s" value="Start search" /> </li> <li id="search"><img src="images/search.png" alt="search" /> </ul> </div> <div id="main"> <div id="primary"> <div class="post_item"> <h2> My First Post</h2> <p class="meta"> 1/4/2020 Insp </p> <p> This is text This is text This is text This is text This is text </p> </div> </div> <div id="secondary"> <div class="secbox"> <h3>News</h3> <img class="featuredImage" src="images/left.png" alt="Left" /> <p> Left arrow </p> <div class="prevNext"> <a href="#"><img src="images/right.png" alt"More"/></a> <a href="#"><img src="images/left.png" alt"Less"/></a> </div> <div class="secbox"> <h3>Recent Stuff</h3> <ul> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> </ul> </div> </div> </div> </div> <div id="footer"></div> </div> </body> And this is the css: a:hover {text-decoration:underline;} input{background:#696969; border:1px solid #c3c3c3; color:#cbcbcb; paddind:3px;} input:focus, input:hover{background: #ededed; color: #4e4e4e; } /* MAIN STYLES */ body{background:red url(images/bg_main.jpg) repeat-x;} #wrap{width:1000px; margin:auto; } #header {background: url(images/bar.jpg); width:100%; height:50px; float:right; } /*Navigation*/ #header ul{overflow: hidden; padding-left: 30px;} #header ul li{float:left; padding-right: 15px; } #header ul li a{color:#cbcbcb; position:relative;} /*SEARCHBOX*/ #header ul li#search{float:right; padding-top:10px;} #header input{margin-left:230px; margin-top:15px;} /*MAIN CONTENT*/ #main #primary {float:left;width:600px;} #main #secondary{float:right; width:180px;} #main #primary .post-item{background:#ededed; margin-bottom: 28px; border:1px solid;} Now, basically what i am trying to do is set the width of the "#header" to 100% but it seems to be stuck at 1000px ...won't go over that. can someone please help Hello! I've been searching the internet for a solution to this for quite a while now but I've found nothing. I've also tried some methods to fix it but nothing seems to be helping me. I might just be stupid because I'm not terribly good at this. Here goes. Scenario: Firefox not reading list items as hyperlinks even though it's <ul><a><li>Hello World</li></a></ul>. where I use something like li{width:200px;height:100px;} firefox only interprets the text as a hyperlink, but not the list item field. This is the actual example: Markup: Code:
<UL id="menu">
<LI> Product
<UL>
<A href="index.php?m=product1"><LI>PRODUCT1</LI></a></LI>
</UL>
</LI>
</UL>
CSS: Code:
#menu UL LI UL A{
height: 100px;
width: 500px;
}
#menu UL LI UL LI:hover{
background: red;
}
This results in the background shifting to red when I hover over the list item, HOWEVER firefox does not interpret the list item as a hyperlink, even though it's inside <a></a> where Opera and Chrome both do. Any suggestions on how to solve this? I apologize for bad grammar. EDIT: To make the problem obvious I attach a picture. URL hello...i have the following div Code:
#Menu {
float: left;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A6AE62;
border-top:0px solid #A6AE62;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and im trying to put something behind it that is the same colour but stretches from the top of this one to the bottom of the screen but am not succeding at all can anyone please help... i have tried a few ideas.... this is my current one...not sure if it is my most sensible one r not really but still here is the code.. Code:
#BehindMenu {
width:160;
background-color:#A6AE62;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}
any help would be appreciated.. thanks RF after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem. http://funnyguys99.tripod.com/index.htm There are better details of the errors on my page, if you didn't quite get the problem. Hey I have a dashed border to the right of my menu, i was wondering how i can make it reach the bottom of my page, without having to fill up all the content example of what it looks like: Navigation | | link | link | link | Example of what i want it to look like Navigation | | link | link | link | | | | | | bottom of page. This is the Css code: DIV#sidebar { LEFT: 0px; WIDTH: 12em; POSITION: absolute; TOP: 0px; HEIGHT: auto; BORDER-RIGHT: black 1px dashed; } I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. |
|||||||