|
| |
|
|
stall
Posts: 17
Joined: 2/14/2007
Status: offline
 |
dynamic image with CSS - 3/19/2007 3:12:25
Hello, i'm trying to make a fullscreen website, so many things must be a different size depending on the resolution and monitor size of people who visit the site.
So far I got the borders appearing properly but I can't seem to get the menu bar to appear properly.
Here is the code i'm using. Or just visit the site: http://eagl3s.kicks-ass.net. The menu bar is the "navLeft navRight and navMid" divs.
html:
<!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>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div class="leftBorder">
<div class="rightBorder">
<div class="banner">
</div> <!-- "banner" -->
<div class="menu">
<div class="navLeft">
<div class="navMid">
<div class="navRight">
<ul id="nav">
<li><a href="http://www.eagl3s.kicks-ass.net" id="home">Home<span></span></a></li>
<li><a href="www.sex.com" id="members">Members<span></span></a></li>
<li><a href="http://www.eagl3s.kicks-ass.net/forum/index.php" id="forum">Forum<span></span></a></li>
<li><a href="http://www.eagl3s-clan.com" id="aokaoc">Aok-Aoc<span></span></a></li>
</ul>
</div> <!--"navLeft"-->
</div> <!--"navMid"-->
</div> <!--"navRight"-->
</div>
</div> <!-- "rightBorder" -->
</div> <!-- "leftBorder" -->
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
background-image: url("../images/bg.gif");
background-repeat: repeat;
}
.leftBorder {
background-image: url("../images/bdr.gif");
background-repeat: repeat-y;
background-position: left top;
}
.rightBorder {
background-image: url("../images/bdr.gif");
background-repeat: repeat-y;
background-position: right top;
}
.banner {
background-image: url("../images/banner.gif");
margin: 0 auto;
width: 943px;
height: 161px;
}
.navLeft {
background-image: url("../images/nav_01.gif");
width: 73px;
height: 55px;
}
.navMid {
background-image: url("../images/nav_02.gif");
background-repeat: repeat;
background-position: center;
height: 55px;
}
.navRight {
display: inline;
background-image: url("../images/nav_03.gif");
margin: 0 auto;
width: 73px;
height: 55px;
}
.menu {
height: 64px;
width: 941px;
margin: 0 auto;
margin-bottom: 10px;
line-height: 31px;
text-align: center;
}
|
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: dynamic image with CSS - 3/19/2007 5:22:32
Don't give your menu a width. Make the margins left and right in the menu the size of the borders so that it will hold it off each side.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
stall
Posts: 17
Joined: 2/14/2007
Status: offline
|
RE: dynamic image with CSS - 3/19/2007 17:47:48
I tried it and fiddled with display: but the images insist on being placed below eachother. Is there a bug in CSS when you try to use say "background-position: right;" within borders positioned with background-position as mine are?
| |
|
|
|
stall
Posts: 17
Joined: 2/14/2007
Status: offline
|
RE: dynamic image with CSS - 3/20/2007 5:32:51
Oh... yes that did help. Thanks for being an expert and guiding me on my way :D
| |
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: dynamic image with CSS - 4/21/2007 5:34:11
Actually I think Marcus is right and I was wrong - you can use a single value in the background-position in CSS2 - it will be assumed to be the horizontal position and the vertical will be assumed to be 50%.
My view on this (and the reason I've never used a single value ) is that I don't trust it to do what it's told in all browsers and so I'd always add in both values. It also allows less room for confusion as to which value you're declaring - horizontal or vertical (maybe it's just me that always gets them round the wrong way?)
http://www.w3.org/TR/CSS21/colors.html#background-properties
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Ryokotsusai
Posts: 248
Joined: 10/5/2005
Status: offline
|
RE: dynamic image with CSS - 4/23/2007 7:20:00
quote:
Don't give your menu a width. Make the margins left and right in the menu the size of the borders so that it will hold it off each side.
can this be used with height as well?
_____________________________
The world is more like it is now than it ever has been before.
--Dwight Eisenhower
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
