19 replies [Last post]
Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

My first css design

Well then i will be sure to get all the tables out Smile

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

My first css design

Quote:
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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

My first css design

Ditch the absolute positioning immediately.

Verschwindende wrote:
  • CSS doesn't make pies

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

My first css design

What should I use then? And whats so bad about using absolute positioning?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

My first css design

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 5 years 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

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.

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

My first css design

Ok if absolute positioning is something a newb to css should not use then how do I make my header?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My first css design

Jarritos wrote:
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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

My first css design

I was never able to get that to work and i am sorry if it seemed like I ignored it

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jarritos
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-8
Joined: 2005-09-06
Posts: 13
Points: 0

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference