Hey,
This is the first css design I have done and was wondering if people could give me some suggestions. Like if I did something wrong or if there is a better way to do it. Pretty much any feedback at all.
http://movie-gurus.com/1/2/
Also I looked in ie and realized the hover on the movie images does not work and was wondering if anyone knew how to fix this. Also i would like to make the nav bar completly css and was wondering if anyone could tell me how I could do this
Thanks
My first css design
I think you'll find people here will be even less impressed at the CSS-ness of your design than they were at Sitepoint as this forum actively promotes tabless design.
I offered you a way to do this without tables on Sitepoint but you haven't indicated whether you've tried to implement those suggestions or not.
My first css design
Yah i am working on it...I was just wondering if there is anything else i can do to make it better
My first css design
Well, we can't really comment until you ditch the table-based layout and convert it all to CSS.
Then we can tell you if there's a better way of doing things.
My first css design
Well then i will be sure to get all the tables out
I just have a few question for you how would you suggest I do the nav in css (the main problem being i dont know how to include top_link_seprator.jpg) and how would you suggest i fix the ie problem i stated above?
My first css design
The navigation will be a styled list, have a read of the alistapart article entitled "sliding doors of CSS" to get a great explanation.
The IE issue is due to IE's supporting of :hover ONLY on link elements <a>. But to be honest, it's not worth the hassle. If they ARE links, then it will work in IE.
If they're NOT links, then screw IE and let decent browsers display the visual niceties.
My first css design
The IE issue is due to IE's supporting of :hover ONLY on link elements <a>. But to be honest, it's not worth the hassle. If they ARE links, then it will work in IE.
I don't get what you mean I tried making one of them a link and it still did not work.
This is my first attempt at a no table layout
http://movie-gurus.com/1/4/
and in ff it looks fine but in ie it has moved over to the right and i cant seem to figure out why.
I read "sliding doors of CSS" which it helps a lot I just have one more question how would I do just a plain hover in css like how would it look in the xhtml and how would it look in css.
Thanks again
My first css design
Ditch the absolute positioning immediately.
My first css design
What should I use then? And whats so bad about using absolute positioning?
My first css design
http://www.csscreator.com/css-forum/ftopic13756.html
While you're at it, you might want to read this as well:
My first css design
I actually tentatively advised this poster to use absolute positioning for certain elements for this layout in a thread on another forum, but that was for HTML that was substantially different.
My first css design
The background image at http://movie-gurus.com/forum/style_images/mgdefault/images/bg2.jpg and the black border around the main table is a bit of an oddity.
My first css design
Ok if absolute positioning is something a newb to css should not use then how do I make my header?
My first css design
Ok if absolute positioning is something a newb to css should not use then how do I make my header?
I already gave you a suggestion in the Sitepoint thread which you seem to have completely ignored.
/* image replacement */ .IR { position: relative; overflow: hidden; font-size: 1em; } .IR em { display: block; position: absolute; top: 0; left: 0; z-index: 1; } #header { position: relative; background: url(stripeybackground.gif) repeat-x; } h1, h1 em { width: XXXpx; height: XXpx; background: url(moviegurus.gif) no-repeat; } h2, h2 em { width: XXXpx; height: XXpx; background: url(truthaboutmovies.gif) no-repeat; } img#monk { position: absolute; z-index: 2; top: XXpx; left: XXpx; } ul#topnav { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: XX; } ul#topnav li { display: inline; width: 3em; border-right: 1px solid #000; } p#topquote { position: absolute; top: XX; left: 0; width: 100%; text-align: center; } <div id="header"> <h1 class="IR">Movie Gurus</h1> <h2 class="IR">The truth about movies</h2> <img id="monk" src="monk" /> <ul id="topnav"> <li>Home</li> <li>Review</li> <li>Features</li> <li>Community</li> <li>Contact</li> </ul> <p id="topquote">"Random Quote...Random Quote...Random Quote...Random Quote...Random Quote..." - Random Quote</p> </div>
Doing it this way would require some position: absolute. Doing it this way:
<div id="header"> <ul id="topnav"> <li>Home</li> <li>Review</li> <li>Features</li> <li>Community</li> <li>Contact</li> </ul> <p id="topquote">"Random Quote...Random Quote...Random Quote...Random Quote...Random Quote..." - Random Quote</p> <h1 class="IR">Movie Gurus</h1> <h2 class="IR">The truth about movies</h2> <img id="monk" src="monk" /> </div>
may be easier to pull off as it wouldn't require as many elements to be positioned absolutely.
My first css design
I was never able to get that to work and i am sorry if it seemed like I ignored it
My first css design
Well I can tell you that from a semantic HTML point of view, what I've offered so far is about as good as you're going to get (ie I doubt others on this board will come up with anything very different) so rather than asking "how do I make my header" you should be asking for advice on how to get what you've been offered so far to work and explaining why it hasn't worked for you so far.
My first css design
Alright then
I took the code you gave me and put it here http://movie-gurus.com/1/5/ as you can see everything kind of layers on top of each other. I don't get how I can movie them and not use absolute positioning.
My first css design
Give this a go:
<!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> <title>...</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> * { margin: 0; padding: 0; } body { font: 70%/150% Verdana, Arial, sans-serif; } /* image replacement */ .IR { position: relative; overflow: hidden; font-size: 1em; } .IR em { display: block; position: absolute; top: 0; left: 0; z-index: 1; } #header { position: relative; background: url(http://movie-gurus.com/1/5/images/header-1.gif) repeat-x 0 2.7em; overflow: hidden; min-height: 160px; } * html #header { height: 160px; } h1, h2 { float: left; display: inline; } h1 { margin: 0.5em 0 0 20em; } h2 { margin-left: 8em; } h1, h1 em { width: 239px; height: 97px; background: url(http://movie-gurus.com/1/5/images/header-3.gif) no-repeat; } h2, h2 em { width: 332px; height: 94px; background: url(http://movie-gurus.com/1/5/images/header-4.gif) no-repeat; } img#monk { position: absolute; z-index: 2; top: 0; left: 20px; } ul#topnav { height: 2em; padding-top: 0.5em; background: #990000; color: #FFF; text-align: center; } ul#topnav li { display: inline; width: 3em; margin-right: 3em; padding-right: 3em; border-right: 1px solid #000; } p#topquote { text-align: center; background: #FFE9B8; border-bottom: 1px solid #000; font-weight: bold; color: #990000; } .clearer { clear: both; } </style> </head> <body> <div id="header"> <ul id="topnav"> <li>Home</li> <li>Review</li> <li>Features</li> <li>Community</li> <li>Contact</li> </ul> <p id="topquote">"Random Quote...Random Quote...Random Quote...Random Quote...Random Quote..." - Random Quote</p> <h1 class="IR"><em></em>Movie Gurus</h1> <h2 class="IR"><em></em>The truth about movies</h2> <img id="monk" src="http://movie-gurus.com/1/5/images/header-2.gif" /> <div class="clearer"></div> </div> </body> </html>
Just one thing to note: with this image replacement method, your images can't have any transparent areas or the text shows through from behind.
My first css design
http://movie-gurus.com/1/4/ it works a lot better but 2 things movie gurus is not over far enough and you can see the text should i get rid of those?
Also how did you fix it...i am still a little confused about the whole thing.
Finally how would I make the nav hover work?
My first css design
You can adjust the horizontal position of 'movie gurus' with the left margin on the h1 (currently 20em). The text shows through from behind because you've got transparent areas in your GIF (as mentioned above). You need to re-export the graphic with no transparency.
Not sure what you mean by how to get the nav hover to work. You haven't made any of those links.