| Author |
 Topic  |
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
 Posted - 17 December 2004 : 22:30:23
|
Since I've noticed alot of you are diving into CSS I figured what the heck, might as well mess with it more than usual.
I'm liking it, but I've come across a dilema I'm trying to remedy.
I have a <div> tag using the class "menubar"
In this class I have the following defined:
background: url(_nav_right.gif) fixed transparent 0px 0px right center;
background-attachment: fixed;
background-color: transparent;
background-image: url(_nav_right.gif);
background-position: right center;
background-repeat: no-repeat;
What I want to try and accomplish, is adding another background image, but to be fixed on the left side (_nav_left.gif), I havnt figured out how to do this yet, and I cant find out of a way via (my) online references... I'm hoping this is possible.
I need it to be in the same element though, as I'm going to be having text run across (the menu navigation) the entire thing.
The reason I dont use a single bg image to stretch the entire length is; I want the page to be flexible across various screen resolution, and I'm configuring the image sizes to be compatible with a minimum of 800x600.
Any help is appreciated. |
-Stim |
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 17 December 2004 : 23:16:28
|
| I'm just now realizing that the code I'm using is obviously mozilla-incompatible. Works fine in IE, but in mozilla I dont get a background image at all |
-Stim |
 |
|
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 17 December 2004 : 23:44:29
|
the first line of your class is being repeated in the lines following it, you can remove those.
you can have multiple classes and address them in the elements (up to 3) similar to this:
<div class="class1 class2 class3">blah</div>
your issue is not a matter of being mozilla because I've used all of these properties on some sites I've created recently and they work perfectly fine. can you show a screenshot or draw up a quick image of what you're trying to do. I've gotten really good at this stuff the past year and feel I can give you a solution. |
 |
Edited by - dayve on 17 December 2004 23:48:10 |
|
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 17 December 2004 : 23:51:03
|
http://stimmy.a1.no-ip.org/kproto/index.html
If you look at the source you can see I tried layering the div's to get my image effect.
Pull it up in both Mozilla & IE, see what I mean?
Note: Page in very very very super very early development (only spent half hour on it so far) - the images may or may not be temperary, I'm trying to get the css right first.
Another note: I plan on putting a 468x60 banner on the right side of the logo (padded from the right of course) but over the bg image |
-Stim |
Edited by - Da_Stimulator on 17 December 2004 23:58:43 |
|
|
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 18 December 2004 : 00:53:24
|
here is something I came up with really quick. I am sure it could use some tweaking, but it should get you on your way. some important things to remember about div's is that they are real-estate hogs meaning they will default to the entire width of your screen, so you have to control them using widths/heights and the almighty float to get multiple div's adjacent to one another.
anyway, here is a demo link:
http://www.burningsoulsforum.com/forum/kw/kw.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
body {
margin:0px;
}
.logoLeft {
background:url(_logo.gif);
background-repeat: no-repeat;
background-position: top left;
width:51%;
float: left;
}
.logoRight {
background:url(_logo_right.gif);
background-repeat: repeat-y;
background-position: top right;
width:49%;
float: right;
}
.navLeft {
background:url(_nav_left.gif);
background-repeat: repeat-y;
background-position: top left;
width:51%;
float: left;
font-family:arial;
font-weight:bold;
font-size:11px;
}
</style>
</head>
<body>
<div class="logoLeft" style="height:60px;"></div>
<div class="logoRight" style="height:60px;"></div>
<div class="navLeft" style="height:17px;">Home | Scripts | Services | Hosting | Newsletter | Forums | Contact </div>
<div class="logoRight" style="height:17px;"></div>
<br clear="all">
Content Here...
</body>
</html> |
|
Edited by - dayve on 18 December 2004 01:13:26 |
|
|
|
Davio
Development Team Member
Jamaica
12217 Posts |
Posted - 18 December 2004 : 01:14:03
|
| And a small tidbit, when coding for different browsers, code in a standards compliant browser first, then code for IE. Mozilla, Firefox, Opera are some of the standard compliant browsers. Standard compliant meaning they adhere to the W3C recommendations. |
Support Snitz Forums
|
|
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 18 December 2004 : 10:55:00
|
Thx dayve....
I take it when I use float, I should use clear: all whenever aligning divs then not? |
-Stim |
|
|
|
cripto9t
Average Member
USA
881 Posts |
Posted - 19 December 2004 : 07:50:31
|
I tweaked on Dayves code a little. It's basically the same except I used absolute positioning on the links so if need be, they could stretch across the page.
Looks good (minus the borders) in IE6, NS7 and Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
body {
margin:0px;
}
#header {
position:absolute;
top:0px;
left:0px;
width:100%;
clear:both;
border:1px solid black;
}
#logoRight {
background:url(_logo_right.gif) repeat-y top right;
float:right;
width:180px;
height:79px;
border:1px solid red;
}
#logoLeft {
background:url(_nav_left.gif) repeat-y top left;
float:left;
height:79px;
border:1px solid black;
}
#menubar {
position:absolute;
top:65px;
left:0px;
margin-left:10px;
font-family:arial;
font-weight:bold;
font-size:11px;
z-index:2;
border:1px solid green;
}
#menubar a {
display:inline;
text-decoration: none;
color:#000000;
font-weight: bold;
font-size: 11px;
padding:3px 5px 3px 5px;
}
#menubar a:hover {
text-decoration: underline;
background-color: #003399;
color: #ffffff;
}
</style>
</head>
<body>
<div id="menubar">
<a href="index.html" title="Home">Home</a> |
<a href="reflex.html" title="Scripts">Scripts</a> |
<a href="#" title="Services">Services</a> |
<a href="#" title="Hosting">Hosting</a> |
<a href="#" title="Newsletter">Newsletter</a> |
<a href="#" title="Forums">Forums</a> |
<a href="#" title="Contact information">Contact</a>
</div>
<div id="header">
<div id="logoLeft"><img src="_logo.gif" height="60px" width="180px" /> </div>
<div id="logoRight"> </div>
</div>
<br clear="all">
Content Here...
</body>
</html>
|
_-/Cripto9t\-_ |
Edited by - cripto9t on 19 December 2004 07:53:41 |
|
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 19 December 2004 : 09:41:10
|
I've already customized and implemented dayves code.
Although, now I have a new inquiry...
is it possible to achieve a text color gradient using CSS? |
-Stim |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
|
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 19 December 2004 : 12:16:31
|
| Keep in mind that using the gradient filter is not considered CSS. As D3mon already pointed out, it is specific to IE. |
|
|
|
| |
Topic |
|
Topic Locked
