|
CSS - Navigation Bar Positioning Over Image
I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org
I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page. I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated! Similar TutorialsI have ran into a bit of a problem getting the navigation to show all on one line when in a div set to 765px (The width I need the site to be...). The div is required for the rest of my site removing it is not an option. HTML: 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>Header</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="width: 765px;"> <ul id="nav-header"> <li id="zero-nav"><a href="#">Zero</a></li> <li id="one-nav"><a href="#">One</a></li> <li id="two-nav"><a href="#">Two</a></li> <li id="three-nav"><a href="#">Three</a></li> <li id="four-nav"><a href="#">Four</a></li> <li id="five-nav"><a href="#">Five</a></li> </ul> </div> </body> </html> CSS: Code: ul#nav-header li {
display:block;
float:left;
}
ul#nav-header li a {
display:block;
outline:none;
width:101px;
height:74px;
background:url(as_nav_header.gif) no-repeat 0 0;
text-indent:-9009px;
margin:0;
overflow:hidden;
}
ul#nav-header li a:hover {
background-position:0 -74px;
}
ul#nav-header li#one-nav a {
width:134px;
background-position:-101px 0;
}
ul#nav-header li#one-nav a:hover {
background-position:-101px -74px
}
ul#nav-header li#two-nav a {
width:134px;
background-position:-235px 0;
}
ul#nav-header li#two-nav a:hover {
background-position:-235px -74px
}
ul#nav-header li#three-nav a {
width:137px;
background-position:-369px 0;
}
ul#nav-header li#three-nav a:hover {
background-position:-369px -74px
}
ul#nav-header li#four-nav a {
width:122px;
background-position:-506px 0;
}
ul#nav-header li#four-nav a:hover {
background-position:-506px -74px
}
ul#nav-header li#five-nav a {
width:134px;
background-position:-628px 0;
}
ul#nav-header li#five-nav a:hover {
background-position:-628px -74px
}
Thanks, - Chris B. On a 3 column page I left the center column completely empty because I am using a non-scrolling, centered image as background and I want it persistently visible, though the 2 marginal columns are welcome to scroll. My problem arises when I try to put my navigation bar at the bottom of the page. It insists upon occupying the empty center column and rising to the top of it (though it gets itself truncated to the width of the center column). I don't want it there; I want it a bit below the longer of the two (populated) marginal columns and centered on the page. This is my first attempt with CSS for page layout and I am using the template from glish. Hello, I sincerely apologize ahead of time for what I think to be the craziness of this request, but I'm about to go bonkers. I have a website set up for a guild through guildomatic and I have some customizations applied courtesy of another, more css-savvy individual. He used a "custom css" and some JavaScript to do some skinning so that his theme looked like another theme. I've made further tweaks using my good ol'fashioned try try until you succeed mentality (some C++/Perl experience) but there is one problem that I just can't wrap my head around. There is a navigation bar (including login/logout/register links) inside a table tagged "crumb" that no matter what I do I cannot get it centered so that it stays in the correct position when the window changes size. I would like for the "crumb" to show up above the banner and centered (the banner is centered too) so that they move with eachother whether your viewport is large or small. Am I completely missing something here or is there a rule that I'm not following? I've tried applying the "auto" setting to the right and left margins in various different levels of the structure and figure I either haven't found the right combination or I'm going about this the wrong way. I have tried disabling the custom CSS and JS to make sure they aren't interfering and I still can't make this happen so far. Any help would be greatly appreciated. Thanks for reading! -Ryan Here's the code: Code:
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100000001;"></div>
<div id="root">
<table id="root_table">
<tr id="adminConsoleContainer">
<td colspan="1">
<table class="controls">
<tr>
<td class="notices"></td>
<td class="configure">
<ul class="nav controls">
<li>
<img alt="Upgrade" class="raw_icon" src="(URL address blocked: See forum rules)" title="Upgrade" />
<a href="(URL address blocked: See forum rules)=2481105406&cep=b69e9d1e6f0577c6d79da3f5d9b8e910">Add Services</a>
</li>
<li>
<img alt="Administrator Console" class="raw_icon" src="(URL address blocked: See forum rules)" title="Administrator Console" />
<a href="/console">Administrator Console</a> </li> </ul> </td> </tr> </table> </td> </tr> <tr> <td id="banner">
<div class="ggcode">
<table cellpadding=0 cellspacing=0 width="1050" style="margin-left:auto;margin-right:auto;">
<tr>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
<td style="text-align:left;vertical-align:top;background-image:url((URL address blocked: See forum rules));background-repeat:repeat-x;">
<img style="align:top; padding-top:0px; width:970px; height:229px" src="(URL address blocked: See forum rules)">
</td>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
</tr>
</table>
<script type="text/javascript" src="(URL address blocked: See forum rules)"></script>
</div>
</td>
</tr>
<tr>
<td >
<table id="crumb">
<tr>
<td id="nav">
<div class="ggcode">
<div id="menuSection">
<a href="/">Home</a> - <a href="/forums">Forums</a> - <a href="/members">Roster</a> - <a href="/raids">Raids</a> - <a href="/items">Items</a> - <a href="/raids/attendance">Attendance</a> -
<a href="/dkp">TOPP</a> - <a href="(URL address blocked: See forum rules)">Logs</a>
</div>
</div>
</td>
<td id="user_welcome"> Welcome, Valcore. <a href="/user/logout">Log out</a><br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
I am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require. My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image. I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code: Code:
body {
text-align: center;
background-color: #7999E4
}
#header{
width: 780px;
background: url('images/head.gif') repeat-x bottom;
font-size: 93%;
line-height: normal;
height: 263px;
padding: 0;
margin:0;
border:0;
}
#main {
background-color: #ffffff;
width: 780px;
height: 500px;
}
#nav2 {
background-color: #e7e7e7;
width: 100%;
border-bottom: 1px solid #000;
height: 20px;
}
#header ul {
margin: 0;
padding:0;
padding-top: 236px;
padding-left: 10px;
list-style: none;
}
#header li {
display:inline;
margin:0;
padding:0;
}
#header a {
float: left;
background: url('images/left_both.gif') no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
text-decoration: none;
}
#header a span{
float: left;
display: block;
background: url('images/right_both.gif') no-repeat right top;
padding: 5px 15px 4px 6px;
font-weight: bold;
color: #765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a span{float: none;}
/* End IE5-Mac hack*/
#header a:hover span{
color: #333;
}
#header #current a{
border-width: 0;
background-position: 0% -150px;
}
#header #current a span{
background-position: 100% -150px;
padding-bottom:5px;
color: #333;
}
#header a:hover {
background-position:0% -150px;
}
#header a:hover span {
background-position:100% -150px;
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>Properties</span></a></li>
<li><a href="#"><span>Quick Searches</span></a></li>
<li><a href="#"><span>Holidays</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div id="main">
<div id="nav2"></div>
</div>
<div id="footer">
</div>
</body>
</html>
hey. not sure If i can complete this in CSS, I know how to do a singular image scroll over change, but I have a navigation bar i am creating, with about 9 links across is. I want to have the image change as the mouse scrolls over each link option, so an image map navigation bar with multiple scroll over changes.... how is this possible... it must be some how... I'm currently using Dreamweaver cs4 for my site, although I do have a medium to basic knowledge of html and CSS, so I can adapt coding. any help or pointers would be great. I'm currently working on a website and trying to setup two types of navigation. I don't know what happened with it, and I am by no means a expert with CSS... I'd barely say I am a beginner.. I merely took the code I am using from a different layout and am trying to tweak it. When originally designing the layout I had messed up on the slicing and the navigation worked fine. Upon reslicing the website and replacing the navigation code into the layout, I started noticing that the backgrounds for both sections are spanning wider then they are suppose to and do not know what I am over seeing or over looking. This problem has been bloody pissing me off for hours, and with all problems I have had with coding, it is probably something really simple, that I just have overlooked. Here is the link. xquizitewarfare dot com/website/index.html (it isn't allowing me to post a direct link with me being a new member. This is something I'm trying to get finished, and don't want to proceed with coding the rest of the site until i have the nav figured out.) Like I said I am just barely a beginner at CSS.. I spent about a hour getting the Validators to like my code. Only one error and that is to do with a background, and i'm not sure how to fix it. If anybody is able to respond, I would greatly appreciate it. I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states? Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images. What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it? Of course I've seen lots of CSS navigation using image rollovers, and others using dropdowns, but I haven't been able to find any that use both at the same time. I'm trying to put it on a WordPress site ... Any links or help would be much appreciated! Laura S. Hey guys, Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
/*background:#EFF4FA;*/
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
padding-bottom: 1px;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>
I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. 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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css" media="screen">
#test {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
width:800px;
height:640px;
background-color: #000;
}
#nav{
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
display:block;
width:50%;
height:100%;
outline:none;
top:0;
}
#Next{right:0;}
#Prev{left:0}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block;
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="grass.jpg" alt="image" />
</div>
</body>
</html>
Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. Hey everyone, I'm trying to convert a jscript rollover setup to using CSS sprites. I have setup the following sprite: [IMG]eagleonedims.com/images/navmap.jpg[/IMG] I cannot figure out how to have the <li> sections replace the entire ba6nner with a shifted-down sprite upon rollover. The shifted sprite just appears within the boundaries of the respective<li> section. The reason for needing this is to include the cloud effect which overlap the other li sections. Basically, upon rollover I need the ENTIRE navmap.jpg image to be shifted by 88px down. The image is 1000px wide and each sprite is 88px tall. Thanks for any help! CSS: Code:
#navmap {
width: 1000px;
height: 88px;
background: url("images/navmap.jpg");
margin: 0;
padding: 0;
position: relative;
}
#navmap li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navmap li, #navmap a {
height: 88px;
display: block;
}
#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}
#home a:hover {background: url("images/navmap.jpg") 0px -88px no-repeat;}
#about a:hover {background: url("images/navmap.jpg") 0 -176px no-repeat;}
HTML: Code: <ul id="navmap"> <li id="home"><a href="index.php">Home</a></li> <li id="about"><a href="about.php">About</a></li> <li id="pricing"><a href="pricing.php">Pricing</a></li> <li id="quote"><a href="quote.php">Quote</a></li> <li id="contact"><a href="contact.php">Contact</a></li> <li id="login"><a href="login.php">Login</a></li> </ul> HTML -- CSS I decided my last layout looked like poop so I'm changing it. In FF the center logo fits right in the middle of the background image to give it a stretching effect. In IE the image is slightly above the baseline. (maybe 3-5 px) Any help here? I'm new to CSS. What is the best way to position an image? I tried using this: #image { position: absolute; top: 234px; left: 567px } But for some reason it doesn't work...How can I position an image? Thanks PS another thing that's been bothering me is when do you put: (in the external stylesheet) .image {..... } when do you put #image {...... } and when do you put *#image {...... } What's the difference between them and what circumstances do you use them in? I am building a site and using CSS selectively where I need to control positioning. The site is tapmytrees.com I am having an issue controlling the positioning of the "Add This" image at the footer of the page. I am able to position this right, center, or left, but other than that, have no luck. Currently I am using the following code: #divAddThis { text-align:center; } I am able to use this code to control the positioning of the line below this image: #divLive { float:left; /* moves to right in footer*/ left:-24px; /* adjusts position */ position:relative;/*needed for left and bottom to work*/ text-align:left; /*align text*/ bottom: 5px; /*move up a bit off the search line*/ } When I try to apply the same code to #divAddThis, it has no effect. In fact, using code similar to #divLive, it does not even show up when viewing the results in FireBug. Any suggestions are appreciated. Thanks. I have the following Code:
<td rowspan="2">
<img class="gallerypic" name="<?php echo $pic['filename']; ?>" src="pictures/thumbs/<?php echo $pic['filename']; ?>" width="<?php echo $pic['thumb_width']; ?>" height="<?php echo $pic['thumb_height']; ?>">
</td>
<td>
<div class="header">Caption</div>
<div class="captionText">CaptionText</div>
</td>
I want the two div's to be positioned at the top of the TD they are in. I tried all different positioning stuff in thee CSS for their classes. What am I missing here? I really hate CSS sometimes. Do I need to style the TD to get this working? Is this possible with css? I have a single table cell thats 100% wide. I want an image left aligned, an image right aligned and a background image spaning the entire cell. I also want to type text into the cell between the two images. Using html I get bugs in IE so I think css might be the better option? I'm working inside of a classifieds software app and trying to position a button inside an area that I don't have access to the raw HTML. I built the image file and I know where I want it to appear on the page, but don't know the correct parameters to put in to get it there. I would like it to find the center of the page then go left 190 pixels and be about 400 pixels down from the top. Site is http://www.ineedihave.com. please look at this link http://sudhakargolakaram.co.in/image.html my question is how to place the image which has a curve design starting from the left till the right along with the 3 square images in between keeping this image aside the width of the wrapper is 825px which is fine the 1st div after the wrapper has content within the dark green at the very top and its width is the same as the wrapper which is 825px and the div after this are also 825px in order to have this curve image whose width is 1204px and height 266px as the 2nd div is what i need help with as of now my code is #wrapper { width: 825px; margin: 0 auto; } #contentwrapper{ float: left; width: 825px; height: 1900px; } #toprowouter{ float: left; width: 825px; height: 25px; } #menu{ float: left; width: 825px; height: 57px; color: #fff; } and code for other divs just for the sake of this 1 image with 1204 X 266 i guess it is really not needed to change the wrapper to #wrapper{ width: 1204px; margin: 0 auto; } and there after all the other divs will need to have a width of 1204px and i will have to apply padding on left and right to a container div so that the actual content will have a width of 825px how is it possible to have the image with 1204 X 266 sit inside the wrapper whose width is set to 825px or should i change the wrapper width to 1204px just because of this big image please provide the code for this thanks. In the code below, why is the image not positioned at the very top of the DIV in IE only (seems to be fine in FF)? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.test {
width: 200px;
height: 100px;
border: 1px solid #003366;
}
.image {
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="test">
<img class="image" src="images/block_up.gif" width="11" height="11" border="0" alt="">
</div>
</body>
</html>
|
|||||||