|
CSS - Help With Sub Nav Functionality And Positioning.
Hey everyone,
I'm learning CSS right now and recoding my existing site to use it. I've come into a few stumbling blocks and could use some help. First off, the site is meldstudios.com/newcode I am having a problem getting my sub nav to show up. I need it to function as well, but right now I'd just like to see it. In addition, the html text that is below the divs is supposed to overlay on top of it. Right now, that isn't happening and I believe it is pushing the footer out of whack. I'm not sure if I am not calling it in correctly in the html or what, but something is off. Finally, the thumbs and both navs have rollover states. I have read about using a transparent gif to set the hover states and visited states, but do people still use gif's? What is the best way to go about creating rollovers in CSS without the need for java script. My live site is meldstudios.com Take a look as that may explain what I am trying to do. Any help is greatly appreciated. I have included the parts of the CSS that are relevant below. #pagenav { width: 599px; height: 35px; margin-top: 45px; z-index: 100; float: left; } #about { background:url(images/aboutButton.jpg) no-repeat top left; float: left; width:113px; height:35px; } #portfolio { background:url(images/portfolioButton.jpg) no-repeat top left; float: left; width:120px; height:35px; } #resume { background:url(images/resumeButton.jpg) no-repeat top left; float: left; width:96px; height:35px; } #downloads { background:url(images/downloadsButton.jpg) no-repeat top left; float: left; width:134px; height:35px; } #contact { background:url(images/contactButton.jpg) no-repeat top left; float: left; width:133px; height:35px; } /*------------ sub nav --------------------------------------------------- */ #subnav { width: 598px; height: 23px; margin-top: 50px; z-index: 101; } #identity + branding { float: left; width:188px; height:23px; background-image: url(images/identityButton.jpg); background-repeat: no-repeat; } #print + advertising { float: left; width:171px; height:23px; background-image: url(images/printButton.jpg); background-repeat: no-repeat; } #applied design { float: left; width:127px; height:23px; background-image: url(images/appliedButton.jpg); background-repeat: no-repeat; } #web design { float: left; width:114px; height:23px; background-image: url(images/webButton.jpg); background-repeat: no-repeat; } /*------------ content --------------------------------------------------- */ #content { width: 902px; height: 495px; height: 650px; float: left; margin-left: auto; margin-right: auto; } #leftColumn { width: 599px; height: 495px; float: left; } #largeGraphicArea { width: 599px; height: 363px; float: left; } #smallBoxWithText img { width: 599px; height: 142px; float: left; position: absolute; top: 0px; left: 0px; z-index: 1; } #smallBoxText p { width: 400px; padding-left: 20px; padding-right: 20px; z-index: 3; float: left; text-align: left; } /*------------- right column --------------------------------------------------- */ #rightColumn { width: 301px; height: 495px; float: left; } #titleGraphic { width: 301px; height: 361px; float: left; z-index: 1; } .titleGraphicText p { width: 250px; padding-left: 10px; padding-right: 10px; z-index: 2; float: left; } Similar Tutorialsso im working on the relatively lame site for some pocket cash, and ive run into a weird bump in the road with CSS. if one uses safari or firefox on a mac or firefox on a PC and goes to this page they will notice that rolling over one of the squares in the menu will cause a colored border to appear. this works on all browsers ive tried except windows IE. im stuck, ive tried some thing, but have never had this problem in the past. i have included the css in the index page, so one can view it w/ by viewing the source. Hello i created a website for my trainer and i am having pretty much trouble fixing a bug with the menu li:current and the compatability in various browsers. If someone please could check my website for errors and correct them? Its really a small website. I dont know what to do anymore, i tryed so much and nothing seems to work. Thanks in advance. my site is located at Code: http://hexagon.110mb.com/index.html ok, i really am at my wits end here and could use any assistence you guys can give. this is a little complicated to explain, but here goes. i have this page: http://www.woowooberry.com/photo.html the page uses a style sheet called style.css. the problems: 1. i just realised that my ie6 browser at work makes this page use an old version of the stylesheet, even AFTER i uploaded the new one to my site via ftp. when checking the site at home, this is not an issue. but it is an issue on my work computer and every other computer at work where the site is loaded for the first time! ghosts in the shell? i have no clue. 2. the little boxes on the above page represent links to images. the boxes should be a dark grey and only turn blue AFTER being visited. this does not happen on any computer. or they are grey, for about one round...meaning if i refresh the page they all turn blue without being visited. the following is the TRUE css i have for it (which, from problem #1, may not be the css your computer uses...as i said, i do not know): Code:
.newbutton:link {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #a4a4a4;
TEXT-DECORATION: none
}
.newbutton:visited {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #00f4e0;
TEXT-DECORATION: none
}
.newbutton:hover {
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #f44b39;
TEXT-DECORATION: none
}
.newbutton:active {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: tahoma,arial;
BACKGROUND-COLOR: #00f4e0;
TEXT-DECORATION: line-through
}
ok. couple of other problems but i'll leave that for later. these two are the major ones. again, any help you guys can give would greatly lower my blood pressure at this point. thanks. I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible. I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav. I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover. I thought I could then do this as a single li but I have not had success. What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I am a beginner and I'm having trouble with getting the paragraph elements to behave the way I want them to in the header section of the page at the link below. I have the address paragraph staying in position. The hours paragraph, however, doesn't seem to be contained by the header div. It moves to the left as the browser window is resized to be larger. I tried adding right margin to the address paragraph but the hours paragraph doesn't seem to recognize that either. I know I'm doing something wrong but I can't seem to figure out what. The small weather widget has a similar, but not quite the same, problem. It moves to the right. (openrangeimaging(dot)com/Test/Gravity-Test/index-test01.html) I got an error saying I couldn't include links. I read the forum rules and didn't notice anything about that. Hope I'm not breaking the rules here. I'm hoping someone with css expertise can help me get this set up correctly. >>EDIT<< I was, (by luck), able to achieve what I wanted by adding the position: relative to the #container div. The file in link above has been updated with this change. I am a beginner at css. I aspire to have the most "correct" and cleanest code and conform to best practices. If what I have done is still not best practice and should be done in a different way I definitely want to know how it should be styled. Can anyone comment on if what I have done is proper technique? >>End Edit<< Thanks in advance for any help. hi! how to make footer similar to header? e. g. i need it to look as it's in .main class. http://fti.com.ua/lng/ thanx! I've created a site with a static background.gif "body" element, then a container (div) where I'm putting my stuff. I want the container to roll up and down against the nice static background in the body margins.(there is an example of what I'm trying to do at CSS garden http://www.csszengarden.com - check out Gothica #027)The problem is that when I use absolute positioning for the elements - the container ignores the content and doesn't size properly. But when I use relative positioning, I can make everything work out OK - except it generates tons of extra space that gets dumped at the bottom of the pages. So my question is - does anyone know how to get rid of the space? BTIA ok Hello, I am creating a table with several rows that represent records from a database. Each record creates two rows. The first row is basic data. The second row contains detailed data, however, it is initially hidden. When someone hovers over a row, I need to display the detailed information immediately over the basic data. Basically, when the mouse is over a row, I need to position the row directly below it over the current row. I know this sounds odd, but I have a cool idea. I'm trying to do this with CSS and JavaScript, but I can't seem to figure out: 1. How to position the even numbered rows on top of the odd numbered rows when needed WITHOUT readjusting the entire table. Can you please provide some help? Thank you so much, Crystal Due to popular demand, I have decided to bite the bullet and make the switch from tables to css and divs in layout designs. Obviously, since I am unfamiliar with this practice, I have run into an issue. I am trying to add a link to the right side of my title div, which has a bottom border of 1px...I am not sure how to go about doing this without going down a line or the link not positioning itself to the right... Here is what I have so far: HTML Code: Code: <div class="title" align="left"> <div style="display: inline;"><b>News Updates:</b></div> <!-- The below link needs to align to the right side --> <div style="display: inline;" class="font" align="right"><a href="javascript:void(0);">Add News</a></div> </div> CSS Code: Code: .font { font-size: 0.7em; }
.title {
font-size: 1.6em;
color: #0033FF;
border-bottom: 1px solid #0033FF;
}
I have no idea how to go about this and it seems like it would be so simple. Any help is appreciated. I'm starting to create a new site, and I'm having some issues deciding how to create it. I want a header, footer, and 3 columns. This is the CSS I have created, but have some issues with it. Should I use absolute positioning for all elements? The bottom bar isn't lining up at all. Also, for the middle content, how do I get my info into there easily? I will be using the main page as a php page that I will include on all my pages. Should I not use a middle content section? #content { margin-left: 199px; margin-right: 199px; border-top: 1px solid Black; border-bottom: 1px solid black; height:450px; position:absolute; top:59px; width:585px; } #titleBar { background-color: #333399; text-align: center; font: bold large Courier New; height: 40px; padding: 8px; border-top: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color:#FF9933; } #bottomBar { background-color: #333399; text-align: center; font: normal x-small Courier New; height: 20px; padding: 4px; border-bottom: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color: #FF9933; } #navleft { background-color: #FF9933; border: medium double; text-align: center; height: 450px; position: absolute; left:10px; top:59px; width:200px; border:1px solid #000; } #navright { background-color: #FF9933; border: medium double; text-align: center; width:200px; height:450px; position: absolute; right:10px; top:59px; width:200px; border:1px solid #000; } I am getting slightly different displays with using div sections on my layout. I am using relative positioning mostly with a webpage with a bar across the top, bar down left hand side . In the content area I have another 3 sections. In IE it looks fine but in FF there is spaces left at very top and between another section in main area. Basically if i use absolute positioning it works for both but not relative positioning of sections in FF. Is there an issue with relative positioning in ff? I can give my code but that is about 100 lines. Hi bit of a newbie but confused by following code; The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings? Pulling hair out! Thanks, Bill. .child { width: 200px; background-color:green; background-image: url(unt.bmp) ; } .parent {margin: 0; padding: 0} .bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px } .br1 {background: url(_round_br.gif) bottom right no-repeat;} .tl1 {background: url(_round_tl.gif) top left no-repeat;} .tr1 {background: url(_round_tr.gif) top right no-repeat;} </style> </head> <body> <div class="parent"> <div class="child"> <div class="tl1"> <div class="tr1"> <h2>Hello </h2> </div> </div> </div> /* When displayed in browser the above is separated from the following by a gap of around 20 odd px */ <div class="bl1"> <div class="br1"> <h2>Hello</h2> </div> </div> </div> </body> </html> Hello, I am a complete newb to CSS and I am trying to position on image on my page, what is the correct syntax (the html, and CSS) for me to be able to place an image where ever i want on the screen? Thanks so much for the help Hello all, i have a page setup which is working well in all browsers. I have a div layer positioined in the page at the moment it is positioned absolute, and it is in the correct place you can see it at www.loadedtechnologies.com/impact , the layer is id="demoImage", you can have a look at the css file in page source. I don't want this layer positioned absolute, i want it to be relative to the "MidTopContent" layer, so that when the ADMIN menu appears on the top of the page once logged in, the demoImage layer will follow down within MidTopContent, Please help THANKS CSS is very new to me so if someone can help me with my problem i would very much appreciate it. I am using a background image that is 1024 x 768px. I have positioned this using... Code: body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it. is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background. Or am i doing this wrong. I have read about wrappers and such but i don't really understand them. An example of what i am trying to achieve is at www.blue-leaf.co.uk I have inputted some css popup text on roll over for some social bookmarking buttons on a new blog skin. (pkevan.blogspot) The problem I am having is placing where they pop-up. I can't use an absolute position because who knows where a post will be along with multiple posts. Right now there floating underneath the icons at the left hand side. I want the text to appear to the right of the icons inline with them. I'm having trouble positioning them there though. Any help, or properties that might be useful will be greatly appreciated. Thanks in advance. Heres what I have applied so far. div#socialbookmarks a span {display: none; } div#socialbookmarks a:hover span {display: block; float: left; position: inline; top: 0px; left: 0px; width: 20px; padding: 0px; margin: 0px; z-index: 0; color: #4AAAFA; background: transparent; } Hello, I've got a frame work of a site that's positioned correct in firefox, but it won't align at all in IE. If you look at it in firefox, the site frame shows correct, all centered and all of the images are looking like they are in the correct position. However, when you go to the site in IE, everything is aligned to the left and completely off. How do I get that so it's all showing in the center like it is in Firefox? Site: clayton-nichols(dot)com/Test/index.html CSS style(validated) clayton-nichols(dot)com/Test/css/style.html thanks for the help! I need help laying out my page, and I can't seem to get this CSS stuff right. My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up. Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them. I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please. I have a few more questions on css positioning. How to center the content; What about the positioning of the inside tags? If you want to position at a specific place. Code: <body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload();"> <div id="master" style="float: left; display: block; text-align: left; width: 955px;"> <div id="navbar" style="position: absolute; left: 10px; top: 10px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div> <div id="picbar" style="position: absolute; left: 10px; top: 200px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div> <div id="maindiv" style="position: absolute; left: 230px; top: 10px; border: none; background-color: #FFFFAE; width: 700px; height: 580px;"> <div id="galbar" style="position: absolute; left: 150px; top: 0px; z-index: 3;"></div> </div> </div> </body> |
|||||||