dynamic image with CSS

All Forums >> [Web Development] >> Cascading Style Sheets

Message

stall -> 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 -> 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.

stall -> 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?

Tailslide -> RE: dynamic image with CSS (3/20/2007 3:01:32)
There's no such rule as background-position:right; Have a look at this tutorial about background images: http://www.cssbasics.com/chapter_12_css_backgrounds.html and see if that helps.

stall -> 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

jaybee -> RE: dynamic image with CSS (3/20/2007 5:57:12)
Ssssssshh don't say things like that, we'll never hear the last of it. [;)]

Tailslide -> RE: dynamic image with CSS (3/20/2007 6:05:46)
[:D] Frankly, there's very few experts at CSS (I'm not one of them) - most of use who use it a lot just muddle our way through and then repeat the successful tactics.

happyhelper -> RE: dynamic image with CSS (4/20/2007 16:46:16)
Unfortunately "There's no such rule as background-position:right;" is incorrect. Please see the W3C CSS standard at the following location: http://www.w3.org/TR/css3-background/#the-background-position

jaybee -> RE: dynamic image with CSS (4/20/2007 17:58:30)
Thanks for that Happy Helper but that's CSS3. CSS3 is not yet released and the only browser supporting it to any extent is Opera.

Tailslide -> RE: dynamic image with CSS (4/21/2007 3:27:23)
Yeah which given the browser support of CSS2, CSS3 might just be fully supported by about 2020!

jaybee -> RE: dynamic image with CSS (4/21/2007 5:25:00)
That soon? [;)]

Tailslide -> 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

jaybee -> RE: dynamic image with CSS (4/21/2007 5:55:35)
quote: maybe it's just me that always gets them round the wrong way? Nope, not just you. It just doesn't seem logical.

Ryokotsusai -> 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?

jaybee -> RE: dynamic image with CSS (4/23/2007 8:43:07)
You can use top and bottom margins as well as left and right. I rarely specify heights unless it's an image or I'm forced to for some other reason.

Page: [1]

0.078125