Menu alignment problem

[kade119]

thanks i appreciate, im learning it .. but its taking a while.. i bought a few books any advice on really getting it down though? the book i have is "intergrating xhtml and css"

[Taltos]

First of all, here is my attempt at describing the IE box model hack from another thread

The short answer on the hack is the bogus characters are ignored by IE so it sees those instructions. Other browsers ignore the whole line because of the invalid character in the instruction.

But, your problem is not the one solved by the box model hack. IE7 does not need the box model hack and in IE7 it looks great. In FF it is high and to the right. I don't have a great answer for this one. I have seen it a bunch of times on my recent site and haven't found or heard a good answer yet. I've asked the same question here.

My suspicion is that it has to do with different default values for borders, padding, and margins between IE7 and FF. The best suggestion if have is specify borders and margins on ALL style definitions to avoid this. I have solved this on my latest site but unfortunately I was doing so much too it that I am not certain this was the solution. Let me know if that works for you as it has been a pain in my ass and quite a few others.

[kade119]

thanks taltos... if i happen to come across the answer i will for sure post it, thanks for your patience.. you think the best way to really learn css thoroughly is to just tinker with it?

[Taltos]

kade, no problem on the help. I got your PM. The only thing I as is we do it here so others can learn from what we learn.

Yes, for myself, the best way to learn was tinker, experiment, reverse engineer other's CSS.

As for your other question, as a designer you did exactly what a lot of us did early on. You did it the way you were comfortable and made the design the background image. I do thing you will want to change that. It is quick and easy, and I have done that as a quick prototype to see how the image in my head looks on the screen. But it will likely cause you trouble later on. A good example of that is that when your menu is lined up right, the main menu words don't fit properly between the light grey vertical lines in your background. You now have to go change the background image. It also makes for a larger graphic that has to be loaded.

Take a look at your design and see blocks or areas that will need their own style and area. There are a million ways to do this that work so you will find your own. For me, I see the Orange block and see a <div> for that block.

I see a menu <div> that you really already have. I see a history <div>. These are all areas on your design that have a different look and so will likely require a <div> and a style to go with that <div>.

It takes a little longer to put it together until you have done it a little more. As you learn you will get to where you can knock this stuff out as quick or quicker than you put together the background graphic. And it will be much easier to change and rearrange as your idea changes or the client's.

That's my worth anyway. Keep working on it and post. I'll help as I can.

[kade119]

the menu grey vertical lines... are appearing red in my ie browser..? i check the color on the png file and tried as a .gif file too.. still red.. the lines are a seperate image from my bg

oh, and if i have another question about a different problem on my page .. for instance: trying to align my image on the right side of my paragraph should that be a different thread?

next-- so if i do most my graphics in my bg image.. what is the best way to get my text aligned where i need it? creating a new class for each text with margins?

[kade119]

and one more question i thought of, is it bad to have a css page for each page ?

[Taltos]

I am seeing the red lines now.

As for new questions and threads, we are pretty easy about that stuff here at V7N. If it really is a completely different question, it's a good idea to start a new thread. Although, try a quick search in here and see if you find your answer before you post. If you don't find it pretty quick, post your question. And the answer to your example is related to your last question so I'll try to answer them together.

If you are going to try to do the site with a big background image and line up text where you need it, then you may want to look at using position: absolute and using the top: and left: values as with the menu. If you use absolute positioning, then I believe that element does not "take up space" in the layout. I never use absolute so I can only tell you what I have read. Same solution could apply to lining up your image on the right side of a paragraph. And yes, this is likely to mean creating a <div> for each different area you want to place text or other images.

I have to say this. I really don't recommend using the big background image and using absolute positioning. It does become a problem to maintain the web site later as it changes. If it doesn't change from time to time, it will stagnate and won't show up anywhere on the search engines or will be much more difficult to get good search engine (SE) results. You will learn more and save yourself some time down the road by breaking most of your design into <div>'s and using CSS to implement the design. It will take longer right now but save time later. Just had to say this. I may revisit it from time to time

