|
CSS - Trouble Positioning A Menu On The Page
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! Similar TutorialsI'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'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. 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/ 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;
}
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! Hi, I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it. Here is the link: http://www.greatstreetsstlouis.net/...d=32&Itemid=204 I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you. Here is the code: Code: .extmenu .modulebdr div div div #mainlevel {
font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
background: url(../images/bullet_arrow_right.gif) left center no-repeat;
padding-left:9px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
padding-left:9px;
}
.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
color:#666666;
margin-left:14px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active {
padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active {
margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current {
margin-left:10px;
}
.extmenu .modulebdr div div div ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current {
margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel {
margin-left:7px;
}
Hello. My site works fine in Firefox 3 of course not sure about IE 7 but in IE 6 the menus bar links are not dropping down ie About Us, Services ect. What did I miss? Site Link Matt Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. Hello. After days of searching, I have found my ideal menu system. I am trying to mimic it with some minor changes, due to the layout I already have for my website. I think the biggest problem is the fact that my second level drop down menu needs to be contained inside my first level menu boxes. These boxes also expand based on screen width. Here is the barebones version of Stu Nicholl's 'Simple Drop Down Menu': 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>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
And here is my implementation of it. I was thinking the problem could be with the absolute positioning, but I really don't know anymore... 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>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
html {
margin:0;
padding:0;
}
body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
/* Top Navigation */
#topNav {
margin: 10px 0px;
border: 1px solid #ff0;
}
#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}
#nav {
margin: 0px 0px 0px 155px;
padding: 0;
border: 1px solid #0f0;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
margin-left: 8px;
float: left;
/*
position: relative;
z-index: 100;
*/
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;
background-repeat: no-repeat;
background-position: 50% 100%;
}
#nav table {
/*
position:absolute;
z-index:80;
*/
border-collapse: collapse;
left: -1px;
top:25px;
}
#nav a {
display: block;
font-size: 1.5em;
color: #FFF;
background: #c7013f;
text-decoration: none;
text-align: center;
}
#nav ul li:hover a, #nav ul a:hover {
background-color: #235;
}
#nav ul ul {
margin: 0;
padding: 0;
visibility: hidden;
border: 1px solid #0f0;
/*
position: absolute;
*/
}
#nav ul ul li {
margin: 0 auto;
height: 1em;
width: 95%;
}
#nav ul li:hover ul, #nav ul a:hover ul{
visibility: visible;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />
<input type="submit" value="Search" />
</form>
</div>
<div id="nav">
<ul>
<li>
<a href="#">Foundation<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Volunteer<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<div class="clear"> </div>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
</html>
Sorry for the lengthy code, but it was the simplest way to explain my exact situation. Thanks for any help you can give me! I've created my first attempt at a pure CSS drop-down menu using an AlistApart article as a guide. It works great in Firefox, but in IE the menu's are reloading the background image and the list bullet images each time you move to a new link in the drop down. The page is here Any ideas? Here is the CSS for the Menu (not cleaned up so pardon it's rag-tagness): Code: ul {
padding: 0;
margin: 0;
list-style: none;
}
/* First Level */
li {
float: left;
position: relative;
width: 10em;
}
li#first {
border-left-width: 2px;
}
li#last {
border-right-width: 2px;
}
/* Second Level -- Drop Downs */
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: url(../images/backgroundvert.gif) bottom left no-repeat;
padding: 3px 0 3px 8px;
border-right: solid 1px #777777;
}
/* Reset for all non-IE Browswers*/
li > ul {
top: auto;
left: auto;
}
/* Show Second Level when First Level is Rolled Over */
li:hover ul, li.over ul{ display: block; }
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
#nav a {
font-weight: bold;
color: #149AF1;
font-size:13px;
}
#nav a {
text-decoration: none;
}
/* Drop Down Menu Links */
#nav li li a {
display: block;
font-weight: normal;
color: #149AF1;
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet.gif);
background-repeat:no-repeat;
}
#nav li li a:hover {
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet2.gif);
background-repeat:no-repeat;
text-decoration: underline;
}
#navs {
border:1px 0 0 0;
border-right: 0;
width: 100%;
padding-left:4px;
height:20px;
padding-top:3px;
}
.nonlink {
font-weight: bold;
color: #149AF1;
font-size:13px;
cursor:default;
}
Hi, I'm breaking my head over IE6.0: adjusted this page and it now works at least in IE 5.0, 5.5, Opera, Firefox but in IE6.0 the damn thing doesn't align vertical in a right way and the menu doesn't scroll with the page anymore. Anybody who can tell me what's upsetting IE6.0? I don't have a clue no more. Cheers, Ziggy tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.html tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.css For some reason, it refuses to rollover... in the actual site I've tried implementing it, all of them come up in the secondary start (black text, blue bg) rather than the default state (white text, transparent bg). Neither times does it actually "rollover". What am I doing wrong? Code from: webvamp[.]co[.]uk/blog/coding/graphical-css-rollover-menu/#example I am having problems with my xhtml (css here). As you can see, the frog is pushing the menu (vert1 in the css) down. I am also told that the news (vert2) is being pushed down in IE6...can anyone help? I'm having trouble for some reason with a Navigation Position. For some reason it defaults 40px from the left and I can't make it appear left. code as follows: #nav { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #nav li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; font: bold 12px arial; } #nav li a { display: block; float: left; margin: 0px 0px 5px 0px; padding: 6px 0px; width: 108px; color: #FFFFFF; text-align: center; text-decoration: none; } #nav li a:hover { background: #333333; color: #FF0000; } #nav div { visibility: hidden; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100px; border: 1px solid #5970B2; text-align: center; font: 12px arial; font-weight: bold; } #nav div a { position: relative; display: block; margin: 0; padding: 7px 0; width: 100px; text-align: center; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial; font-weight: bold; } #nav div a:hover { background: #49A3FF; color: #FFF } Any help would be appreciated. Mike I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time Hello there, I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified. So far I have been able to make the CSS compatible with both firefox and IE. So far I've got Code: <table width="100%" bgcolor="#666666"> <tr> <td> <img src="images/logo.gif"> </td> <td> <div class="menu" style="text-align:center"> <div class="outerFirst"><a href="index.php"><span>Home</span></a></div> <div class="outerFirst"><a href="index.php"><span>Services</span></a></div> <div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div> <div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div> <div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div> <div class="outerFirst"><a href="index.php"><span>About</span></a></div> </div> </td> </tr> </table> and for the CSS Code:
#menu {
height: 54px;
margin: 3em 0; padding:0 1em;
border-bottom: 0px solid black;
}
div.outerFirst {
float: left;
width: 100px; height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
div.outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:100px; height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
div.outerFirst span {
height: 54px;
display: block;
margin:0; padding: 25px 0px 0px 0px;
}
I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it. Any help with the CSS and html (if I've missed something) would be awesome. Thanks! - K I am making a horizontal menu with dropdown submenus. It is partly coded using Dreamweaver and partly by hand. The menu works fine under IE but in Firefox it is off by a few pixels. I searched the forums and found that the problem was with the way IE rendered <div> versus the way Firefox does, but I wasn't able to solve the problem. Could somebody also tell me how to switch from Quirk mode to standard? for complete code visit http://www.ithaca.edu/students/sgarg1/website Any help is appreciated **************************************** index.html Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sustainable Tompkins</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function start()
{
document.getElementById('layer1').style.visibility="hidden";
document.getElementById('layer2').style.visibility="hidden";
document.getElementById('layer3').style.visibility="hidden";
document.getElementById('layer4').style.visibility="hidden";
document.getElementById('layer5').style.visibility="hidden";
}
function changeOver(theNode)
{
theNode.style.background="#ffffff";
theNode.style.color="#666666";
}
function changeOut(theNode)
{
theNode.style.background="#666666";
theNode.style.color="#ffffff";
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
//-->
</script>
<style type="text/css">
<!--
.style11 {font-family: "Times New Roman", Times, serif}
.bullet {list-style-type: disc;}
-->
</style>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/mainStyles.css" type="text/css">
</head>
<body onLoad="start();">
<center>
<table width="801" border="1" cellpadding="0" cellspacing="0" onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')">
<!--DWLayoutTable-->
<tr>
<td height="132" colspan="3" valign="middle"><div align="center"><span class="style3">SUSTAINABLE TOMPKINS</span>
</div>
<div align="center"></div></td>
</tr>
<tr>
<td height="29" colspan="3" valign="top" class="above_menu"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="48" colspan="3" valign="top"><!-- InstanceBeginEditable name="Menu" -->
<table width="800" border="1">
<tr bgcolor="#FFFFFF">
<td width="70" id="mi0" class="menu" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi0'));" onMouseOut="changeOver(document.getElementById('mi0'));">
Home
</td>
<td id="mi1" class="menu" width="89" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi1'));" onMouseOut="changeOver(document.getElementById('mi1'));">About St
<div id="Layer1" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td id="mi1_1" onMouseOver="changeOver(document.getElementById('mi1_1'));" onMouseOut="changeOut(document.getElementById('mi1_1'));">* Mission</td>
</tr>
<tr>
<td id="mi1_2" onMouseOver="changeOver(document.getElementById('mi1_2'));" onMouseOut="changeOut(document.getElementById('mi1_2'));">* Coordinators</td>
</tr>
<tr>
<td id="mi1_3" onMouseOver="changeOver(document.getElementById('mi1_3'));" onMouseOut="changeOut(document.getElementById('mi1_3'));">* Sponsors/Partners</td>
</tr>
<tr>
<td id="mi1_4" onMouseOver="changeOver(document.getElementById('mi1_4'));" onMouseOut="changeOut(document.getElementById('mi1_4'));">* History</td>
</tr>
</table>
</div>
</td>
<td id="mi2" class="menu" width="141" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer5','','hide','Layer3','','hide','Layer 4','','hide');changeOut(document.getElementById('mi2'));" onMouseOut="changeOver(document.getElementById('mi2'));">
ST Initiatives
<div id="Layer2" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi2_1" onMouseOver="changeOver(document.getElementById('mi2_1'));" onMouseOut="changeOut(document.getElementById('mi2_1'));">Salons</td>
</tr>
<tr>
<td id="mi2_2" onMouseOver="changeOver(document.getElementById('mi2_2'));" onMouseOut="changeOut(document.getElementById('mi2_2'));">Surveys</td>
</tr>
</table>
</div>
</td>
<td id="mi3" class="menu" width="143" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','show','Layer 4','','hide');changeOut(document.getElementById('mi3'));" onMouseOut="changeOver(document.getElementById('mi3'));">
Helpful Links
<div id="Layer3" onMouseOut="MM_showHideLayers('Layer3','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi3_1" onMouseOver="changeOver(document.getElementById('mi3_1'));" onMouseOut="changeOut(document.getElementById('mi3_1'));">Grouped</td>
</tr>
<tr>
<td id="mi3_2" onMouseOver="changeOver(document.getElementById('mi3_2'));" onMouseOut="changeOut(document.getElementById('mi3_2'));">Annotated</td>
</tr>
</table>
</div>
</td>
// Two More instances of the sub menus.
</tr>
</table>
</tr>
</table>
</center>
</body>
</html>
css file Code:
<!--
.style2 {font-size: x-small; color:#666666}
.above_menu{background-color:#0066CC}
.Common{background-color:#0099FF}
.Variable{background-color:#0099ff}
.background {background-color: #93AA39}
.footer {border-bottom-color:#000000}
.content {background-color:#E6FF80}
.style3 {font-size: 36px}
.style5 {color: #666666}
.style6 {color: #FFFFFF}
.style7 {font-size: 9px}
.style8 {font-size: 14px;color: #FFFFFF;}
.style9 {font-size: 14px}
#Layer1 {position:absolute; width:143px; height:74px; z-index:1; left: 180px; top: 207px;}
#Layer2 {position:absolute; width:143px; height:24px; z-index:2; left: 276px; top: 207px;}
#Layer3 {position:absolute; width:143px; height:36px; z-index:3; left: 423px; top: 207px;}
#Layer4 {position:absolute; width:200px; height:145px; z-index:4; left: 572px; top: 207px;}
#Layer5 {position:absolute; width:143px; height:36px; z-index:3; left:736px; top: 207px;}
#mi1_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_2 {background-color:#666666; text-align:left;color:#ffffff;margin:0}
#mi1_3 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_4 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_2 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi3_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi3_2 {background-color:#666666; text-align:left; color:#ffffff}
#mi4_1 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_2 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_3 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_4 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_5 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_6 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_7 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_8 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi5_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi5_2 {background-color:#666666; text-align:left; color:#ffffff}
a:hover {color: #666666;text-decoration:none;}
a{text-decoration:none; color:#FFFFFF}
td:hover{color: #666666}
.menu{text-align:center; color: #666666}
websitewebsite Hey guys. New to the forum and CSS in general! So that said, sorry if this seems like a noobie issue, but would love and appreciate a helping hand. Here's the situation... Was contracted to revamp a website of a local artist. This was a very low budget job and had to bang out this site quickly to cover the little money that was available ($500). I got it done and the client is happy, but i'm noticing a positioning issue between IE and Firefox. Strangely, IE is displaying the page the way i would like and Firefox is not (backwards huh?). Anyway, the problem is the sub navigation UL appears to be indented about 50px. I want it to line up with my table. Anybody have any ideas? Also, I understand that IE sometimes doubles padding/margin values for floated div's, but in this case I like the way it is dispalying in IE. It seems too crammed in Firefox. I'm not sure exactly how or why this happens, but would love to know what i'm doing wrong so that I can have a little bit of cross-browser consistency. Is this just a pipe dream? lol. Here is the site: w w w . mallykhorasantchi.com/gallery.htm (sorry for the spaces, but I can't post a url??) Thanks a bunch for your help. Cheers, George iHelp, llc |
|||||||