[RESOLVED] First CSS Layout Attempt

[grimmylina]

Hi....

Could someone pretty please do me a favor and tell me if my CSS here is correct:

http://www.catalinasouthbeach.com/ku...hen/index.html


The only page working besides that one is the "welcome" one. I kind of used a table for the bottom nav....


Thank you very, very much!!!!!

[blue-eye-labs]

Well the CSS validates over at W3 so it looks like you're fine.

[grimmylina]

Thank you!! Yup...saw that.

[eval(BadCode)]

Hi....

Could someone pretty please do me a favor and tell me if my CSS here is correct:

http://www.catalinasouthbeach.com/ku...hen/index.html


The only page working besides that one is the "welcome" one. I kind of used a table for the bottom nav....


Thank you very, very much!!!!!

It looks really nice. I noticed you're using a dreamweaver imageswap script. I don't have javascript enabled, but you can still make those images rollover with CSS:

#imageblock_reservations {
min-width:200px;
min-height:50pxl
background-image:url('kungfu_images/reservations.jpg');
}
#imageblock_reservations a:hover {
background-position:-200px 0px;
}

then make the button two times the width it normally is for the individual images (400px in this example) and it will appear to be swaping the images out without javascript.

the width and margins on the wrapper rule mean I have to scroll horizontally, and I hate scrolling horizontally.

On the reservations page it's much more visible, one of your block elements has it's width set too large (easy fix- set max-width:image-width, and set overflow:hidden), then it will scale the page back down.

Otherwise it's an awesome site I wish you would design for me.

edit: just because the css validates doesn't mean it's going to show up the same in all browsers, or even show up how you want it to.

[grimmylina]

Oh thank you!!

1.) I will try the css image swap. I've been too chicken to do that but I have to force myself.

2.) Yeah...I'm also thinking it's a little too wide. I think I will fix that as well.

3.) You don't happen to know which block element it is do you? I have code there from "open table" the company that does the table booking. Is it one of these?

http://www.catalinasouthbeach.com/ku...heets/feed.css


Thank you!!! Very sweet....

[Shorts]

Not bad, I concur with the a:hover CSS image swap. That way users without javascript can also have the same functionality. Also, the copyright on the bottom, is that necessary to be an image?

Lastly, on a 1024x768 monitor it looks off. Besides having to scroll right, the additional 40 pixel margin on the left doesn't help. Is there a necessity for it being 40 on one side and 50 on the other? If you want it to be centered, go with: { margin:10px auto 40px; } on wrapper.

Edit: Forgot to mention, if you aren't using it right now then get on it asap. FireBug for Firefox is a developers godsend when it comes to seeing the mechanics of a page.

[eval(BadCode)]

the wrapper div

.wrapper{
margin: 10px 50px 15px 40px;
padding: 0;
width: 1097px;
background-color: #000000;}

In the .wrapper rule:

margin: 10px 50px 15px 40px;

I would change the 50px to 0px (thats the right side) and the 40px to 0px (that's the left side).

Width:1097px (this is also the width of middle.jpg).
You can (I haven't looked, but probably) resize all of the images using an image editor, or try to work some kind of magic using css with z-index to resize them in the browser case by case (much more frustrating). There's no way to make everyone happy with a single webpage, eventually you have to say that it's done. 800px or 1024px (width) is the minimum sizes I try to design for.

A hint on the css rollovers- put them into a table and set the padding and borders to zero. Otherwise they may show up in a vertical list for browsers older than whatever the current IE browser is.

Sometimes I use the imageswap script if the rest of the site requires javascript anyways, then I put a

<script type="text/javascript"></script>
<noscript>
    <span style="color:red">This page requires javascript to show up correctly.
    </span>
</noscript>

On the reservations page:
div #Home .styletop 60x23
div #MainPics .styletop 398x341

those are the two blocks causing that excessive overflow, I think the reason is the use of position:abolute.

Here's what the blocks look like with a red border around them (zoomed way out):
http://img186.imageshack.us/img186/8187/blocksize.gif


Cool font, I'm digging it.

[grimmylina]

Tadaaaaaa...almost there?

Updated Site

1.) I narrowed the wrapper to 958px ... I hope that's better. No more horizontal scrolling.

2.) Made css rollovers for the menu (and have it in a table with 0 padding). First time I ever did this....It took me a while but it was a great learning experience.

3.) I got rid of that .styletop class tag....I was cutting/pasting divs from another page and that's how that got there

4.) Took out all unnecessary javascript code

5.) Downloaded Firebug...

6.) The only things that worry me are the #Content div and #MainPics div. They look okay in my Firefox but in my Safari they look a bit off. Same thing with the image on the index.html page. Is there a way to ensure they are always in the perfect location?

6.) Let me know if you want the font file. They were all free.

Thank you soooo, sooooo much!!!!!

[eval(BadCode)]

I check my work to make sure it shows up in firefox 3.6.8 and Internet Explorer 8 using compatibility mode. If it shows up correctly in any other browser, it's a sweet bonus.

You should put the address for the restaurant on the website, makes it easier to find.
Make the DJ's face the favicon.ico, or something else.

nice work

[Shorts]

Looks good on my latest Firefox and Opera (Windows 7) and 1024x768.

Good job with the css rollovers. Personally I feel like I just took off some dead weight when changing js rollovers to css.

Have to say good job over all. Now just have to get past the table for the bottom nav and you're all set! For this project I would say don't even worry about it, save that for your next project. Every project you do try to add a new technique and enjoy.

[grimmylina]

Thank you!!! They took me forever but I finally got them. I've been using the Dreamweaver rollover javascript for forever because css seemed daunting but I finally got it. Yayyyyy!!!!

[grimmylina]

I should know this already but is there any way to get those middle content divs to move along with the wrapper?

So that if you stretch the page out the background always stays put?


-----

I changed the wrapper css to this:

.wrapper{
margin:0 auto;
padding-left: 60px;
width: 958px;
position: fixed;
background-color: #000000;}

is that okay? It seems to work or is the 60pixel padding a no-no?

[eval(BadCode)]

it looked fine before, but I think when you changed the wrapper to fixed it took away the scroll-bar on the right which means I have to zoom out to view the menu at the bottom.

I don't understand what you're asking. Are you wanting the wrapper to stay centered even if I scroll out a lot? You could throw wrapper into a div align=center, it's depreciated but works (it looks like you already know the css equivalent).

You could also just try removing the middle.jpg and setting body background-image=middle.jpg background position = 15% 15% or something like that. If you're looking to just keep that background image set at a certain place.

[grimmylina]

Ok, I switched it back. I'd rather have it be accessible to everybody then to be picky. I just wasn't crazy about this (attached)....

Like if you want to stretch out the page....the text doesn't move along with the background.

[eval(BadCode)]

.content (line 17)
{
float: left;
height: 510px;
width: 100%;
background-image: url("../images/common/middle.jpg");
background-color: #000000;
}

add: margin:0 auto;
remove: float left (why float?)

it's some combination of the above 2 rules. (and possible position:absolute)

I suggest you get "web developer" for firefox (I found firebug impossibly complicated to get started with).

On web developer there's a tab Information -> block size
and CSS -> view style information

if you combine these two tabs you'll figure out whats wrong much much faster.



Web developer will also show you warnings like css rules that are miswritten, javascript that doesn't compile, unclosed tags etc.

for example your CSS:

#navbar a {
text-decoration: none;
display: block;
height: 54px;
text-indent: -5000px;
background-color:#000;:
}