[Taltos]

It is best to have a css page that is somewhat universal. It is not good to have a css page for each page in the site. Many designers use more than one css page but it is usually things like a css page that they reuse for a contact form all the time, or a css page that is reused for a common layout template that they use.

[kade119]

so for like css on different images.. do i just do in-line css? and also if i dont use the big image as a bg.. and make separte ones, do i just make a container to hold them all in place?

you dont have an example of a good simple layout do you?

[Taltos]

It's a work in progress but you can check out simpleassetprotection.com. The css is here. There are a lot of extra divs to contain the rounded edges on the outside of the content area. Most of the css is the Stu Nichol's menu.

If you don't do the one big background image, then a lot of your design becomes background colors for <div>'s, like the orange area. No need for graphics that have to download for that area as it is just color.

I'll break up part of your background to show you in the next post.

[Taltos]

OK, here is your background with some scary bright purple boxes and text to show you what I see very quickly as divs and the key to getting them to the right place. I didn't cut the whole thing up but just the top few areas as an example. That is learning about float: left, float: right, and clear. You have to play a little bit to get the hang of it but you will.

[Taltos]

You would probably start with a main div to contain all of it and center it on the page or position it as you want.

[kade119]

yeah i am re-doing it.. i got a div container next, div content .. and then div menu.. but my container is not centering.. i am using a bg image but only a few elements now... maybe 900px is to large in width?

[Taltos]

Centering with CSS and divs gets everybody. If "container" is your main div then you need to add this to its style:

.container {
margin: 0px auto;
}

Or, I like to do it as:

.container {
margin-left: auto;
margin-right: auto;
}

It is a little easier to read and understand what it is doing the second way, IMO. You are just telling it to automatically adjust for equal margins on the left and right. The first way was telling it the same thing only the "0px" is the top and bottom margin.

[kade119]

ok and to creat a simple orange box.. how does this look


<span style="margin-right:6px;margin-top:5px;float:left;background-color:#FF9900;font-size:14px;line-height:40px;padding:5px;">Company News</span>

the only thing is.. it only expands to the size of my text .. can you create a box w/o text?


elements that need to go in the top top area... should that still be under container then content? or should i put those elements above div content?

[Taltos]

No bad but you are using a span. Personally, I would create a div and style it from the .css file.

.companynews {
font-size: 14px;
line-height: 40px;
float: left;
width: 200px;
height: 300px;
padding: 5px;
margin: 5px 6px 0px 0px;
background-color: #FF9900;
}

Notice I added a width and height. As you add text to a fixed width and height div you might have to worry about overflow.

I like to use this as a quick reference for CSS:
http://www.w3schools.com/css/css_reference.asp

And if you want to center the whole layout then you do probably want to have a big outer div that contains everything. I usually even set id = "outer". Then you start breaking down the other areas and they will all be contained inside that outer div.

[kade119]

cool cool, you wanna just do my website for me? j/k im having fun learning this actually

[Taltos]

no.

But you will learn on this first project. By the time it is done, you know a lot. And then you start creating your own cool effects and stuff with the killer combo of CSS and graphics! So much cool stuff to do!

[kade119]

i dont know if i will ever figure out the menu .. working in ff and ie.. it just will not site in the right location

its that firefoxes measurements are off, yup.. or ie.. one of them cant count pixels correctly. ff takes a little more pixels than ie.. dang!

im going to reload my site .. let you look at that menu again or anyone else who is viewing this if they can figure out how to make it compatible with ff and ie



im starting to see.. you have to do everything as a separate image to make the page go down.. like building blocks.. b/c if not your going to have to get crazy with margins and padding.. correct? everything needs to take up its own space instead of some big bg image

[kade119]

if you get another chance can you tell me how to align that photo on the side of my text.. i did float and align... both do not like me... maybe i need to set some margins