Click to See Complete Forum and Search --> : Perpetual CSS Help Thread
Mynock
11-30-2005, 04:12 PM
Ok, I'm doing the company website in CSS. I have two books (Visual Quickstart Guide: DHTML and CSS and The Zen of CSS Design) which I have read. I'm still little confused. I'm trying to set up an external CSS styles to apply to all my pages to shorten up my code. Most of all the pages are going to share the same nav and graphics. I want to include all this in the CSS. I don't know if I can do this. I know you can set up for font and all kinds of styles. Can you also set up your buttons and placement of repeating graphics? More importantly I'm starting to apply what I have learned into starting the site. I've already hit a snag. I'm using GoLive CS2. I have a one pixel image gif that I want repeated just on the top and the rest of the background to be white. I have checked here (http://www.w3schools.com/css/tryit.asp?filename=trycss_background), and that hasn't worked completely. In GoLive the layout tab has what I desire, but when I view index in preview or any browser and there is no background image. The background color is there. I dunno what I am missing.
body {
background: #ffffff url(/images/grad.gif) repeat-x;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel= "stylesheet" href="css/main.css">
</head>
Any help is great.
is your path to the image correct?
Mynock
11-30-2005, 04:31 PM
I think, it shows up in GoLive Layout, but not Preview. It's images folder which is the how it's coded correct?
The best way for you to understand css in my opinion is to visit this site www.csszengarden.com/
that front/first page has the html, however all the css file is different and you can see how many ways they can build a site using css.
And yes you can build your site nav bar and all using css
Oh. maybe you need to stick the .gif before the #fff
This is what I've got on my site (www.endeavorcreative.com -- there is a repeating x graphic on the top)
body {
background: url(http://www.endeavorcreative.com/images/ec_headerbg.jpg) repeat-x;
background-color: #FFFBE6;
margin: 0px;
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
}
You can do all of that with CSS. I control everything in the stylesheet -- graphics, layout, etc. The way I learned? Oh yeah, I have all those books -- but look at stylesheets. Surf the web and look at code. A lot. ;)
Mynock
11-30-2005, 04:51 PM
No dice. I'm going to try an put the CSS in index and see what I get. If that doesn't work I'm going to find somewhere to upload it to test it.
JPnyc
11-30-2005, 04:53 PM
It's missing the type attribute. type="text/css"
Mynock
11-30-2005, 04:55 PM
It worked when I put the code right in index and not in the css file what does that mean?
Mynock
11-30-2005, 04:58 PM
Ok, Joe where do I put that in my main.css file?
put type="text/css" here, too:
<link rel="stylesheet" href="css/main.css" type="text/css">
jinx! lol yeah, I missed that earlier. sowwy.
Mynock, got it? This should fixeth. It goes in your header, not the stylesheet. You need to tell the browser what it is, that's all. ;)
Mynock
11-30-2005, 05:02 PM
That didn't work EC. Hmmm.
show us what you've got now.
Mynock
11-30-2005, 05:12 PM
ok.
main.css
body {
background: #ffffff url(/images/grad.gif) repeat-x;
}
p { }
td { }
a:link { }
a:visited { }
a:hover { }
a:active { }
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel= "stylesheet" href="css/main.css" type="text/css">
</head>
<body>
</body>
</html>When I move my css into the index it shows up in preview.
JPnyc
11-30-2005, 05:14 PM
Then the path must be wrong. It has to work, we all do it.
JPnyc
11-30-2005, 05:15 PM
Oh, I know why it might not work. You have an XHTML doctype, but you didn't close the link tag. It must end with />
...
<link rel="stylesheet" href="css/main.css" type="text/css" />
if it's working as internal, it's just gots to be that header info. I never pay much attention to it myself since I work in CMS land so much - it's all typically there for me. meh.
Mynock
11-30-2005, 05:26 PM
Well, the gif is in /images and the css is in /css
right. What I'm saying is that when you put the styles in the index and it works, then it's got to be something to do with that link to the external. Did you give it a self closing tag? Honestly it's these little things that can wonk things up major.
Mynock
11-30-2005, 05:31 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel= "stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
</body>
</html> Here's what I have in index now.
JPnyc
11-30-2005, 05:42 PM
I can't see your directory structure from here obviously but just on a hunch, try the path as ../css/main.css
Mynock
11-30-2005, 05:46 PM
Sooooooo, close. I needed url(../images/grad.gif) in my css file. Finally.
Mynock
11-30-2005, 05:49 PM
Many thanks. On to figure out my next issue.
whew. glad you got it sorted. relative paths drive me nuts sometimes.
Mynock
11-30-2005, 05:57 PM
I agree. You try to organize to make it easier in the long, but it makes it more complicated for you in the short run.
Yeah. Well, to be honest I have what is probably considered a pretty nutty workflow. I sometimes start the layout in dreamweaver, a "rough" if you will, just the very beginning/major sections ... and then move everything on to my development server. I then finish the stylesheet up in notepad. I wind up using absolute paths most of the time just because it's easiest because of the nuttiness of all that. I might rethink this at some point but meh. Whatever works eh?
Mynock
12-01-2005, 02:27 PM
Ok, my goal today is to place a few gifs in the CSS file so that they appear throughout the pages as they are common. Then once I have those I plan to place text above them. They also need to be hyperlinks. Is it better to hyperlink the images or the text? I'm thinking the text. Then I can have it change state when it is rolled over. I'm not even sure how to do it in my css file. I believe it's the <img /> tag. Do I plact it in my body{} or somewhere else like in img{}? I know exactly where I want to put my image and what size it is, but I'm missing that step in between. I see all the text positioning, but I can't find much for images.
Ok, not sure I fully understand but hopefully this answers. :)
In your stylesheet, you can define a div that will call an image. Like this:
#mygraphic {
background: url(image.gif) no-repeat;
height: 50px;
width: 25px;
}
Then in your html, you do theess:
<body>
<div id="mygraphic"></div>
</body>
In the CSS, you can define styles for the image tag, too.
img {
float: right;
padding: 10px;
}
What this does, as opposed to the div, is it floats all images to the right and adds some padding.
So, if you had this:
<body>
<img src="mygraphic.gif" />
</body>
That would float right and have 10px padding.
Does that help?
Mynock
12-01-2005, 02:54 PM
Ok, let me simplify. So, if I wanted to place a logo.gif 5px from the top and bottom on every page it would go something like this:
main.css
#mylogo{
background: url(../images/logo.gif) no-repeat;
position: absolute;
left: 5px;
top: 5px
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel= "stylesheet" href="/css/main.css" type="text/css"/>
</head>
<body>
<div id="mylogo"></div>
</body>
</html>Am I close?
JPnyc
12-01-2005, 02:57 PM
Yes, that will work. Dunno why you wouldn't use an img tag, but either way it'll work
Mynock
12-01-2005, 03:01 PM
It's not working so how does the image tag work?
you must define the height and width of the image in the CSS
PS -- I like to do it the way you have it mynock, when possible -- that way if you want to swap images, etc. -- you only have to change the stylesheet. Plopping images right in the index, global stuff like that, it can be a pain to update if you've got a big site.
Mynock
12-01-2005, 03:37 PM
I got it to work. Now I have to apply a link to the image.
Mynock
12-01-2005, 03:41 PM
you must define the height and width of the image in the CSSI realized that.
Okee dokee. I thought you were going to use text above the images to do the links, not the images themselves.
You'll need to use the image tag to do the hyperlink. But you can still keep the div style, just remove the background image.
#mylogo{
position: absolute;
left: 5px;
top: 5px
}
<body>
<div id="mylogo"><a href="link.htm"><img src="logo.gif" alt="mylogo" /></a></div>
</body>
Mynock
12-01-2005, 03:57 PM
This is the home logo bar, that will not have text above it. What is the alt="mylogo"?
Mynock
12-01-2005, 04:03 PM
it worked but I needed the height and width:
index.html
<div id="mylogo"><a href="index.html"><img src="/images/logo.gif" height="100" width="150" alt="mylogo" /></a></div>
The alt is used to describe the image in case they are turned off, or for the visually impaired who use screen readers. Make it say "back to home page" or whatever makes sense. It's just a habit, your site won't validate without 'em.
Glad it worked. :)
Mynock
12-01-2005, 04:11 PM
Fantastic.
Mynock
12-01-2005, 04:11 PM
I'm starting to get a hold of this CSS stuff. So confusing to start when you don't know much html.
oh you'll learn. *devil laugh*
Mynock
12-01-2005, 04:42 PM
Is there a way I can repeat an image only like 6 times. I have buttons going across the top under the "banner" and I don't want to have to make a #topred for each one. I want them next to each other, no padding.
main.css
#mytopred{
background: red url(../images/topred.gif) no-repeat;
position: absolute;
width: 100px; height: 25px;
left: 155px; top: 105px;
}
Mynock
12-01-2005, 05:04 PM
I just put them all in there over and over again. I have #mytopred1-6. Now, I'm planning on putting the text about the buttons/graphics. Better read up on type in my book.
Mynock
12-01-2005, 09:05 PM
Ok,
Bolder (IE3, N6, S1, O3.5m CSS1)
or
100-900 (IE4, N4, S1, O3.5, CSS1)
or just stick with plain old bold?
Mynock
12-01-2005, 09:28 PM
That's what I'm going with. I'm doing pretty good. I have the logo placed, top banner gif placed with text and addresses, and the button gifs placed. Tomorrow I'm going to be working on the text on the buttons and getting them to rollover and link correctly. Slowly but surely. I'm using px to define my font size, is that safest?
I usually do, unless I do a fluid design. Some people like to adjust text size in their browsers, in which case I use ems.
Mynock
12-01-2005, 09:32 PM
So where I use px they won't be able to adjust the size, but if I use ems then they can?
yeah. I mean, I think so. lol It's how it's worked when I've tested such things anyway.
Mynock
12-01-2005, 09:34 PM
I hope so, cuz I have the banner so tight if they have larger fonts on it would explode and be a total mess.
then use pixels. You know sometimes I use a mixture, like setting body text in ems and then for say footer stuff, pixels.
jlknauff
12-01-2005, 10:16 PM
Users can still adjust px size but most people don't. No matter what you do you'll never get it to look the same all of the time.
EC, are you the resident CSS expert?
Are you sure? Because I've had sites that won't adjust -- maybe that's just certain browsers.
And no, I'm just the only one that will help Mynock. I kid, I kid.
jlknauff
12-01-2005, 10:28 PM
I don't know if it was windows or a 3rd party thing but I know a while back I got on a computer at someone elses house and looked at one of our sites and the text was tiny, which was odd since it was all done w/ px rather than percent.
Mynock
12-01-2005, 11:35 PM
Are you sure? Because I've had sites that won't adjust -- maybe that's just certain browsers.
And no, I'm just the only one that will help Mynock. I kid, I kid.and I thanks yous very much.
Mynock
12-02-2005, 03:01 PM
main.css
#myleftblue{
background: blue url(../images/leftblue.gif) repeat-y;
position: absolute;
left: 5px; top: 130px;
width: 150px; height: 100%;
}
indext.html
<div id="myleftblue"></div>
I want the 1 x 150px image to go to the bottom of the window image, but not make it scroll like it does now. Check it out here: http://www.geocities.com/msobotta/ It's making it 814pixels I think. I want to make it expand so it fits my content. If I can make it stop 5 pixels short of the bottom of the screen window even better, but I'll take what I can get.
Mynock
12-02-2005, 03:11 PM
I got it.
Mynock
12-02-2005, 04:55 PM
Ok, I'm now working on my buttons accross the top. The last link "About Us" isn't holding the properties I have set up. Check it out here: http://www.geocities.com/msobotta/
main.css
body {
background: white url(../images/grad.gif) repeat-x;
font-family: Trebuchet MS, Verdana, Geneva, Tahoma, Arial, Sans-serif;
}
#mytopred6{
background: red url(../images/topred.gif);
position: absolute;
width: 100px; height: 25px;
left: 655px; top: 105px;
font-size: 20px;
line-height: 22px;
text-align: center;
}
td { }
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:visited { }
a:hover {
color: white;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a:active { }
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel= "stylesheet" href="css/main.css" media="screen">
<title>Franz Reprographics</title>
</head>
<body>
<div id="mytopred1"><a href="services.html">Services</a></div>
<div id="mytopred2"><a href="products.html">Products</a></div>
<div id="mytopred3"><a href="planroom.html">Planroom</a></div>
<div id="mytopred4"><a href="rsa.html">RSA</a></div>
<div id="mytopred5"><a href="support.html">Support</a></div>
<div id="mytopred6"><a href="about.html">About Us</a></div>
</body>
</html>
What do you mean? It looks fine from here, what's it supposed to be doing?
Oh by the way? Until I saw this, I wasn't sure what you were trying to accomplish. Instead of the #myredtop divs, there is a cleaner way to set up a horizontal list, check this out -- http://css.maxdesign.com.au/listamatic/index.htm
Mynock
12-02-2005, 05:08 PM
My "about us" isn't different then the others?
Mynock
12-02-2005, 05:12 PM
I think, it's in the visited state.
they are all doing the same thing, it's purplish and underlined. The order of the link styles in the CSS does matter ... what do you want them to be doing in the visited state?
Mynock
12-02-2005, 05:18 PM
That was it.
Mynock
12-02-2005, 05:20 PM
Just stay the same, right now. I think I have that now.
Mynock
12-02-2005, 05:22 PM
Good, link. I have it set up now. I better keep it that way.
You got it? Did you fill in the information for a:visited and a:active? Gotta do that or it'll default. I think that's what it was doing with the purple/underline thing.
JPnyc
12-02-2005, 05:23 PM
You removed the type attr. from the link tag, and it's not closed either. The page won't validate like that, if you care about that
JPnyc brings up a good point. One thing I try to do is check validation as I go, even in the beginning stages. It's a great habit, you learn a lot that way.
Mynock
12-02-2005, 05:26 PM
You removed the type attr. from the link tag, and it's not closed either. The page won't validate like that, if you care about thatSo how should it look then?
http://validator.w3.org/ bookmark this if you haven't already.
let's see if I can do this without peeking lol
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
Mynock
12-02-2005, 05:28 PM
What does validation do for it?
makes it so that people like JPnyc and myself will think you're cool.
Validation will help you to make sure that there aren't any errors in your code as they pertain to web standards. Browsers are growing more and more standards compliant, so much of it is learning good habits now so that your stuff doesn't break all over the internet in future years.
Is that about right JPnyc?
Mynock
12-02-2005, 05:31 PM
I need that.
JPnyc
12-02-2005, 05:45 PM
Yes, EC has it correct. It basically means the page conforms to the doctype you have set, and it's less likely to have any issues in standards compliant browsers like any of the gecko ones, or Opera. You're also missing a <title></title> in the doc head.
Which is probably why the people who care about validation/standards are the same people that say IE SUCKS!
JPnyc
12-02-2005, 05:52 PM
Not me, I like IE.
Aww, that's sweet. I'll stop telling it to die then, just for you.
JPnyc
12-02-2005, 06:01 PM
The browser I use uses the IE rendering engine, although it also supports the gecko engine, however not to a really usable degree.
Mynock
12-02-2005, 06:08 PM
30 errors
Mynock
12-02-2005, 06:15 PM
All errors are in the code generated by the server.
JPnyc
12-02-2005, 06:23 PM
What code from the server? Are you using free hosting?
Mynock
12-02-2005, 06:25 PM
Yeah, Geocities just to test it. For some reason I can't upload to the web server at our other location.
That's not bad, really. I've seen far far worse. I have this extension for firefox that shows how many errors are on a page so I know everybody's business. *hehheh*
JPnyc
12-02-2005, 06:54 PM
Well then don't worry about it. If there were other errors in the code that's actually yours, I would've seen em.
Mynock
12-02-2005, 06:56 PM
Thanks Joe, I need people to pick out my faults.
Mynock
12-05-2005, 03:48 PM
Oh Joe, I think I'm going to hate the Gecko engine like you do. I already have issues. My bar doesn't show up.
main.css
#myleftblue{
background: blue url(../images/leftblue.gif) repeat-y;
position: absolute;
left: 5px; top: 0px;
width: 150px; height: 100%;
z-index: -1;
}
index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel= "stylesheet" href="css/main.css" media="screen" type="text/css" />
<title>Franz Reprographics</title>
</head>
<body>
<div id="mylogo"><a href="index.html"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred"></div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myleftblue"></div>
<div id="mytopred1"><a href="services.html">Services</a></div>
<div id="mytopred2"><a href="products.html">Products</a></div>
<div id="mytopred3"><a href="planroom.html">Planroom</a></div>
<div id="mytopred4"><a href="rsa.html">RSA</a></div>
<div id="mytopred5"><a href="support.html">Support</a></div>
<div id="mytopred6"><a href="about.html">About Us</a></div>
</body>
</html>
Mynock
12-05-2005, 03:49 PM
I'm also getting this error from Maxthon.
Line:2
Char:7
Code:0
Error:Invalid character
URL:http://www.geocities.com/msobotta/index.html (http://www.geocities.com/msobotta/index.html)
JPnyc
12-05-2005, 04:21 PM
Well technically the image bg url should be in ' ' . You don't have any scripting, so if there's a script error must be the free hosts', no?
Mynock
12-05-2005, 04:26 PM
In my css file? so background: blue url('../images/leftblue.gif') repeat-y; ?
JPnyc
12-05-2005, 04:42 PM
Yes, that's technically how it should appear.
Mynock
12-05-2005, 04:46 PM
I'll make those changes and see if any thing happens.
JPnyc
12-05-2005, 04:48 PM
By the way, you should try 1st with the file saved locally on your pc, and with all code generated by the host removed. Free hosts are notorious for bad coding and any little thing can break the site in gecko browsers
Mynock
12-05-2005, 04:51 PM
It got rid of my error on Maxthon, but I still don't have my vertical nav bar in Firefox. Any clue why?
JPnyc
12-05-2005, 04:56 PM
Probably because the z index is -1. Might be putting it behind something else. Remove that and see if it shows
Mynock
12-05-2005, 05:08 PM
Sure enough. Firefox was in the right on this one.
Mynock
12-05-2005, 07:20 PM
Is there a way I can get that bar to repeat 5 pixels from the top and bottom? Also is there anyway to position items from the bottom of the screen instead of the top left? Like if I wanted to position something 5 pixels from the bottom of the viewable area.
Mynock
12-06-2005, 02:39 PM
Anyone?
Yup ... http://www.w3schools.com/css/pr_background-position.asp
To make the "second gap" just use a div.
Mynock
12-07-2005, 02:32 PM
Ok, I've got everything positioned where I want it absolutely, but now I want to position all the information within a table that is centered, but I'm having no luck.
main.css
div.container {width:98%; margin:1%;}
table#table1 {text-align:center; margin-left:auto; margin-right:auto; width:800px;}
tr,td {text-align:left;}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"/>
<title>Franz Reprographics</title>
</head>
<body>
<div class="container">
<table id="table1">
<div id="mylogo"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred">MAIN</div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myaddress2"><b>Rochester</b><br />128 17th Ave NW<br />Miracle Mile Shopping Center<br />Rochester, MN 55901<br />507.287.1090 Phone<br />507.287.1807 Fax</div>
<div id="myleftblue"></div>
<div id="mytopred1"><a href="services.html">Services</a></div>
<div id="mytopred2"><a href="products.html">Products</a></div>
<div id="mytopred3"><a href="planroom.html">Planroom</a></div>
<div id="mytopred4"><a href="rsa.html">RSA</a></div>
<div id="mytopred5"><a href="support.html">Support</a></div>
<div id="mytopred6"><a href="about.html">About Us</a></div>
<div id="myrights">Copyright 2006<br />Franz Reprographics, Inc.<br /> All Rights Reserved</div>
<div id="mycontent">Welcome to Franz Reprographics!<br /><a href="services.html">Services</a></div>
</table>
</div>
</body>
</html>
why are you doing that? What's the purpose of the table?
jlknauff
12-07-2005, 02:38 PM
Ok, I've got everything positioned where I want it absolutely, but now I want to position all the information within a table that is centered, but I'm having no luck.That's because it won't work that way. You can't use absolute positioning and have it centered.
well, it depends. mynock, lets see the full css and a link again.
JPnyc
12-07-2005, 03:12 PM
If you mix absolute positioning with other types of positioning, you often run into trouble. Not always, but more often than not. You either go absolute all the way, or avoid it altogether, that is until you get better acquainted with css placement.
Mynock
12-07-2005, 03:30 PM
body {
background: white url('../images/grad.gif') repeat-x;
font-family: Trebuchet MS, Verdana, Geneva, Tahoma, Arial, Sans-serif;
color: black;
}
#mylogo{
position: absolute;
left: 5px; top: 5px;
z-index: 2;
}
#mytitle{
position: absolute;
left: 155px; top: 8px;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: bold;
font-style: normal;
text-align: center;
width: 260px;
z-index: 3;
}
#myaddress1{
position: absolute;
left: 415px; top: 8px;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 165px;
z-index: 3;
}
#myaddress2{
position: absolute;
left: 580px; top: 8px;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 175px;
z-index: 3;
}
#mytopblue{
background: url('../images/topblue.gif');
position: absolute;
width: 600px; height: 100px;
left: 155px; top: 5px;
z-index: 2;
}
#myleftred{
background: url('../images/leftred.gif');
position: absolute;
width: 150px; height: 25px;
left: 5px; top: 105px;
color: white;
font-size: 22px;
line-height: 25px;
font-weight: bold;
font-style: normal;
text-align: center;
z-index: 2;
}
#mytopred1{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 155px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred2{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 255px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred3{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 355px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred4{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 455px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred5{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 555px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred6{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 655px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#myleftblue{
background: url('../images/leftblue.gif') repeat-y;
position: absolute;
top: 130px; left: 5px;
width: 150px; height: 470px;
z-index: 2;
}
#myrights{
position: absolute;
left: 5px; top: 555px;
width: 150px;
color: white;
font-style: normal;
text-align: center;
font-size: 10px;
line-height: 12px;
z-index: 3;
}
#mybluebuttons{
background: url('../images/bluebutton.gif');
position: absolute;
left: 5px; top: 130px;
width: 150px; height: 25px;
color: white;
font-size: 13px;
line-height: 23px;
text-align: center;
z-index: 3;
}
#mycontent{
position: absolute;
left: 160px; top: 135px;
width: 590px;
color: black;
z-index: 2;
}
#mycontent a:link, #mycontent a:visited, #mycontent a:active {
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:hover {
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:hover {
color: white;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a:visted, a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
div.container {width:98%; margin:1%;}
table#table1 {text-align:center; margin-left:auto; margin-right:auto; width:800px;}
tr,td {text-align:left;}
http://www.geocities.com/msobotta/ is where it's at right now, but it doesn't currently feature this css file.
Absolute Isn't Always Absolute!
When explaining absolute positioning above, we assumed the containers are being positioned absolutely within the entire Web page. In fact, absolute positioning is a little more complex, and containers can actually be positioned absolutely within another container that has been positioned on the page.
I'd like to have the tabled centered and all my content positioned as I have it now withing the 800px width table.
You're making me very sad that you're using a table for layout. *tiny tear*
But anyway -- you'll need to position the containers as RELATIVE for the absolute positioning to work within it. Where the heck is Ryan? lol
Mynock
12-07-2005, 03:51 PM
Is there a better way to do this without you shedding a tear all be it a tiny one?
Mynock
12-07-2005, 03:52 PM
It's just a one celled table.
Mynock
12-07-2005, 03:57 PM
teach me I'm your padawan learner or younglin
me on left you on right
http://images.movieeye.com/store/images/yoda-and-chian-padawan-lightsaber-training-action-figures-star-wars-attack-of-the-clones.jpg
JPnyc
12-07-2005, 04:12 PM
If it's a single cell table, then just replace it with a div. Have you got an url to the site so I can see what you're trying to do?
Mynock
12-07-2005, 04:14 PM
http://www.geocities.com/msobotta/ is where I'm testing it currently.
Mynock
12-07-2005, 04:15 PM
right now up there I have everything position absolutely and if I could draw a box around it 800px wide (at the moment) and float it in the middle.
JPnyc
12-07-2005, 04:18 PM
Maybe I'm groggy but I don't see any table tags outside of what the host put there
LOL
Ok, get rid of the table. Tables are for tabular data, not layout.
So geez, I dunno, I don't think in code like Ryan and some others here do, but something like this where #content replaces the table ...
#container {
position: relative;
margin: 1% auto;
width: 98%;
}
#content {
position: relative;
margin: 0;
width: 800px;
}
Mynock
12-07-2005, 04:20 PM
ok, now how do I next that in my html file?
I am thinking you don't need "auto" on that content box. Experiment, I can't find an example of two containing divs off hand. Gggrr.
Ok hold on for the html.
Mynock
12-07-2005, 04:22 PM
Maybe I'm groggy but I don't see any table tags outside of what the host put there You sir are current. I didn't upload it because it wasn't working in preview in GoLive CS2. I will once I get it going in GoLive.
Originally Posted by index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"/>
<title>Franz Reprographics</title>
</head>
<body>
<div id="container"><!-- you had this as a class, use id for positioning -->
<div id="content">
<div id="mylogo"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred">MAIN</div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myaddress2"><b>Rochester</b><br />128 17th Ave NW<br />Miracle Mile Shopping Center<br />Rochester, MN 55901<br />507.287.1090 Phone<br />507.287.1807 Fax</div>
<div id="myleftblue"></div>
<div id="mytopred1"><a href="services.html">Services</a></div>
<div id="mytopred2"><a href="products.html">Products</a></div>
<div id="mytopred3"><a href="planroom.html">Planroom</a></div>
<div id="mytopred4"><a href="rsa.html">RSA</a></div>
<div id="mytopred5"><a href="support.html">Support</a></div>
<div id="mytopred6"><a href="about.html">About Us</a></div>
<div id="myrights">Copyright 2006<br />Franz Reprographics, Inc.<br /> All Rights Reserved</div>
<div id="mycontent">Welcome to Franz Reprographics!<br /><a href="services.html">Services</a></div>
</div><!-- ends content div-->
</div><!-- ends container div-->
</body>
</html>
Mynock
12-07-2005, 04:27 PM
that works I just have to put no padding I think in the css, I'll upload it in a sec.
JPnyc
12-07-2005, 04:27 PM
try margin:auto for centering
JPnyc
12-07-2005, 04:30 PM
FINALLY! I'm CURRENT! WHOOOOOOOHOOOOOOOOOO! I wasn't even current in my 20s!
Mynock
12-07-2005, 04:31 PM
http://www.geocities.com/msobotta/index.html uploaded Maxthon isn't centering it atm.
Mynock
12-07-2005, 04:32 PM
try margin:auto for centeringin containter or content or both?
JPnyc
12-07-2005, 04:32 PM
What's supposed to be centered? I still use center tags. The easiest most efficient way of centering something. CSS has yet to give us any method that works quite that efficiently.
LOL You're lookin' mighty current there JPnyc, what have you done?
Anyway, what I did was center that container div with margin (left right) auto, but I'm not sure if you're also positioning the inner div (content) relative, if you would center that too. I can't wait until this stuff gets easier.
Anyway -- mynock. Just because it is handy, when you set values for margins you can just write one line and it works like this (I have this little cheat sheet on my bulletin board because it comes in handy)
margin: 2px 3px 4px 1px; (four values = top, left, bottom, right)
margin: 10px 5em; (two values -- top&bottom, left&right)
margin: 5px 5px 5px; (three values -- top, bottom, L/R)
Just in case anybody cares.
mynock try centering the content div then.
margin: 0 auto;
don't use the center tag unless you want a tiny tear.
I kid, I kid. lol Let's not get into this debate again.
Mynock
12-07-2005, 04:37 PM
Ok, it works in FireFox.
body {
background: white url('../images/grad.gif') repeat-x;
font-family: Trebuchet MS, Verdana, Geneva, Tahoma, Arial, Sans-serif;
color: black;
}
#mylogo{
position: absolute;
left: 5px; top: 5px;
z-index: 2;
}
#mytitle{
position: absolute;
left: 155px; top: 8px;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: bold;
font-style: normal;
text-align: center;
width: 260px;
z-index: 3;
}
#myaddress1{
position: absolute;
left: 415px; top: 8px;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 165px;
z-index: 3;
}
#myaddress2{
position: absolute;
left: 580px; top: 8px;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 175px;
z-index: 3;
}
#mytopblue{
background: url('../images/topblue.gif');
position: absolute;
width: 600px; height: 100px;
left: 155px; top: 5px;
z-index: 2;
}
#myleftred{
background: url('../images/leftred.gif');
position: absolute;
width: 150px; height: 25px;
left: 5px; top: 105px;
color: white;
font-size: 22px;
line-height: 25px;
font-weight: bold;
font-style: normal;
text-align: center;
z-index: 2;
}
#mytopred1{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 155px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred2{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 255px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred3{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 355px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred4{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 455px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred5{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 555px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred6{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 655px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#myleftblue{
background: url('../images/leftblue.gif') repeat-y;
position: absolute;
top: 130px; left: 5px;
width: 150px; height: 470px;
z-index: 2;
}
#myrights{
position: absolute;
left: 5px; top: 555px;
width: 150px;
color: white;
font-style: normal;
text-align: center;
font-size: 10px;
line-height: 12px;
z-index: 3;
}
#mybluebuttons{
background: url('../images/bluebutton.gif');
position: absolute;
left: 5px; top: 130px;
width: 150px; height: 25px;
color: white;
font-size: 13px;
line-height: 23px;
text-align: center;
z-index: 3;
}
#mycontent{
position: absolute;
left: 160px; top: 135px;
width: 590px;
color: black;
z-index: 2;
}
#mycontent a:link, #mycontent a:visited, #mycontent a:active {
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:hover {
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:hover {
color: white;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a:visted, a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#container {
position: relative;
margin: auto;
width: 100%;
}
#content {
position: relative;
margin: auto;
width: 800px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"/>
<title>Franz Reprographics</title>
</head>
<body>
<div id="container">
<div id="content">
<div id="mylogo"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred">MAIN</div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myaddress2"><b>Rochester</b><br />128 17th Ave NW<br />Miracle Mile Shopping Center<br />Rochester, MN 55901<br />507.287.1090 Phone<br />507.287.1807 Fax</div>
<div id="myleftblue"></div>
<div id="mytopred1"><a href="services.html">Services</a></div>
<div id="mytopred2"><a href="products.html">Products</a></div>
<div id="mytopred3"><a href="planroom.html">Planroom</a></div>
<div id="mytopred4"><a href="rsa.html">RSA</a></div>
<div id="mytopred5"><a href="support.html">Support</a></div>
<div id="mytopred6"><a href="about.html">About Us</a></div>
<div id="myrights">Copyright 2006<br />Franz Reprographics, Inc.<br /> All Rights Reserved</div>
<div id="mycontent">Welcome to Franz Reprographics!<br /><a href="services.html">Services</a></div>
</div>
</div>
</body>
</html>
mynock, if you set the width to 100% for the container div, it's rather unecessary (I only bothered with that because you had it set to 98% and something or other). The body will take care of the 100% part. It's not hurting anything though, but just thought I'd share.
Mynock
12-07-2005, 04:45 PM
Maxthon isn't centering it or IE, hmmp.
JPnyc
12-07-2005, 04:49 PM
That's why I use center tags. I have little patience with this kind of stuff, and by the way, neither do employers in the real world. They want it to display properly and in all browsers and they want it yesterday. When IE catches up, and when the w3c removes some stray chunks of bone from their collective craniums, I'll use the newer methods.
Mynock
12-07-2005, 04:54 PM
So you put your content in a table and then center it?
JPnyc
12-07-2005, 05:11 PM
Depends on the content. If the content is so dense that it lends itself to a table, then yes. If it's more sparse then no, I use divs and css positioning, or divs with center tags, if I want them centered.
JPnyc
12-07-2005, 05:13 PM
If you think about it for a sec, what the w3c should've done is just give valign and halign commands for every element with values of left, right, center, and top, center, bottom. THat would make sense. I often wonder if our government also runs the w3c, with some of the completely nonsensical decisions they make
Big Perm-dizzle
12-08-2005, 04:17 AM
no centering tags needed little homies - check it
the margin and padding centers in macs and the text-align hooks up the pc losers
body {
margin: 0 auto;
padding: 0;
text-align: center;
}
div {
text-align: left;
}
Big Perm-dizzle
12-08-2005, 04:18 AM
but yeah there should be a halign and IE should be destroyed - I will now go door to door destroying IE and all its followers
Big Perm-dizzle
12-08-2005, 04:21 AM
Mynock you need to combine your font-size , font-heights etc
font: 11px/22px Georgia, Times New Roman, Times, serif;
JPnyc
12-08-2005, 04:22 AM
But how much more text is that then <center></center>? That's why I take issue with what they did, and didn't do.
Mynock
12-08-2005, 12:52 PM
Thanks, P-Dizzle and happy birthday. Hmmmm. Torn between two words. I just need to figure out how to do Joe's suggestion. The <center></center> goes in my index or in my css file?
Mynock
12-08-2005, 01:58 PM
I got the centering issue working, but my rollovers and visited aren't working correctly. I'm lost, cuz I had them working.
body {
background: white url('../images/grad.gif') repeat-x;
font-family: Trebuchet MS, Verdana, Geneva, Tahoma, Arial, Sans-serif;
color: black;
}
#mylogo{
position: absolute;
left: 5px; top: 5px;
z-index: 2;
}
#mytitle{
position: absolute;
left: 155px; top: 8px;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: bold;
font-style: normal;
text-align: center;
width: 260px;
z-index: 3;
}
#myaddress1{
position: absolute;
left: 415px; top: 8px;
text-align: left;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 165px;
z-index: 3;
}
#myaddress2{
position: absolute;
left: 580px; top: 8px;
text-align: left;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 175px;
z-index: 3;
}
#mytopblue{
background: url('../images/topblue.gif');
position: absolute;
width: 600px; height: 100px;
left: 155px; top: 5px;
z-index: 2;
}
#myleftred{
background: url('../images/leftred.gif');
position: absolute;
width: 150px; height: 25px;
left: 5px; top: 105px;
color: white;
font-size: 22px;
line-height: 25px;
font-weight: bold;
font-style: normal;
text-align: center;
z-index: 2;
}
#mytopred1{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 155px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred2{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 255px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred3{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 355px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred4{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 455px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred5{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 555px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#mytopred6{
background: url('../images/topred.gif');
position: absolute;
width: 100px; height: 25px;
left: 655px; top: 105px;
color: white;
font-size: 20px;
line-height: 23px;
text-align: center;
z-index: 2;
}
#myleftblue{
background: url('../images/leftblue.gif') repeat-y;
position: absolute;
top: 130px; left: 5px;
width: 150px; height: 470px;
z-index: 2;
}
#myrights{
position: absolute;
left: 5px; top: 555px;
width: 150px;
color: white;
font-style: normal;
text-align: center;
font-size: 10px;
line-height: 12px;
z-index: 3;
}
#mybluebuttons{
background: url('../images/bluebutton.gif');
position: absolute;
left: 5px; top: 130px;
width: 150px; height: 25px;
color: white;
font-size: 13px;
line-height: 23px;
text-align: center;
z-index: 3;
}
#mycontent{
position: absolute;
left: 160px; top: 135px;
width: 590px;
color: black;
z-index: 2;
text-align: left;
}
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:visted {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:hover {
color: white;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#content {
position: relative;
margin: auto;
width: 800px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"/>
<title>Franz Reprographics</title>
</head>
<body>
<center>
<div id="content">
<div id="mylogo"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred">MAIN</div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myaddress2"><b>Rochester</b><br />128 17th Ave NW<br />Miracle Mile Shopping Center<br />Rochester, MN 55901<br />507.287.1090 Phone<br />507.287.1807 Fax</div>
<div id="myleftblue"></div>
<div id="mytopred1"><a href="services.html">Services</a></div>
<div id="mytopred2"><a href="products.html">Products</a></div>
<div id="mytopred3"><a href="planroom.html">Planroom</a></div>
<div id="mytopred4"><a href="rsa.html">RSA</a></div>
<div id="mytopred5"><a href="support.html">Support</a></div>
<div id="mytopred6"><a href="about.html">About Us</a></div>
<div id="myrights">Copyright 2006<br />Franz Reprographics, Inc.<br /> All Rights Reserved</div>
<div id="mycontent">Welcome to Franz Reprographics!<br /><a href="services.html">Services</a></div>
</div>
</center>
</body>
</html>
Mynock
12-08-2005, 02:05 PM
http://www.geocities.com/msobotta/
JPnyc
12-08-2005, 02:08 PM
Center tags go around the content to be centered, perm's css method goes in the stylesheet.
Mynock
12-08-2005, 02:22 PM
It's like my visited and link aren't holding, but my hover is. I dunno. I've even tried dropping them in the correct div, like #content a:link{...}, but no dice.
Rearrange the order of your link styles in the stylesheet. It totally matters.
Mynock
12-08-2005, 04:11 PM
Which order should I have?
I knew you were going to ask that. You know, I read somewhere that it's LOVE HATE (link, visited, hover, active) but that doesn't always work the way I want it to (I think that's the way you've got it?) -- try moving them around a bit. Sorry man, I'm just rolling out of bed and flying without coffee.
JPnyc
12-08-2005, 04:19 PM
link, then visited, then hover
Mynock
12-08-2005, 04:20 PM
Hehe, I'll check it out. I've arranged it back to what GoLive had it orginally I believe. I'll look into it.
Mynock
12-08-2005, 04:21 PM
I have that and no dice. I have link, visited, hover, and active.
Mynock
12-08-2005, 04:22 PM
active works and hover, but not visited or link. hmmmm.
chris_bcn
12-08-2005, 04:37 PM
it is indeed LOVE/HATE for the order, or - if you want to go full web standards and uber geek!
Lord Vader's Handle Formerly Anakin (not great grammar, but it sticks for me)
(Link/Visited/Hover/FOCUS/Active)
oooh focus, I love focus. LOL I am not sure I can remember all that though, how 'bout
lewd
vikings
host
freaky
activities
Mynock
12-08-2005, 04:52 PM
Ouch, that hurts. Ok, that's the order I have them and it still doesn't work. Oh jeez I found it I had visted and not visited. Gawd!
Oh pooo. I was trying to find typos in the punctuation but wasn't scanning for spelling. Told you I'm flying without coffee.
chris_bcn
12-08-2005, 05:01 PM
I go by the mantra - "It's always a typo" whenever I run into funky fotmattin - and it usually is. typing sidenav rather than sideNav etc. Always the first thing to check!
Mynock
12-08-2005, 05:01 PM
IE doesn't inherit the font color it looks like it inherits the defaults instead of what you set up in your style sheet. If that's the case I have to set the color and make two different sets of links, one for the top (white) and one for the content (black). Damn you IE!
chris_bcn, how did your project turn out last night? You sort of disappeard after you found the corkscrew. ;)
IE doesn't inherit the font color it looks like it inherits the defaults instead of what you set up in your style sheet. If that's the case I have to set the color and make two different sets of links, one for the top (white) and one for the content (black). Damn you IE!
Hmmm, that's not right. IE does do funny things to rollovers but link styles should work.
Oh I see what you're saying now. Yes, don't mess with inheritance, just set up a new set of styles for the section/div in question. I often have multiple definitions for link styles in one sheet, rarely just one.
Mynock
12-08-2005, 05:08 PM
Well, it works in Opera and Firefox, but not on the IE engine.
Mynock
12-08-2005, 05:09 PM
I'll let you get back to ... err ... start working.
It's 9:09am, guess I'm late. Hope my boss won't notice.
Mynock
12-08-2005, 05:13 PM
I'm lovin' CSS, I can make huge changes and then only have to upload one file. Hooray!
it's delightful. wait 'till you learn the joy that is PHP includes. lol
chris_bcn
12-08-2005, 05:23 PM
chris_bcn, how did your project turn out last night? You sort of disappeard after you found the corkscrew. ;)
Once that corkscrew was found and the bottle opened the rest of the project went like a dream! Kind of - or maybe I just drank so much I dreamt that i had done the work - not sure yet!
Client meeting in 2 hours, so i guess I'll find out then
Big Perm-dizzle
12-08-2005, 06:16 PM
the beauty about not having the centering tags is if a client suddenly decides they want the site align left its not much of a change - duh other than that either way will work
morea
12-08-2005, 06:19 PM
oh bloody hell. I was going to say that we missed you, until I realized you were back to destroy me. :eek:
JPnyc
12-08-2005, 06:20 PM
Yeah the global nature of external css is the best feature of it. Well that and certain types of placements that can't be done without it, like superimposing one element over another, or setting the opacity, etc. But the ability to change one file and have the entire site reflect the change is just the bee's knees.
Mynock
12-08-2005, 06:35 PM
This is a web design thread, are you lost morea? :P
morea
12-08-2005, 06:41 PM
http://community.the-underdogs.org/smiley/moon.gif
Mynock
12-08-2005, 06:42 PM
I think this is the longest a thread has gone with out morea posting in it 175. :P
Mynock
12-14-2005, 07:13 PM
Ok, Here is my new issue. I'm doing a slight redesign of the website in order to make it compatable with 800 and 1024 screen widths. I want to have it so when I click on the services tab the services button is deactivated, but still looks the same. I've tried not linking it and just making the text bold, but then it effects the way the list is displayed. It doesn't look the same. Need to figure out something. http://www.geocities.com/msobotta/index.html
If you go to planroom it's different because there's no link and the text is just bold, and messes up the list slightly.
body {
background: white url('../images/grad.gif') repeat-x;
font-family: Trebuchet MS, Verdana, Geneva, Tahoma, Arial, Sans-serif;
color: black;
}
#navcontainer ul{
text-align: center;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
color: white;
width: 100%;
line-height: 16px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
}
#mylogo{
position: absolute;
left: 5px; top: 5px;
z-index: 2;
}
#mytitle{
position: absolute;
left: 155px; top: 8px;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: bold;
font-style: normal;
text-align: center;
width: 260px;
z-index: 3;
}
#myaddress1{
position: absolute;
left: 415px; top: 8px;
text-align: left;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 165px;
z-index: 3;
}
#myaddress2{
position: absolute;
left: 580px; top: 8px;
text-align: left;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 175px;
z-index: 3;
}
#mytopblue{
background: url('../images/topblue.gif') repeat-x;
position: absolute;
width: 600px; height: 100px;
left: 155px; top: 5px;
z-index: 2;
}
#myleftred{
background: url('../images/redbar.gif') repeat-x;
position: absolute;
width: 150px; height: 25px;
left: 5px; top: 105px;
color: white;
font-size: 22px;
line-height: 25px;
font-weight: bold;
font-style: normal;
text-align: center;
z-index: 2;
}
#myredbar{
background: url('../images/redbar.gif') repeat-x;
position: absolute;
width: 600px; height: 25px;
left: 155px; top: 105px;
color: white;
font-size: 18px;
z-index: 2;
}
#myleftblue{
background: url('../images/leftblue.gif') repeat-y;
position: absolute;
top: 130px; left: 5px;
width: 150px; height: 470px;
z-index: 2;
}
#myrights{
position: absolute;
left: 5px; top: 555px;
width: 150px;
color: white;
font-style: normal;
text-align: center;
font-size: 10px;
line-height: 12px;
z-index: 3;
}
#mybluebuttons{
background: url('../images/bluebar.gif') repeat-x;
position: absolute;
left: 5px; top: 130px;
width: 150px; height: 25px;
color: white;
font-size: 13px;
line-height: 23px;
text-align: center;
z-index: 3;
}
#content {
position: relative;
margin: auto;
width: 800px;
}
#mycontent {
position: absolute;
left: 160px; top: 135px;
width: 590px;
color: black;
z-index: 2;
text-align: left;
}
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:visited {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:hover {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: underline;
}
a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: underline;
}
#mycontent a:link {
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:visited {
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:hover {
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
#mycontent a:active {
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"/>
<title>Franz Reprographics - Planroom</title>
</head>
<body>
<center>
<div id="content">
<div id="mylogo"><a href="index.html"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred">PLANROOM</div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myaddress2"><b>Rochester</b><br />128 17th Ave NW<br />Miracle Mile Shopping Center<br />Rochester, MN 55901<br />507.287.1090 Phone<br />507.287.1807 Fax</div>
<div id="myleftblue"></div>
<div id="myredbar">
<div id="navcontainer">
<ul id="navlist">
<li><a href="services.html">Services</a></li>
<li><a href="products.html">Products</a></li>
<li><b>Planroom</b></li>
<li><a href="rsa.html">RSA</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
</div>
<div id="myrights">Copyright 2006<br />Franz Reprographics, Inc.<br /> All Rights Reserved</div>
<div id="mycontent">Welcome to Franz Planroom!</div>
</div>
</center>
</body>
</html>
Something like this perhaps? Where you set <li id="active"> ?? I am not sure if I am understanding the problem completely though.
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
Mynock
12-14-2005, 07:25 PM
does active remove the link?
Mynock
12-14-2005, 08:00 PM
I want it look at act like a link look like a link, but just not be a link. It just links back to the page, so I guess I don't care if people can click on it.
Yeah. Just leave it as a link, people are used to that sort of thing. You might make "active" a slightly different color or something, showing that person what page they're on.
OH -- and one more thing. People don't like being tricked. If it looks like a link and acts like a link, make it a link. I hate clicking on stuff and going "doh!"
Mynock
12-14-2005, 08:03 PM
Okie day, I just hate it when you can click on it and refresh the page. Oh well. I'm learning web design is like a marriage, it's about compromise.
but that's what "active" is for really. So you can say to the user "don't click me moron, I'm different because you're already on this page."
Mynock
12-14-2005, 08:22 PM
I thought active was for when you tabbed through the menu.
I believe when you do this in the context of the unordered list, it works a little differently.
Mynock
12-14-2005, 09:16 PM
Why isn't my page at the very top?
Mynock
12-14-2005, 09:17 PM
err, let me update the code.
body {
background: white url('../images/grad.gif') repeat-x;
font-family: Trebuchet MS, Verdana, Geneva, Tahoma, Arial, Sans-serif;
color: black;
}
#navcontainer ul{
text-align: center;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
color: white;
width: 100%;
line-height: 16px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
}
#mylogo{
position: absolute;
left: 5px; top: 0px;
z-index: 2;
}
#mytitle{
position: absolute;
left: 155px; top: 3px;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: bold;
font-style: normal;
text-align: center;
width: 260px;
z-index: 3;
}
#myaddress1{
position: absolute;
left: 415px; top: 3px;
text-align: left;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 165px;
z-index: 3;
}
#myaddress2{
position: absolute;
left: 580px; top: 3px;
text-align: left;
color: white;
font-size: 13px;
line-height: 15px;
font-style: normal;
width: 175px;
z-index: 3;
}
#mytopblue{
background: url('../images/topblue.gif') repeat-x;
position: absolute;
width: 600px; height: 100px;
left: 155px; top: 0px;
z-index: 2;
}
#myleftred{
background: url('../images/redbar.gif') repeat-x;
position: absolute;
width: 150px; height: 25px;
left: 5px; top: 100px;
color: white;
font-size: 22px;
line-height: 25px;
font-weight: bold;
font-style: normal;
text-align: center;
z-index: 2;
}
#myredbar{
background: url('../images/redbar.gif') repeat-x;
position: absolute;
width: 600px; height: 25px;
left: 155px; top: 100px;
color: white;
font-size: 18px;
z-index: 2;
}
#myleftblue{
background: url('../images/leftblue.gif') repeat-y;
position: absolute;
top: 125px; left: 5px;
width: 150px; height: 470px;
z-index: 2;
}
#myrights{
position: absolute;
left: 5px; top: 550px;
width: 150px;
color: white;
font-style: normal;
text-align: center;
font-size: 10px;
line-height: 12px;
z-index: 3;
}
#mybluebuttons{
background: url('../images/bluebar.gif') repeat-x;
position: absolute;
left: 5px; top: 130px;
width: 150px; height: 25px;
color: white;
font-size: 13px;
line-height: 23px;
text-align: center;
z-index: 3;
}
#content {
position: relative;
margin: auto;
width: 800px;
}
#mycontent {
position: absolute;
left: 160px; top: 130px;
width: 590px;
color: black;
z-index: 2;
text-align: left;
}
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:visited {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:hover {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: underline;
}
a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:link {
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:visited {
color: black;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#mycontent a:hover {
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
#mycontent a:active {
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css"/>
<link rel="shortcut icon" href="favicon.ico"/>
<title>Franz Reprographics</title>
</head>
<body>
<center>
<div id="content">
<div id="mylogo"><img src="images/logo.gif" height="100" width="150" border = "0" alt="back to main page" /></a></div>
<div id="mytopblue"></div>
<div id="myleftred">MAIN</div>
<div id="mytitle">Franz is Celebrating<br />40 Years of Quality<br />Reprographics Service!</div>
<div id="myaddress1"><b>Minneapolis</b><br />2781 Freeway Blvd.<br />Brooklyn Center, MN 55430<br />763.503.3401 Phone<br />763.503.3409 Fax<br />800.288.8541 Toll-Free</div>
<div id="myaddress2"><b>Rochester</b><br />128 17th Ave NW<br />Miracle Mile Shopping Center<br />Rochester, MN 55901<br />507.287.1090 Phone<br />507.287.1807 Fax</div>
<div id="myleftblue"></div>
<div id="myredbar">
<div id="navcontainer">
<ul id="navlist">
<li><a href="services.html">Services</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="planroom.html">Planroom</a></li>
<li><a href="rsa.html">RSA</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
</div>
<div id="myrights">Copyright 2006<br />Franz Reprographics, Inc.<br /> All Rights Reserved</div>
<div id="mycontent">Welcome to Franz Reprographics!<br /><a href="services.html">Services</a></div>
</div>
</center>
</body>
</html>
no need. in "body" in the css ...
margin-top: 0px;
if that doesn't work, look at what comes next in your html and check the top margins on those.
One trick that I use all the time for positioning is negative margin. Did you know that you can do this?
margin-top: -5px;
and such things? It's pretty cool.
Mynock
12-14-2005, 09:22 PM
DOH! I thought I tried that. I think I did "top: 0px;"
do margin-top though. you can move things up and down that way, "top" doesn't work in all cases, it depends on the type of positioning you're using.
Mynock
12-14-2005, 09:24 PM
That's right and worked. Now I need to make it so it flexes to a min and max. Oh Joy!
flexes huh? You need to do a liquid design you mean? Oh boy. lol
Mynock
12-14-2005, 09:33 PM
yeah with the left side being sold and the right side being liquid. I'm going to kludge a first attempt at it. Then I will do my homework. I think it's a task for tomorrow though.
good luckypoo. I am still mastering the liquid thing myself, using it whenever I can just to practice. It shouldn't be too bad in your case though.
Mynock
12-14-2005, 09:41 PM
The hardest part will be positioning the text at the top.
Mynock
01-16-2006, 09:31 PM
Is there any way I can position an image to the bottom left of the document? I use 100% and bottom and right, but it goes poof. It doesn't work. Any one? Do I have to use straight html?
You can do it!
http://www.w3schools.com/css/pr_background-position.asp
Mynock
01-17-2006, 12:57 PM
"Let me do it!" I do a pretty good impression of Stuart, if I do say so myself.
Mynock
01-17-2006, 01:26 PM
No Dice!
Mynock
01-17-2006, 01:30 PM
body {
margin-top: 0px;
margin-left: 0px;
}
#myTopCorner{
position: absolute;
left: 0px; top: 0px;
z-index: 5;
}
#myBotCorner{
background: url('../images/botCorner.gif') no-repeat;
background-position: bottom right;
z-index: 4;
}
a:link { }
a:visited { }
a:hover { }
a:active { }
<!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=utf-8" />
<link rel="stylesheet" href="css/header.css" media="screen" type="text/css"/>
<link rel="shortcut icon" href="favicon.ico"/>
<title>Black Diamond Extreme Motor Sports</title>
<style type="text/css"><!--
body {
background: url('images/topBar.gif') repeat-x;
position: absolute;
z-index: 4;
}
</style>
</head>
<body>
<div id="myTopCorner"><img src="images/topCorner.gif" height="250" width="250" border="0"/></div>
<div id="myBotCorner"></div>
</body>
</html>
Mynock
01-18-2006, 02:32 PM
I'm using html frames and is there a way I can make the bars the separate the frames invisible, cuz they ruin the design? www.bdextreme.com/snow (http://www.bdextreme.com/snow)
Mynock
01-18-2006, 02:37 PM
why?
Mynock
01-18-2006, 02:44 PM
I don't want to, but I don't know of a better way of doing it. I design like I have there. I want the left side to be a locked in width and the "banner" to have a locked height. I want them to expand to 100% without scrolling. I want the content window to have a dynamic width and height to match the screen window, and it horizontally scroll when needed. If I could figure out how to do it with iframes I would do so that way.
Mynock
01-18-2006, 02:54 PM
I could do with the blue stripe, but it works out better because of the curve.
Mynock
01-18-2006, 03:02 PM
Is there a way you can go 100% - 200px for a value?
Ryan8720
01-18-2006, 07:58 PM
Is there a way you can go 100% - 200px for a value?No.
You can remove the frame borders like so:
<frameset cols="200,*" border="0">
<frame name="menu" src="menu.html" noresize="noresize" scrolling="no" frameborder="0" />
<frameset rows="125,*" border="0">
<frame name="header" src="header.html" noresize="noresize" scrolling="no" frameborder="0" frameborder="0" />
<frame name="content" src="main.html" noresize="noresize" frameborder="0" />
</frameset>
</frameset>
Mynock
01-18-2006, 08:04 PM
Thank you much Ryan, but I'm now moving away from frames of any kind. I want to get that same design using HTML, XHTML, DHTML, CSS, and any other alphabet web terms.
Ryan8720
01-19-2006, 02:02 AM
That's good. I don't really like frames at all, but there is no other good way to get the stationary nav and header.
JPnyc
01-19-2006, 02:22 AM
To get lots of multi pages with a stationary nav withOUT using frames you really need to use serverside includes. If you try to do it with css alone, it'll get awfully messy
flutterby nut
01-22-2006, 04:30 AM
you guys are all awesome!...i learned a ton here!...thanks!
Mynock
01-23-2006, 06:52 PM
can't figure out how to center the logo atop the banner, but not have it go over to the left inside of 200px so I want the left of the centered area to be 200px and the left 100% I don't want the logo to run into my other logo. I need to do the same for my links that I will be placing up there also. http://www.bdextreme.com/snow/
html,body{/*html for FF Moz NS7 OP */
background: url(/snow/images/checks.gif) repeat;
margin:0;/* no margins body */
padding:0;/* no padding body */
height:100%;
width:100%;
z-index: 1;
}
*{margin:0;padding:0;}
#mytopbar{
background: url(../snow/images/topBar.gif) repeat-x;
height:125px;
z-index: 3;
}
#myleftbar{
width: 200px;
z-index: 3;
}
#mytopcorner{
background: url(../snow/images/topCorner.gif) no-repeat;
position: absolute;
top: 0px;
width: 200px; height: 250px;
z-index: 4;
}
#mybotcorner{
background: url(../snow/images/botCorner.gif) no-repeat;
position: absolute;
right: 0; bottom: 0;
width: 250px; height: 150px;
z-index: 4;
}
#mytoplogo{
background: url(../snow/images/topLogo.gif) no-repeat center center;
top: 5px; bottom: 100px;
z-index: 4;
}
.wra{
background: url('../snow/images/leftBar.gif') repeat-y;
}
* html .wra{
width:100%;
height:100%;
}
head+body .wra{
width:100%;
min-height:100%;
}<!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=utf-8" />
<link rel="stylesheet" href="../css/snow.css" media="screen" type="text/css"/>
<link rel="shortcut icon" href="../favicon.ico">
<title>Black Diamond Extreme Motor Sports</title>
</head>
<body>
<div class="wra">
<div id="mytopbar"></div>
<div id="myleftbar"></div>
</div>
<div id="mytopcorner"></div>
<div id="mybotcorner"></div>
<div id="mytoplogo"></div>
</body>
</html>
JPnyc
01-23-2006, 07:22 PM
Try margin:auto, or just use center tags.
Mynock
02-06-2006, 04:57 PM
I am having problem with my vertical list. Check it out here http://www.bdextreme.com/snow/
Anyone got an idea?
html,body{/*html for FF Moz NS7 OP */
background: url(/snow/images/checks.gif) repeat;
margin:0;/* no margins body */
padding:0;/* no padding body */
height:100%;
width:100%;
z-index: 1;
font-family: Arial, Verdana, San-serif;
color: black;
}
*{margin:0;padding:0;}
#mytopbar{
background: url(../snow/images/topBar.gif) repeat-x;
height:100px;
z-index: 3;
}
#myleftbar{
width: 150px;
z-index: 3;
}
#mytopcorner{
background: url(../snow/images/topCorner.gif) no-repeat;
position: absolute;
top: 0px;
width: 200px; height: 200px;
z-index: 4;
}
#mybotcorner{
background: url(../snow/images/botCorner.gif) no-repeat;
position: absolute;
right: 0; bottom: 0;
width: 250px; height: 150px;
z-index: 4;
}
#mytoplogo{
background: url(../snow/images/topLogo.gif) no-repeat;
position: absolute;
top: 0px; left: 115px;
width: 300px; height: 75px;
z-index: 4;
}
#mytopaddress{
background: url(../snow/images/topAddress.gif) no-repeat;
position: absolute;
top: 5px; left: 425px;
width: 185px; height: 70px;
z-index: 4;
}
.wra{
background: url(../snow/images/leftBar.gif) repeat-y;
}
* html .wra{
width:100%;
height:100%;
}
head+body .wra{
width:100%;
min-height:100%;
}
#horizontalnav{
position: absolute;
left: 125px; top: 75px;
margin-left: auto;
margin-right: auto;
color: black;
font-size: 18px;
font-style: italic;
font-weight: bold;
width: 550px; height: 25px;
z-index: 5;
}
#hornavlist li{
display: inline;
padding-left: 15px;
background-repeat: no-repeat;
}
#hornavlist a{
padding-left: 15px;
font-weight: bold;
text-decoration: none;
color: black;
}
#hornavlist a:link, #hornavlist a:visited{
padding-left: 15px;
background: url(../snow/images/bullet.gif);
background-position: 0 -16px;
background-repeat: no-repeat;
color: black;
}
#hornavlist a:hover{
padding-left: 15px;
background: url(../snow/images/bullet.gif);
background-position: 0 3px;
background-repeat: no-repeat;
color: black;
}
#vertitcalnav{
position: absolute;
left: 5px; top: 200px;
color: black;
font-size: 18px;
font-style: italic;
font-weight: bold;
z-index: 5;
}
#vertnavlist li{
padding-left: 15px;
background-repeat: no-repeat;
}
#vertnavlist a{
padding-left: 15px;
font-weight: bold;
text-decoration: none;
color: black;
}
#vertnavlist a:link, #vertnavlist a:visited{
padding-left: 15px;
background: url(../snow/images/bluebullet.gif);
background-position: 0 -16px;
background-repeat: no-repeat;
color: black;
}
#vertnavlist a:hover{
padding-left: 15px;
background: url(../snow/images/bluebullet.gif);
background-position: 0 3px;
background-repeat: no-repeat;
color: black;
}<!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=utf-8" />
<link rel="stylesheet" href="../css/snow.css" media="screen" type="text/css"/>
<link rel="shortcut icon" href="../favicon.ico">
<title>Black Diamond Extreme Motor Sports</title>
</head>
<body>
<div class="wra">
<div id="mytopbar"></div>
<div id="myleftbar"></div>
</div>
<div id="mytopcorner"></div>
<div id="mytoplogo"></div>
<div id="mytopaddress"></div>
<div id="mybotcorner"></div>
<div id="horizontalnav">
<ul id="hornavlist">
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Dealer Locator</a></li>
</ul>
</div>
<div id="verticalnav">
<ul id="vertnavlist">
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Dealer Locator</a></li>
</ul>
</div>
</body>
</html>
Ryan8720
02-06-2006, 08:02 PM
You have #vertitcalnav. It should be #verticalnav. Just a lovely spelling error.
Mynock
02-06-2006, 08:05 PM
Thanks for debugging my code Ryan :)
Oh man. that one had me stumped too, and I even checked spelling. I knew better than to try to help before my first cup of coffee though. lol
Mynock
02-06-2006, 08:19 PM
hehe, any help is good even if it's pre-coffee help
Mynock
02-09-2006, 08:10 PM
Started all over from stratch once I found a way to make it dynamic, and cleaner.
On IE my side bar disappears, but will reappear once you resize it. Only happens in IE. Any suggestions?
http://www.bdextreme.com/snow/
CSS
body {
background: url(../snow/images/checks.gif) repeat;
min-width: 700px; /*530 2x (LC fullwidth + CC padding) + RC width */
font-family: Arial, Verdana, san-serif;
color: black;
}
*{margin:0;padding:0;} /* Removes default margins and padding */
#container {
padding-left: 150px; /* LC width */
padding-right: 190px; /* RC width + CC Padding */
}
#container .column {
position: relative;
float: left;
}
#header {
background: url(../snow/images/topBar.gif) repeat-x;
height: 100px;
}
#center {
padding: 10px 20px; /* CC padding */
width:100%;
z-index: 2;
}
#left {
background: url(../snow/images/leftBar.gif) repeat-y;
width: 130px; /* LC width */
padding: 100px 10px 10px 10px; /* LC padding */
right: 190px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#left .inner {
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth +CC padding */
}
#footer {
background: url(../snow/images/botCorner.gif) no-repeat;
background-position: right;
height: 150px;
clear: both;
}
/* IE6 Fix */
* html #left {
left: 150px; /* RC fullwidth */
}
#mytopcorner{
background: url(../snow/images/topCorner.gif) no-repeat;
width: 150px; height: 200px;
position: absolute;
z-index: 1;
}
#mytopslice{
background: url(../snow/images/topSlice.gif) no-repeat;
left: 150px; top: 95px;
width: 50px; height: 108px;
position: absolute;
z-index: 1;
}
#mytoplogo{
background: url(../snow/images/topLogo.gif) no-repeat;
background-position: center;
height: 75px;
}
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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="../css/snow.css" media="screen" type="text/css"/>
<link rel="shortcut icon" href="../favicon.ico">
<title>Black Diamond Extreme Motor Sports</title>
</head>
<body>
<div id="header">
<div id="mytopcorner"></div>
<div id="mytoplogo"></div>
<div id="mytopslice"></div>
</div>
<div id="container">
<div id="center" class="column">Center Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
<div id="left" class="column">Left Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
<div id="right" class="column">Right Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
</div>
<div id="footer"></div>
</body>
</html>
what is this?
right: 190px; /* LC fullwidth + CC padding */
margin-left: -100%;
I don't understand what this is doing, please explain me.
be careful, too, of your left and right padding -- this is something that can cause problems in IE if you're using padding to position layout divs.
Mynock
02-09-2006, 08:30 PM
This is what I'm doing.
http://www.alistapart.com/articles/holygrail
Ahhh, sweet. He usually writes up explanations for browser limitations - did you see anything there? I don't have time to read through this right now but I will try a little later.
Mynock
02-09-2006, 08:57 PM
I found the fix: http://www.infocraft.com/articles/the_case_of_the_disappearing_column/
that's sweet. thanks for posting that, I want to give this a try.
Ryan8720
02-09-2006, 10:50 PM
Now that is a good article.
Mynock
02-10-2006, 12:48 PM
Exactly, There is another 3-column that is more complicated, but all three expand to the largest. I think I'm going to give that one a try on our company website. I'll post the links in some sticky.
Mynock
02-10-2006, 01:15 PM
I can't post in the sticky, so I will post them here and some mod can place them in there.
Three Column Layouts Using CSS
In Search of the Holy Grail (http://www.alistapart.com/articles/holygrail) fix (http://www.infocraft.com/articles/holy_grail_on_a_list_apart/)
Three Columns in detail (http://www.pmob.co.uk/temp/3colfixedtest_explained.htm) others (http://www.pmob.co.uk/)
On the others link there a whole list of awesome examples.
Mynock
02-10-2006, 02:34 PM
I'm positioning the address at the top and it wants to put it below the logo, but I don't want that so I used relative positioning, but then it affected my text. How can I avoid this? Or do I just position the the rest if it relative? I don't the address to affect the other images/objects. www.bdextreme.com/snow (http://www.bdextreme.com/snow)
CSS:
body {
background: url(../snow/images/checks.gif) repeat;
min-width: 700px; /*530 2x (LC fullwidth + CC padding) + RC width */
font-family: Arial, Verdana, san-serif;
color: black;
}
*{margin:0;padding:0;} /* Removes default margins and padding */
#container {
padding-left: 150px; /* LC width */
padding-right: 190px; /* RC width + CC Padding */
}
#container .column {
position: relative;
float: left;
}
#header {
background: url(../snow/images/topBar.gif) repeat-x;
height: 100px;
}
#center {
padding: 10px 20px; /* CC padding */
width:100%;
z-index: 2;
}
#left {
background: url(../snow/images/leftBar.gif) repeat-y;
width: 130px; /* LC width */
padding: 100px 10px 10px 10px; /* LC padding */
margin-left: -100%;
left: 150px; /* RC fullwidth for IE6 */
}
#container > #left {
left: -190px; /* -(LC fullwidth + CC padding) */
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth +CC padding */
}
#footer {
background: url(../snow/images/botCorner.gif) no-repeat;
background-position: right;
height: 150px;
clear: both;
}
#mytopcorner{
background: url(../snow/images/topCorner.gif) no-repeat;
width: 150px; height: 200px;
position: absolute;
z-index: 1;
}
#mytopslice{
background: url(../snow/images/topSlice.gif) no-repeat;
left: 150px; top: 95px;
width: 50px; height: 108px;
position: absolute;
z-index: 1;
}
#mytoplogo{
background: url(../snow/images/topLogo.gif) no-repeat;
background-position: center;
height: 75px;
}
#mytopaddress{
background: url(../snow/images/topAddress.gif) no-repeat;
background-position: right;
position: relative;
top: -69px;
height: 70px;}
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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="../css/snow.css" media="screen" type="text/css"/>
<link rel="shortcut icon" href="../favicon.ico">
<title>Black Diamond Extreme Motor Sports</title>
</head>
<body>
<div id="header">
<div id="mytopcorner"></div>
<div id="mytoplogo"></div>
<div id="mytopslice"></div>
<div id="mytopaddress"></div>
</div>
<div id="container">
<div id="center" class="column">Center Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
<div id="left" class="column">Left Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
<div id="right" class="column">Right Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
</div>
<div id="footer"></div>
</body>
</html>
Mynock
02-10-2006, 03:59 PM
I got it I used right:0px instead.
Mynock
04-18-2006, 09:20 PM
I'm been doing pretty well in CSS for awhile, but I'm at a road block. My inside shadow has like a little space. That shouldn't be there. You can see here. Check the top banner it's there. www.toplinedrafting.com (http://www.toplinedrafting.com/)
Index:
<!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=UTF-8" />
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<title>Top Line Drafting and Design</title>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="left">
<div id="mytopblue"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="plans.html">Plans</a></li>
<li><a href="pricelist.html">Price List</a></li>
<li><a href="orderform.html">Plan Order Form</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div id="clearheader"></div> <!-- to clear header -->
<div id="centercontent"> <!--centre content goes here -->
<p>Home</p>
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div> <!-- to close outer div -->
<div id="footer">
<p>34326 Hupp St. NE - Cambridge, MN 55008 - Office: 763-689-3244 - Fax: 763-691-1207</p>
</div>
<div id="header">
<img alt="Top Line Logo" src="images/webLogo.gif" />
<img src="images/leftRed.gif"/>
</div>
</body>
</html>
CSS
* {margin:0;padding:0}
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
background: url('../images/leftBlue.gif') repeat-y;
font-family: Georgia, 'Times New Roman', Times, serif;
color: black;
padding: 0;
margin: 0;
}
#header{
background: #ed1c24 url('../images/topRed.gif') repeat-x;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
overflow: hidden;
}
#footer {
background: #ed1c24 url('../images/topRed.gif') repeat-x;
width: 100%;
clear: both;
height: 25px;
text-align: center;
position: relative;
color: white;
font-style: normal;
font-size: 10px;
vertical-align: middle;
line-height: 25px;
overflow: hidden;
}
#clearfooter { /*needed to make room for footer*/
clear: both;
height: 25px;
}
div,p { /*clear top margin for mozilla*/
margin-top: 0;
}
#outer{
min-height: 100%; /*for mozilla as IE treats height as min-height anyway*/
margin-left: 200px;
margin-bottom: -25px;
}
* html #outer{ /* ie 3 pixel jog*/
height: 100%;
margin-left: 200px;
}
#left {
position: relative; /* ie needs this to show float */
width: 200px;
float: left;
margin-left: -199px; /* must be 1px less than width otherwise won't push footer down */
padding-top: 70px; /* needed to make room for header */
left: -1px; /* line things up exactly */
}
#clearheader{ /*needed to make room for header*/
height: 70px;
}
* html #left { /* three pixel jog */
margin-right: -3px;
}
#navcontainer {
width: 200px;
}
#navcontainer ul{
list-style-type: none;
padding-left: 15px;
}
#mytopblue {
background: url('../images/topBlue.gif') no-repeat;
width: 200px;
height: 8px;
}
#myleftred {
background: url('../images/leftRed.gif') no-repeat;
padding-left: 200px;
width: 8px;
height: 70px;
}
a:link {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:visited {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a:hover {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: underline;
}
a:active {
color: white;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
JPnyc
04-18-2006, 09:46 PM
I'm short of time at the moment so I'll ask a quick logical question. Are all margins and padding in all involved elements set to 0px?
Mynock
04-18-2006, 09:54 PM
Yeah first line of CSS.
Mynock
11-30-2006, 06:13 PM
http://www.franzrepro.com/palanisami/
I am having issues with a dynamic two column layout. It works with FF, but not IE and I was wondering if I could get around using:
#page{
margin: 0 auto;
width: 760px;
}
Which it says I need in the design I'm following.
CSS
#column1 {
background-color: #9c9951;
margin-left: 2%;
margin-top: 15px;
margin-bottom: 15px;
float:left;
width: 47%;
}
#column2 {
background-color: #e8d279;
margin-left: 2%;
margin-top: 15px;
margin-bottom: 15px;
float:left;
width: 47%;
}<!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" />
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css"/>
<title>xxxx & Associates, Inc.</title>
</head>
<body>
<div id="outer">
<div id="left">
</div><!-- end left div -->
<div id="clearheader"></div><!-- to clear header -->
<div id="centercontent"><!--center content goes here -->
<div id="column1">
left
</div><!-- end column1 div -->
<div id="column2">
right
</div><!-- end column1 div -->
<br />
<div id="navlist">
<ul>
<li><a href=" ">Who We Are</a> | </li>
<li><a href=" ">What We Do</a> | </li>
<li><a href=" ">How to Reach Us</a> | </li>
<li><a href=" ">Our Work</a> | </li>
<li><a href=" ">Clients</a></li>
</ul>
</div><!-- end navlist div -->
<br />
<div id="myaddress">
<ul>
<li>5661 International Parkway <img alt="" src="images/bullet.gif" align="middle"/> </li>
<li>Minneapolis, MinnesoTwota 55428 <img alt="" src="images/bullet.gif" align="middle"/> </li>
<li>(793) 533-9403 <img alt="" src="images/bullet.gif" align="middle"/> </li>
<li>FAX (763) 533-9586</li>
</ul>
<ul>
<li>206 NW 6th Street <img alt="" src="images/bullet.gif" align="middle"/> </li>
<li>Brainerd, Minnesota 56401 <img alt="" src="images/bullet.gif" align="middle"/> </li>
<li>(218) 829-2420 <img alt="" src="images/bullet.gif" align="middle"/> </li>
<li>FAX (218) 829-2423</li>
</ul>
<ul>
<li>e-mail (xxxx)</li>
</ul>
</div><!-- end myaddress div -->
</div><!-- end centercontent div -->
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">
Copyright 2006 - xxxx & Associates, Inc. - All Rights Reserved
</div><!-- end footer div -->
<div id="header">
<div id="mytoplogo"></div><!-- to place logo in center at top -->
<div id="navlist">
<ul>
<li><a href=" ">Who We Are</a> | </li>
<li><a href=" ">What We Do</a> | </li>
<li><a href=" ">How to Reach Us</a> | </li>
<li><a href=" ">Our Work</a> | </li>
<li><a href=" ">Clients</a></li>
</ul>
</div><!-- end navlist div -->
</div><!-- end header div -->
</body>
</html>
JPnyc
11-30-2006, 07:21 PM
What's the behavior you're getting in IE that you don't want?
Mynock
11-30-2006, 07:22 PM
The second column is dropping blow the first instead of next to it.
JPnyc
11-30-2006, 07:22 PM
Nevermind, I see it. Add display:inline to each, and if that doesn't do it alone, then add white-space:nowrap; to the containing element.
JPnyc
11-30-2006, 07:23 PM
Also be sure the containing element is wide enough to hold both columns PLUS any margins to the left or right of either.
Mynock
11-30-2006, 07:28 PM
Poof, why wouldn't they include that in the book, unless I through another clong into the wheel or took one out. Many thanks to you Joe. I'm working my way through this CSS stuff. I've got the basics down it just the minor details, I'm missing you just don't pick up unless you've been doing it for a while or are a great website mind.
JPnyc
11-30-2006, 08:04 PM
Well the truth is CSS is so powerful that there's lots more than one way to do the same thing. Equally true though, is that IE6's CSS support is extremely poor. But you learn ways to workaround that.
jlknauff
12-03-2006, 12:20 AM
http://www.wildfiremarketinggroup.com/dev/dwe/
Any idea why the contact image at the bottom of the page isn't flush? I can't find the padding or margin value that is affecting it. Any ideas? :mad:
chalsema
12-03-2006, 02:20 AM
What should it be flush with? Maybe it's because of this: "<div align="right">"
jlknauff
12-03-2006, 02:32 AM
nope. it should be flush with the footer. that has nothing to do with it.