|
CSS - Positioning Completely Being Ignored
Please look at this page in Firefox:
http://www.pacunionsonoma.com/real-estate-listings.asp?city=Santa-Rosa Notice the links up to the top area that read Showing Appointment, Listing Images, etc. No matter what I do I can't get them to appear within the respective property listing div. It must be some inheritance issue but I just can't figure it out. Thanks. Similar Tutorialshttp://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code:
#navbar ul {
margin: 10px auto auto auto;
padding: 6px;
list-style-type: none;
text-align: left;
background-color: #000;
font-family: arial;
}
#navbar ul li {
display: inline;
font-family: arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #000000;
font-family: arial;
}
#navbar ul li a:hover {
color: #000000;
background-color: #ffffff;
font-family: arial;
}
And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful. My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0}
#wrapper {
border: #f09 dashed 3px;
background-color: yellow;
text-align: left;
margin: 50px auto;
padding: 0;
width: 810px;
}
#header {
border: blue dashed 1px;
background-color: pink;
padding: 0px;
margin: 5px;
}
#header p {
display: inline;
}
#intro {
border: 1px solid black;
background-color: purple;
}
#intro p{
font: bold 80% arial;
position: absolute;
left: auto;
top: 85px;
color: #fff;
padding: 15px 0 0 435px;
margin: 0 0 25px 0;
width: 350px;
line-height: 1.4em;
border: 1px red solid;
}
#nav {
background-color: #09f;
border: solid red 1px;
min-height: 30px;
}
ul {
float: right;
list-style-type: none;
margin: 10px 0;
}
li {
font: bold 12px arial;
display: inline;
padding: 0 17px 0 17px;
border-right: 1px solid white;
}
span {
position:absolute;
top: -100000px;
}
#main {
border: thin green solid;
padding: 25px 25px 0 25px;
background-color: #eee;
min-height: 1000px;
}
div.work {
float: left;
padding: 10px;
/*border: thin red solid;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
margin: 0 0 25px 0;
}
div.work img {
display: inline;
border: 4px black solid;
float: left;
}
div.work p {
margin: 0;
padding: 10px 0 0 25px;
line-height: 1.3em;
font: 100% arial;
float: left;
border: thin purple solid;
width: 400px;
}
div.work h1 {
margin: 25px 0 0 0;
padding: 10px 0 0 25px;
display: inline;
font: 125% arial;
color: #ff8529;
width: 400px;
float: left;
border: thin green solid;
}
div.work h2 {
display: inline;
margin: 0;
padding: 10px 0 0 25px;
font: 85% arial;
width: 400px;
float: left;
border: thin black solid;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link">
<html xmlns="removed link" xml:lang="en" lang="en">
<head>
<title>Page Title here</title>
<link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/>
</head>
<body>
<!--begin overall page wrapper; sets width and centering-->
<div id="wrapper">
<!--begin header-->
<div id="header">
<p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p>
<div id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</div>
</div>
<!--end header-->
<!--begin nav-->
<div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div>
<!--end nav-->
<!--begin main content area-->
<div id="main">
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
</div>
<!--end of main container-->
</div>
</body>
</html>
I've been doing a bit of professional work for just a little while now (about a month and a half) as a summer job, but I'm just completely lost at this point and I have a clue as to how to handle this problem. Programming and styling works fine on my main computer (which has no special mods as far as I know) as well as one of my laptops (well family laptop) However, on my father's work laptop, Both macs as well as the computers for both my clients, the CSS stylesheets aren't working properly at all, almost as if certain commands from the stylesheet are ignored. On my dad's work laptop, one of my DIV tabs (the menu bar) width properties (15%) is almost completely ignored. The width of the DIV is actually extended to the point where it's pushed underneath the main content page. Changing the width value to 0 actually does nothing. I'm at a loss. On both my clients computers the main body DIV min-height value doesn't load properly, creating a small space of colour at the top of the page, while the rest of the actual content is properly placed below it. This div holds the background and "boundaries" for the nav bad and the main content. Both of which are not present. Both my father's work laptop and my clients computers use the latest version of IE.and I get these strange errors. I also get the second error when using Safari on both macs. God I love Firefox... it loads everything properly.... Either way, I'm confused as confused can be. HELP!!!! You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, A friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content. Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code:
body {
background-color: #F6EEC2;
margin: 10px;
padding: 0px;
}
#bannerBox {
background-color: transparent;
background-image: url(gfx/cpp_banner2.jpg);
background-repeat: no-repeat;
border: none;
padding-left: 5px;
height: 80px;
margin: 0px;
}
#leftNav {
position: absolute; left: 10px; top: 100px;
width: 130px;
background-color: transparent;
}
#navBlock {
position: relative; left: 7px;
width: 110px;
background-color: transparent;
border: 1px solid #6B9D98;
}
#main {
background-color: transparent;
position: relative;
margin-top: 5px;
margin-left: 138px;
margin-right: 0px;
border-left: 1px solid #6B9D98;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 137px;
margin-right: 0px;
}
html>body #main {
margin-left: 139px;
margin-right: 0px;
}
#main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
#tagLine {
background-color: transparent;
border: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 50px;
}
IMG {
position: relative;
float: right;
border: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
P,H1,H2 {
margin: 0px 10px 0px 10px;
}
H1 {
font: bold 16px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 10px;
}
H2 {
font: bold 14px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-top: 10px;
padding-bottom: 13px;
}
#leftNav P {
padding-top: 6px;
margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
padding-bottom: 15px;
}
#navBlock P {
font: bold 11px arial;
color: #6B9D98;
padding-top: 1px;
padding-bottom: 1px;
}
#main P {
text-align: justify;
font: 11px arial;
color: #6B9D98;
line-height: 17px;
padding-left: 10px;
padding-bottom: 10px;
}
#main P.head {
font: bold 12px arial;
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P {
font: 12px "arial";
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P.list {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 150px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.list2 {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 180px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.price {
font: 11px arial;
color: #6B9D98;
padding-left: 15px;
padding-bottom: 1px;
}
#tagLine P {
font: italic 11px arial;
color: #6B9D98;
padding-bottom: 3px;
}
#tagLine P.copy {
font:11px "lucida console";
color: #6B9D98;
padding-top: 5px;
}
A.nav:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:visited {
text-decoration: none;
background color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:hover {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.reg:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: none;
}
I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 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 Hi guys, I'm pretty new to web design, so please be gentle. I have an issue with CSS positioning that I'm trying to figure out. After research, I figured out how to align a div to the centre using an external stylesheet. However, I want this div to be positioned at the very top of the page. Currently, it sits approx 100px from the top and I can't figure out how to position it to 0px. Here's my code; body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; } #content { width: 760px; text-align: left; margin: 0 auto; background-color: #000000; top: 0px; } Can anyone help me? Thanks Luke stupid question I have a three column layout I picked up from the web here and there and I am trying to be clever and of course, since I am not a CSS pro...I am blowing it! the css I am messing with is as follows: container holds the three columns and the header and footer. in the header section..which is called #top, I have an image which is the logo for the page. The top is 95 px high. what I wanted to do was split the TOP div into two sections, with the second one starting at 340px from the left and go about 250 px across. naturally, I tried to use: #new_section { margin-left: 323px; margin-right: 0px; margin-top:55px;---bottom of #TOP div--- padding:0px 0px 40px 0px; border-bottom:2px solid #D7C8AC; background-color:#E2DCDC; } all the variations I used either worked in IE and not NS or vice versa. I know it is just a simple positioning issue I am overlooking. any help would be appreciated greatly. thanks! jpm226@comcast.net ************************** #container { width:auto; margin:0px 0px 0px 0px; background-color:transparent; color: #333; line-height: 130%; background-image:url(bg.gif); background-position:left; background-repeat:repeat-y; } #top { padding:0px; height:95px; border-bottom:2px solid #E2DCDC; background-color:#F5F5F5; background-image:url(header.gif); background-repeat:no-repeat; background-position:left; } .text{ padding:4px; fontalatino linotype; color:#000; text-align:justify; } #leftnav { float: left; width: 322px; margin-top:0px; padding:0px; } #rightnav { float: right; width: 214px; margin-top:149px; margin-right:2px; padding:0px; background-color:transparent; /*border-left:1px solid green; border-right:1px solid green;*/ } .news { margin: 0px 10px 0px 10px; background-color:transparent; /*height:235px;*/ border: 2px solid #fff; } #image { margin-left: 323px; margin-right: 0px; margin-top:0px; padding:0px 0px 96px 0px; border-bottom:2px solid #D7C8AC; background-color:#E2DCDC; background-image:url(desk.gif); background-position:right; background-repeat:no-repeat; } #content { margin-left:323px; margin-right: 216px; margin-top:0px; padding:10px 0px 30px 0px; max-width: 36em; border-left:1px solid red; border-right:1px solid red; background-color:transparent; } .content2 { position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ width:auto; min-width:120px; margin:20px 8px 10px 8px; border-top:2px solid #fff; border-bottom:2px solid #fff; background-color:#F5F5F5; padding:10px; z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ } #footer { clear: both; margin: 0; padding:0px; color: #333; border-top: 1px solid #fff; background-color:#EEE8E8; } remove this topic plss. thanks This is a snippet of what I have in my css: Code:
#page-body {
width:100%;
background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
margin:0;
padding:0 0 125px 0;
border:1px solid red;
border-top:33px solid #cfad34;
color:#fff;
clear:both;
}
The css above works great but now I want to include an image in the lower left-hand corner of the page-body also. So while I have something like the following: Code:
<html>
<body>
<div id="page-body>
.....
</div>
</body>
</html>
I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside. Any suggestions? Thanks in Advance. Hello friends, Need some help with CSS layer positioning, which for the last couple of days has been the cause of much frustration. I am updating my site, and am converting some of my code to be more semantic. The test page, which looks 'right' is here. The semantic version, which now places the footer and sidebar within their own divs is here (I have removed the javascript and other text to keep things as simple as possible): The problems I am experiencing: The side bar, shaded blue for clarity is now 'outside the box', see the first link to see how it should be; There is a gap between the bottom of the extra div and the top of the footer div; The positioning of the sidebar is affecting the header/nav - try mousing over 'contact'; In short, I am trying to convert my existing layout to this, but can't seem to get there. Here is what I am striving for: Code: |------------------------------------ | Navigation | |------------------------------------ |Breadcrumbs <p> | ------------------------------------- | | | | Content | Sidebar | | | | ------------------------------------- | Optional Extra | ------------------------------------- | Footer | ------------------------------------- Any help much appreciated! Okay I need help with this CSS, I am very new with CSS I am having trouble positioning this Navigation Bar to the right, it is stuck to the left, and I need it to be so it will always stay on top of everything. My HTML Page The Code. Code: <head><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script SRC="http://mytubeforum.webs.com/jquery-1.3.2.min.js"></SCRIPT>
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};
$(document).ready(function() {
nav();
});
</script>
<style type="text/css">
/*NAVBAR CODE*/
#nav{
width: 460px;
padding:460px;
float: right;
align: right;
position: absolute;
background:url(http://i34.tinypic.com/5bzbmd.png);
background-repeat: no-repeat;
height:38px;
line-height:32px;
padding:0 10px;
}
#nav ul,
#nav ul li
{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 30px 0 10px;;
margin-top:3.5px;
display:block;
}
#nav ul li a:hover{
color:#3b414c
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:0 20px;
clear:both;
border-bottom:solid 1px #DEDEDE;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#nav ul li ul li a:hover{
color:#3b414c;
background:#EBEFF7;
}
.submenu {
position: absolute;
width: 140px;
background: #efefef;
padding:20px;
border:solid 1px #b2b2b2;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
padding: 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">MyTube</a>
<ul class="submenu">
<li><a href="/forum.htm">Home</a></li>
<li><a href="/portal.htm">Portal</a></li>
<li><a href="/arcade-f12/">Arcade</a></li>
<li><a href="/calendar.htm">Calendar</a></li>
<li><a href="/search.forum">Search</a></li>
<li><a href="/faq.htm">FAQ</a></li>
<li><a href="/memberlist.forum">Members</a></li>
<li><a href="/groupcp.forum">Groups</a></li>
<li><a href="/MyTube-Chat-h2.htm">Chatbox</a></li>
</ul>
</li>
<li><a href="#">Messages</a>
<ul class="submenu">
<li><a href="/msg.forum?folder=inbox">Inbox</a></li>
<li><a href="/msg.forum?folder=sentbox">Sentbox</a></li>
<li><a href="/msg.forum?folder=outbox">Outbox</a></li>
<li><a href="/msg.forum?folder=savebox">Saved Mail</a></li>
</ul>
</li>
<li><a href="#">Profile</a>
<ul class="submenu">
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile">Information</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=preferences">Preferences</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=signature">Signature</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=avatars">Avatar</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=friendsfoes">Friends & Foes</a></li>
</ul>
</li>
<li><a href="#">Log In | Out</a>
<ul class="submenu">
Under Construction<hr>
<li><a href="/profile.forum?mode=register">Register</a></li>
<li><a href="/login.forum?connexion">Login</a></li>
</ul>
</li>
</div>
Please Help Me, Thank you. Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer. Here's a quick show of the error: URL Here's the HTML with CSS below: Code: <div id="Table_01"> <div id="hdr-main_"> <img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" /> </div> <div id="hdr-mnu-left_"> <img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bg_"> <img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" /> </div> <div id="hdr-mnu-right_"> <img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bottom_"> <img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" /> </div> </div> </body> </html> I've also pasted the CSS code: Code: #Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#hdr-main_ {
position:absolute;
left:228px;
top:41px;
width:557px;
height:161px;
}
#hdr-mnu-left_ {
position:absolute;
left:228px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bg_ {
position:absolute;
left:233px;
top:202px;
width:547px;
height:20px;
}
#hdr-mnu-right_ {
position:absolute;
left:780px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bottom_ {
position:absolute;
left:228px;
top:222px;
width:557px;
height:5px;
}
Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me Thanks all... Jason Hello all! Well I'm just designing my personal website, and I'm encountering a problem with positioning div elements. (This is going to be a very basic question that I couldn't find anywhere.) To understand the exact problem I am having, here are the links: lightblu.com/4/1.html lightblu.com/4/2.html Notice in the first one, it is perfectly fine. In the second, when I add more text, it just overlaps everything, including the footer and the bg color. It only works fine when I add more text on those right boxes. So question is, what should I do so that when I add text either on the left side OR on the right side, the background expands accordingly? Thanks for all your help! Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox... what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY) page is he http://www.gr-p.com/test2.html what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to |
|||||||