NogDog;10883939 wrote:Just a guess: try setting a line-height value (probably of "1em").
Ah! Thanks so much.
That works well, but I am just having another slight problem.
I have taken a screenshot of the problem:
http://img504.imageshack.us/img504/4646/divboxpd9.jpg
Basically the line spacing for the "br" tags seem to be double what I want it to be. I tried the line-height code for them too but it hasn't worked.
Is there any thing you can suggest?
Thanks.
It's not clear to me where <br> tags would be involved there. Looks like a sequence of <li> elements. If so, there should be no need for any <br> tags between them: just adjust the top/bottom margin settings of those <li> elements to get the desired vertical spacing.
looking at that last screen shot, the list is poking out of the div.. I am guessing your div has a height value set? If so, remove that height value to enable the div to expand or contract based on the content within it dynamically.
nrg_alpha;10884079 wrote:looking at that last screen shot, the list is poking out of the div.. I am guessing your div has a height value set? If so, remove that height value to enable the div to expand or contract based on the content within it dynamically.
Yeah that's a good idea, but, the div has a solid border which I use to add to the style (as bad as that sounds?) so I would like the box to stay in that fix position so the border is always in the same place.
Is there any way to produce that black border without having to use a div? Or should I put a div inside a div, in order for one to stay the same size, and the other to move?
Nothing wrong with div borders as a style (in fact, its a good way to do it).
But it sounds like you have an inherent design flaw (granted, the screenshot only shows a small portion of what you have going on).
Let's ask this: What is important that requires the div to be a certain height?
If left alone, this issue seems already destined to haunt you. I am going to assume that the text in your site screenshots are displayed at the default size / default settings you gave them? If they are already breaking through your div, image what it will look like when some users deliberatly upscale their text (think control + '+') in Firefox when their zoom mode is set to text only..
When building a website, you should take aspects like this into consideration (especially at the default font sizes). Looks to me like your divs may need some restructuring (again, the screenshot doesn't reveal what is going on around it). But you have to admit, as is, it's problematic.
I would suggest as NogDog said.. remove the <br> tags, and just use CSS padding / margins to space out your list items.. Besides.. you have MUCH more control usign CSS than <br>.
nrg_alpha;10884089 wrote:Nothing wrong with div borders as a style (in fact, its a good way to do it).
But it sounds like you have an inherent design flaw (granted, the screenshot only shows a small portion of what you have going on).Let's ask this: What is important that requires the div to be a certain height?
If left alone, this issue seems already destined to haunt you. I am going to assume that the text in your site screenshots are displayed at the default size / default settings you gave them? If they are already breaking through your div, image what it will look like when some users deliberatly upscale their text (think control + '+') in Firefox when their zoom mode is set to text only..
When building a website, you should take aspects like this into consideration (especially at the default font sizes). Looks to me like your divs may need some restructuring (again, the screenshot doesn't reveal what is going on around it). But you have to admit, as is, it's problematic.
I would suggest as NogDog said.. remove the <br> tags, and just use CSS padding / margins to space out your list items.. Besides.. you have MUCH more control usign CSS than <br>.
Thanks for the reply mate, really appreciated. Nice to see somebody taking a keen interest. 
Basically as you can see from the screenshot there is a box. It is a mobile phone games website I have been developing, and the box in the screenshot just basically includes a small header image of the game, and a couple of features of the game (the 4 bullet points you can see in the ).
There will only ever be 3 or 4 feature bullet points maximum. The div has to be a certain height because otherwise the border would be higher up and look out of place compared to the rest of the design (I could post a clearer screenshot tomorrow if need be).
I think I have actually fixed the problem somewhat now by removing the divs as suggested, and styling the ul tag differently in CSS.
My main question I think has been answered. I just wanted to quickly clarify that using div boxes is a good design techinque? In my CSS I am using div class's as opposed to div id's .... is this the right thing to do?
Thanks for your help, it has really helped me a lot.
Kerant wrote:In my CSS I am using div class's as opposed to div id's .... is this the right thing to do?
Swings and roundabouts: classes are appropriate in some situations, ids in another. There are two differences between them: one is HTML, the other is CSS. (If you're using JavaScript, there are three).
HTML requires that id values be unique throughout the entire document; class values can be repeated whenever.
CSS selectors that mention an #id take priority over those that don't.
If there really is to be only one element styled a particular way, then using an id will make this explicit, mean more generic rules that might apply would be overridden, and allow the browser to optimise rendering a little (and in JavaScript, getElementById() could be used to refer to it).
Kerant;10884093 wrote:I just wanted to quickly clarify that using div boxes is a good design techinque? In my CSS I am using div class's as opposed to div id's .... is this the right thing to do?
Yes, divs are good to use in design (unless you start getting into very heavily nested divs.. then it starts to get 'ugly' ..aka somewhat comparable to tables.. so yes, divs for design / layout is perfectly fine.
As weedpacket mentioned, ids are for once only items... so say you have a div as such:
<div id="gameImageThumbnail">
There better be only one of those.. in other words, if you declare anything else in your xhtml document to have an id labeled "gameImageThumbnail", this can cause problems (not to mention that your page will not validate in accordance to the W3C validator. I have in the past accidently used mutiple ids with the same name and have the page still 'display properly..' (but fail validation).
Classes on the other hand, can be used over and over again.. so if you have mutiple images that you want to have a specific (and identical) border on for example, then you must use classes (I use 'must' here for proper design practices and validation purposes)..
Incase you are not aware, you can combine classes (say one class for the borders.. and say a class to float: left and another to float:right and use those in combination with your border class, all on some images)
ex:
<img src="whatever" class="imgBorders imgFloatLeft" /> where imgBorders governs the image borders and imgFloatLeft floats the image left.. then conversely, you can make other images float right:
<img src="whatever2" class="imgBorders imgFloatRight" />
To my knowledge, when I tried to mix both ids and classes in the same declaration, it didn't work (in otherwords, it all had to be classes).. but this was for CSS background images sharing the same background.. so perhaps I didn't test this thoroughly..
Point being..both ids and classes have their inherent purposes.. just be sure to validate you code.. you'll find out pretty quickly if you are on the right path or not 
Cheers,
NRG
As far as the DIV issue goes, you only need them if you want to group a collection of other elements together. But, there is no reason to use one if the only thing it contains is one block-level element. For instance, this...
<div id="menu">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
...can be just as effectively styled if instead written as...
<ul id="menu">
<li>one</li>
<li>two</li>
</ul>
(The first case is commonly referred to as "divitis": using DIV tags when they are not needed.)
As NogDog implies, there is a great benefit in determining what the bits of your page are actually supposed to mean, and use the appropriate HTML element for the task (styled appropriately). Use <ul>, <ol> and <dl> for lists (in fact you can get quite inventive with <dl> elements because they have more structure), <p> for paragraphs, and <table> for tables (keeping in mind that they can have <thead>, <tfoot>, <tbody>, and <th> children as well as <tr>).
The principle advantage of <div> (and its inline sidekick <span>) is that in typical user agents they have no pre-associated styling rules beyond <div> having display:block and <span> having display:inline. But the other side of that is the other elements do have some default styling and the page is more legible for it when styling is disabled (Google doesn't do CSS, but it does know the difference between <h1> and <h2>). For an example, see http://www.w3.org/ as it normally appears and when stylesheets are disabled.
Wow, thanks a lot for all that help guys. I really appreciate it.
I have a few div id's for the main layout template, but apart from that I'm using div classes to style each individual page. I think that has pretty much solved everything I need now!
If you don't mind me asking a quick design question while I'm here.
I have done most of the site design now and the CMS and stuff is mostly complete, but I'm stuck on what I can do with the navigation menu and what I can do to style it.
This is the nav menu...
http://img84.imageshack.us/img84/393/navoi1.jpg
As you can see it is there is no style at the moment. I'm really just not sure what colour to have the font, or what font to use or anything.
Could one of you with some design experience suggest something I could do to make it look decent?
Thanks very much for all the help.
Well, style is highly subjective.. IMHO, I would consider:
a) using css margins, push the list out from the edge.
b) consider adding bullets (be it a text bullet or a graphic bullet - this will enhance the list quite nicely).
c) not sure what the hover text colour is, but I would try to make sure it doesn't clash (not make it hard to read) against your background.
d) if you do decide to colour any links for visited, hover, active, etc.. you should declare your link colours in this order within CSS:
a:link
a:visited
a:hover
a:active
Otherwise known as the abbreviation (L)o(V)e(H)(A)te. This has to do wth css specificity. If not ordered correctly, some of your linked rules will override others, and you will not get the results you seek. More info here.
That's about all I can think of at the moment.
nrg_alpha;10884175 wrote:Well, style is highly subjective.. IMHO, I would consider:
a) using css margins, push the list out from the edge.
b) consider adding bullets (be it a text bullet or a graphic bullet - this will enhance the list quite nicely).
c) not sure what the hover text colour is, but I would try to make sure it doesn't clash (not make it hard to read) against your background.
d) if you do decide to colour any links for visited, hover, active, etc.. you should declare your link colours in this order within CSS:
a:link
a:visited
a:hover
a:activeOtherwise known as the abbreviation (L)o(V)e(H)(A)te. This has to do wth css specificity. If not ordered correctly, some of your linked rules will override others, and you will not get the results you seek. More info here.
That's about all I can think of at the moment.
Thanks a lot for all your help, you've been fantastic!
