Menu bar help, links in centre and out side edges?

[stevengreen22]

Ello!!!

 

I'm starting to remake a site that was a project.  THe original turned out to be poor and I'm now working with css to try and improve it.

I'm very new to it.

 

PLease = just look at the top menu.  everything else can be disregarded.

www.webdesignprofessionals.co.uk

 

I have a menu that spans the top of the page, 100% - I wanted links on both side, left for home etc and right for the login script.

I've used two divs both at 50% that I'm pretty sure is wrong practice and am loking into that.

 

The other thing I'd liek to do is have a link or two in the middle of the bar.  How do I do this?  I don't want to repeat what I did and have 3 divs at 33ish as it will get even messier.  Can anyone poijt me in the right direction?

Thanks

[cssfreakie]

I already gave answer to the 50% divs, you don't need those surrounding divs, <ul>'s can be floated as well. also, if you don't need them to be 50% don't set the width to that amount.

 

Also setting the width of course only affects the dimension  of the element, putting stuff to the left or right has nothing to do with it, float:left/right can be used for that.

 

as far as the links in the middle, since you took up the space with those 2 50% elements the only way to get something infront or behind it is with position: absolute In case you would set those div's not to 50% but less, you can even do with setting text-align center to the container div and place the links just in between.

As far as setting stuff to 33% You can do that and use float left on all the 3 elements. which leaves you with 1 one percent  unused, making it all move more to the left that the right, if you know what i mean. (width = 100% you float left 3x33% so the 1% sits at the right) easiest way to deal with it is to divide 1% in two (or 4 or 8 etc) making it 0.5% and than set the margin left (or padding left) of the outer left element to 0.5% and do the same to the right margin (or right padding) of the outer right element.

 

Hope this helps.

 

[stevengreen22]

So, it is okay to have the different divs at % then?  I don't want to use the wrong technique before I start geting into a habit if you knwo what I mean.

I think I'll have the div's split as that makes for easier managment. 

I'm still getting to grips with what you mentioned before with the ul, I've tried all sorts and it doesn't display properly, i'm missing somethign, also because I didn't write it all myself I don't knwo where to look for errors.  I'm cracking on with some tutorials etc to get a better understanding.

read your blog, some interesting stuff in there, the box model was helpful as well as some other stuff.

 

The other thing I noticed...Today is the first I've seen it on the computers where I study.  They use explorer, I haven't used a reset css which coudl be the issue.

 

On my computers at home, both safari, firefox and ie display the site fine but here the second div fluctuates between being inline with the fisrt and just below it, also the blocks are out of sync with the links.  Do you have any idea why this coudl be?

[cssfreakie]

Steven,

 

Something I can at-least point out is that we made a sticky on this forum, although the site you link below has a doctype your first and better attempt after defcon 1 didn't have one (and i predicted you would have problems with IE and post it here, but i thought lets see and wait, cruel me . No doctype means IE will go it to "I am IE 5" - mode. So always use that (you used it now so good job on that, although transitional is less strict in terms of perfect).

As far as percentages, or fixed widths, there is no perfect way, but percentages are more tricky, and the only way to find that out is to test it. You already noticed borders are a problem when working with percentages so keep it in mind.

 

Now since you just came along in the wonderful wolrd of css, I recommend to isolate a problem for yourself. It's cool to directly apply it to your website, but that brings in extra variables and doesn't give clean results. Nor is it clear for people trying to help out here.

So in your case i would make a clean document (test file, with doctype reset.css, etc) and every-time you have a problem with for instance an Ul, create that menu in there until you know how to do it, ones you know to,..import it to your website. Also what I always do (and i still do that) is set a background color to all block elements at start. That way I know where they are visually.

 

Also IE (all versions if you have no doctype) has some bugs, double margin bugs, z-index bug, and quite some more. I think they are well dealt with in a book called the missing manual. But don't get the habit of blaming IE, for everything, which i see on this forum a lot (that's why we made a sticky). Quite often people are the cause of the trouble them self, by just not reading that).

 

As far as your specific problems, I rather see you isolated them, because quite some things could happen. For instance: what is the version of IE you used? And which elements precisely do you mean. If you post stuff here  and it's more a mind read than a puzzle don't expect to much. So just isolate, run a test file online and point people to it with and say precisely what symptoms, there are and how you expect it to look. Also i think that's not in the sticky, but if you design for Firefox, and adjust for the rest, you are doing it the quickest way.

[stevengreen22]

I suspect you'll se a lot more faults coming before I do as well   WHat Doctype do you prefer, are there any significant advantages?  (I'll read up pn that too) Speakign of reading, I opened an odl dreamweaver book, to have a peek at the css stuff and I think it's oooollld, says mainly its used for text as opposed to almost every element so that will be returned to it's owner before I cock up, will still read to get a better understanding, like you were saying about usiong 'ul blabla' instead of div then ul.  that was over my head but it makes sense.  I just ned to learn, understnad, test, cry test more, leanr then implement. 

 

I'll be workign on the spare site to design and test, am a little bit gutted with the result today but I get there and the tutor has decided to give us an additional month#!!!!(one of the girls in the class is 'with child' and I reckon that swayed him seeing as she had nothgin to hand in.  Handy for me too as I can now tweak and clean the site.

 

I will be reading the stickies here, in fact I'm likley to read throgugh just about every post on the subject, I have an obsession with learning, or trying to understnad as much as I can,nothign gets to me more than coming up against a problem and not knowing how to solve it, thats when the reseach happens, which I happen to love

 

On that, are there any particular sites that you refer to or use to gain info etc etc?

 

Thanks again, and...if you'd like for me to not refer to you as 'nan' please call me 'steve' 

 

Tack sa mycket.

[cssfreakie]

for learning anything, a book, so my preferred site would be amazon. (css the missing manual might be nice, it also deals with IE bugs)

A book of 400 pages, can be read( != understood ) in 4 days easily and that way you learn it the structured way. While online stuff mostly deals with one specific topic assuming you know stuff. Also I' like the manual of w3.org (not schools) but http://www.w3.org/standards/webdesign/htmlcss

 

It won't get more detailed than that, but I would use that as a reference not to learn from. So learn it apply it, if it doesn't work use the manual and see if you can find out why. Something like the difference between inline and block elements is vital to know. Not certain if an elements on, look it up and you know directly how it behaves. A month is more than enough for css, to know everything an apply it, as long as you start of with good practices, like external stylesheets, tables only for multicolumn data etc. ANd again isolate problems. Much easier to learn that way too.

 

as for your doctype, i gave a little hint that for it

although transitional is less strict in terms of perfect

 

I prefer strict doctypes

[stevengreen22]

Thats a handy site.  There's so much to learn, am looking forward to being able to write stuff the right way, jsut their example of p class ='sdjkbfkjsbf' and so on is great, and that sthe simple stuff, just being able to set all of that for different content, gah, I've been bliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiind!!!

 

I'll start on my new site and test various different things, starting at the beginning, I do pick prog up fairly quickly but I don't want to amke any mistakes, i also don't want to obsess with it as the math exam is looming closer.

 

One thing...that ul example you gave...can that idea be applied to most elements?

 

inline and block are mysteries for me at the moment. 

 

also, strict it is. 

 

 

 

[cssfreakie]

One thing...that ul example you gave...can that idea be applied to most elements?

 

inline and block are mysteries for me at the moment.

You already gave the answer there, inline and block elements are the mystery here. Block elements can be floated, inline elements can't be floated unless you say that they should behave line a block element. (display:block;). So the answer is both no and yes. (that's weird isn't it )

http://www.w3.org/TR/html40/struct/global.html#h-7.5.3

 

also, strict it is. 

a strict doctype comes in a 2 flavours. HTML 4.01, and XHTML 1.0

more info: http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

If you google: easiest is to do something like: block elements w3 otherwise you end up at something different than w3.org

[stevengreen22]

ah, I see why you said it was sneaky before, the site is informative, The menu, do you think they intended the unlerlines links to be displayed that way?

 

I'd already decided to use the html, i think it serves a better purpose for the time being.  So, to clrify, the transitional / loose one is indentical except it allows for redundant tags / features??? I've decided to keep sturcture at the forefront of the design. 

 

Oh, I mentioned to the guy whose obsessing about w3schools, about the fools page you guys have referred me too.  wasn't happy but also not impressed to be reading stuff that isn't correct.

 

[cssfreakie]

intend to underline the links? that is something the designer decides for him self. I never use it because i find it ugly. I rather use contratsing links and certainly not the default blue and dark purple.

 

what transitional is is very well stated in the manual. But yeah your pretty much correct. strict dectates a stricter coding style and does not allow stuff like <font> etc.

 

Well as far as the guy that was/is not impressed, have a look at your own reaction after people commented on it, in particular the use of tables. I can't be bothered if people will or will not accept things. But I wish them the best when showing of their skills to a future employer. No offence though, but you seem to surrounded by people with an interesting mindset.

 

So stick here, and learn it the right way.

[stevengreen22]

No offence though, but you seem to surrounded by people with an interesting mindset.

 

So stick here, and learn it the right way.

 

delicate way of putting it and no offence taken

 

The thing is...I can't really doubt a word you say, UI've spent a reasonabl;e amount of time trawling through the forum and in this one in particular you pretty much have the first comment to help and the last whether you're given grief for helping or not, hugely commendable and I do regret not being able to make the 1st impression again as your help, and that of others in here will be invaluable.

 

I have every intention of using this forum to help better what I'm hoping will be the skills to get me a job I'll love doing. 

 

I also don't like underlingin links very much, I like rounded corners   But to begin, everythign will be blocky until it's sorted.  I'm gagging to work on it, even now, I'm workign and studying for the math exam and I keep randomly hopping on websites checking out the code to see how different people do it, am close to obsession.  But, I'm taking it as a good thing

 

 

[cssfreakie]

have a look a  website of apple. Apple by far is one of the bigger brands nowadays due to there great minimalistic style.

white with some grey and simple colors, rounded corners and that's it. All elements got air to breath. (very important)

Designs like that don't have a particular time stamp. I can show you a nice table from the 80ies, but you still would think it's from the future, because it's so minimalistic.

 

[stevengreen22]

I'll keep that in mind when it starts to come together.

 

There is somethign I wanted to ask, i see 'wrapper' mentioned a lot, is this just general terminology?  I mean, you can call it anythign I guess?  From what I've had a look at the main 'pgae' so to speak or the display area is the main div and everythign is contained within it, is this normally referred to as the wrapper?

 

i'm going to change the layout and have the top bar still rigid, I really like the idea that it stays in place while the page scrolls, a side nav menu and then a main content colum with a 'featured' bit to the side of that.  having a look online, the two columns are floated but instead of having a % they are set to a set width and then the main content inbtween has a margin less that plus additional for spacing with the possibility of a max width...is this the right sort of path to be walking down in terms of understanding how it's laid out?

[cssfreakie]

yeah wrapper/container is the common term to name a div to bundle stuff. Nothing special though, you could call it #monkey-balls if you like.

But something to keep in mind, id's and classes, certainly when you work in teams are easier to understand/work with if you give them a logical name.

 

as far as your layout, If you sit in front of a computer screen you sit at the middle, and stare at your screen so it make more sense if the content your focusing on "main content" is in the middle of the screen (right now it's not). also something that might be nice to have a read about is something called a grid, right now your page is missing that, in a way that it looks randomly positioned. that's also because your using a fluid with on your header but not on your content. Don't do both its messy. So really read about grid layout, our brains love to draw lines in a design. Ever wondered why good photos are good? They have a certain pattern that is used (apart from great light, aperture, the way the object is facing etc). mostly a 2/3th  1/3th pattern just google it.

 

If you now visit your site with a blank mind what is the first thing you see? test that on some people with multiple sites (big brands and your own), just ask them what is the first thing you see (so blank page and pop up your site), and don't say this is you 'baby' or whatever the fack for word you can use for it.  Although this test is  not really scientific in your case, it gives an idea of the impact of your layout. right now i see as first the words "WDP Community Updates" Big Brands pay big bucks on every commercial to investigate how we see their commercial, and that's for a reason.

best is to ask some people that not know anything about your site. people should enter the test completely blank

[stevengreen22]

eye opener....

 

Good to know abotu wrapper and so forth, i'll label as clearly as possible, it will help int he long run especially the site develops (which it will )

 

Again, with the centre of the screen, true, I've loaded it up as a stranger, so to speak, and that is the first thing I see especially as it's bold as well.  This are all hugely important things that will come into play when I start workign on it again (math,math, math!!!)

The reason for the fluid (a better way of indication % as width?)  title was that I wanted the login part to always be visisble even when the screen was resized but when I applied the same to the content it threw thigns out of sync, I think it was because the tables were screwy and the ad that was there was forcing an overlap or something?  I don't know why but it didn't work / make sense so I was forced to use that.    That, like most of it will be addressd, I liek the idea of a fluid page, think it looks more...professional but at the same time that means I can't use a background image?? only a colour or small repeating div?

 

[stevengreen22]

this si fantastic!

http://www.subtraction.com/pics/0703/grids_are_good.pdf

 

[cssfreakie]

fluid or fixed widths, you can use exactly the same stuff. The reason by the way those words (WDP Community Updates") are viewed first is not only because they are bold but since we read from top to bottom left to right. those are the first real words, before that are images on the same line, than those words, next line is your main content page title with welcome, even if it's written bigger it won't pop out. So kae you headewr a real header that sticks in the mind next thing that need to be seen is the main content