a few css/div questions

telemachus · 25-08-2005 4:20pm #1

I've been fiddling with div tags and css for the sum total of about two days or so having previously kept to relatively basic html with tables abound and i've mashed together a first attempt at a page: www.feedmenow.ie/indextest.html

I realise in hindsight it may well have been somewhat neater to maintain a seperate css file rather than having it all on the html page itself but other than that i've gotten confused about two things on it. First is that I can't seem to work out how to apply link settings to a css style (underline/never underline, active/visited link colours etc), is it possible to add these details to the basic lists of styles i've been using?

My second problem is a browser disrepancy to do with div borders, it works fine for me when viewed in explorer but when opened in mozilla (and mac Safari I think) one of the bottom borders assigned to the div tag in a css style disapears. It's the bottom white border on the thin blue bar with the (soon to be) menu/contact us etc links.

I'm no doubt missing something fairly obvious here but at the moment i'm rather blundering my way through css and divs and can't even work out what exactly it is I should be looking up to fix this so any push in the right direction or advice would be much apreciated.

DonkeyStyle \o/ · 29-08-2005 12:40am

telemachus wrote:

I realise in hindsight it may well have been somewhat neater to maintain a seperate css file rather than having it all on the html page itself

You can still do that, just cut and paste the style declarations out to an external .css file (plan text), in this case everything from the first 
Then stick a link to the style sheet in the head of each html page, while removing the now redundant declarations.
Something like...

<head> <link href="my_css_file.css" rel="stylesheet" type="text/css" /> </head>

It's an absolute God-send to be able to change these styles from a single location, especially as the site grows.

telemachus wrote:

First is that I can't seem to work out how to apply link settings to a css style (underline/never underline, active/visited link colours etc), is it possible to add these details to the basic lists of styles i've been using?

The easiest way to do this is by editing the default link styles... you can get into creating different classes of links, but for the sake of simplicity, you can start by styling these four fellas.

a:link { }
a:visited { }
a:hover { }
a:active { }

telemachus wrote:

My second problem is a browser disrepancy to do with div borders...

I can't see what you mean, I've had mozilla and IE open on that page side-by-side and the only thing I can spot is that your <hr>'s show up in different colours. (which can be fixed in the style sheet btw)

telemachus wrote:

i'm rather blundering my way through css and divs and can't even work out what exactly it is I should be looking up to fix

Yeah it's a tough learning curve, I spent hours last night trying to get my div layout working in both browsers (haven't tried it in opera yet :eek:)
I usually just google for "css div <setting I'm curious about>" and fart about with the style sheet until it works.

http://www.w3schools.com is a great reference.
http://wendypeck.com/css101.html is the best intro to CSS I've ever seen.

smeggle · 29-08-2005 4:23am

here you are - you need to add something like this


a:link{
	color: #000000;
	text-decoration: none;
        border-bottom: 1px dashed #666; 
        background: transparent;
}

a:visited{
	color: #000000;
	text-decoration: none;
}

a:hover{
	color: #BDA57B;
        border-bottom: 1px solid #666;
	text-decoration: underline;
}

specifically what that does is put a dashed line under each hover reference/link in a page, though when href is moused over the line becomes solid. Click the link to my home site in my sig to see it in operation.

if you want to say use a different style for say a link in a different part of the page you must apply a different a:link/hover/visited to that particular div area.

So that means I can apply an overall 'Global' style to links. I can also apply individual styling to h ref's/links in any div.

As the above poster says do get used to using a 'Global' css sheet, taking note that the one supplied is xhtml as identified by the space/forward slash before the closing bracket implicitly closing the line of code.

The example I have given you should be placed after the body styling in your css. like so

#body {
values/attributes
}

The above a:hover, visited etc

the rest of your css.

As I say you may not want to use that style for say your footer and might want to change the link styling differently. so this can be done,

<div id="footer"> loads of footer text and links</div>

And you css can be like so,

#footer {
        font-family: Verdana,Arial, sans-serif;
        color: #EF0B0B;
        padding: 0px 0px 5px 10px;
        border-bottom: 2px solid #000000;
        background-color: #EBE3D0;
        text-align: center;
}

#footer  a {
	font-size: 90%;
	padding: 0 4px 0 0;
        background-color: #EBE3D0;
}

#footer  a:hover{
        font-family: Verdana,Arial, sans-serif;
        border-bottom: 1px solid #3D67BD; 
        background: transparent;
	color: #3D67BD;
	text-decoration: underline;
}

This will over ride the global h ref style and replace it with a style for the actual div, in this example the 'footer' (Foot of page/bottom of page).

Now your next bit - I have no problem with the page displaying in ff and both white lines are present. I did notice in your page src a mistake your making and it seems to be repeated through the page.

<div class="toppic" id="centre_div">

One or the other but not both. Either identify the div as 'id' or 'class'. Identifying as both is wrong.
if you use 'id' then use the hash symbol in your css [#]
if your using 'class' then use a 'full stop in the css [.]

ok this bit in your css,

border-top-style

Take away the -style on all your border attributes - not needed simply border-top, border-left , border-right, border-bottom is right.

To style a border use this

border-bottom: 2px solid #000000;

no need for individual values for each. As you are doing it currently border-right-color, border-right-width is not needed and produces to much code to write.

As it is your values are being attributed via the class element as you are using the full stop in your css. Some should be but most should be under the hash or 'id' attribute.

Hope that helps you

telemachus · 29-08-2005 5:13am

Thanks alot guys I really apreciate the indepth help, i'm more than happy to trawl through guides/tip sites but having someone point out the odd specific niggle is a great time saver.

I managed to sort out the major browser difference (eventually

) myself as it happened, it turned out to be padding being interpreted differently and pushing things out of skew/appearing fine depending on the browser.

Once I get the chance i'll poke through it and make the link changes seperate style sheet and class/id changes (truth be told I was totally clueless while experimenting in the page creation and not knowing their differences added both for safetys sake).

DonkeyStyle \o/ · 29-08-2005 5:57am

telemachus wrote:

it turned out to be padding being interpreted differently and pushing things out of skew/appearing fine depending on the browser

Gah, yeah... I'm trying to avoid situations where I need things to be pixel-perfect, at least until I become a lot more comfortable with using divs for layout (and the various browser hacks that come with the territory).
Otherwise I'll just crack and go "right, I don't care anymore, I'm using a table for this!"
My approach to learning this stuff is to keep it simple, start over with xhtml strict and re-build your layout-thinking from the ground up... it's much less frustrating than thinking in tables all the time... hopefully I'll reach the same level of control I had with tables... but as you say, it takes a lot of reading and tinkering to get there.

mewso · 29-08-2005 10:16am

smeggle wrote:
<div class="toppic" id="centre_div">
One or the other but not both. Either identify the div as 'id' or 'class'. Identifying as both is wrong.
if you use 'id' then use the hash symbol in your css [#]
if your using 'class' then use a 'full stop in the css [.]

I wasn't aware of this limitation. I have seen both used to solve various problems.

Serbian · 29-08-2005 11:05am

smeggle wrote:
<div class="toppic" id="centre_div">
One or the other but not both. Either identify the div as 'id' or 'class'. Identifying as both is wrong.

It's not wrong to use both. They even have examples of using both on the same element on the W3C Recommendations. Admittedly, the markup is deprecated, but the semantics most certainly are not. And like Musician said, there are times where using both together can solve some tricky problems.

<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>

maxheadroom · 29-08-2005 11:23am

Serbian wrote:

It's not wrong to use both. They even have examples of using both on the same element on the W3C Recommendations. Admittedly, the markup is deprecated, but the semantics most certainly are not. And like Musician said, there are times where using both together can solve some tricky problems.

I think smeggle is a little confused about what a class attribute and what an id attribute is. id is used when you want to refer to something uniquely, be it for CSS, DOM scripting, or just an internal hyperlink. Class should be used when there is something that semantically groups several elements together, but they aren't necessarily structurally related in the page source. For instance, if I had a <div id="navbar">....</div> there's no point in using class="navitem" on each child element, because it is implied in the document structure. If I want to be able to refer to all my external links the same way, I could class them all as class="extlink" and then manipulate them via CSS (or possibly DOM scripting, not sure if you can manipulate elements by class with it, not sometthing I have any experience with). These attributes aren't purely hooks to hang css on, and should be thought about semantically (in terms of what they mean to the document structure) as much as they are presentationally.

smeggle · 29-08-2005 9:01pm

Interesting point you guys and yeah I know of the w3c examples. The thing is why use both to style that one element?

<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>

Here id will apply the style but if anything in the class is the same as the id such as say font style then you've just confused the browser. It gives up as it's trying to apply two different styles to the same element.
I did try using it but ended up in a complete mess and as soon as I seperated it the problem disappeared.

I'd write that code then like so

<div id="whatevername">
<P><span class="info" lang="en">Variable declared twice</span>
<P><span class="warning" lang="en">Undeclared variable</span>
<P><span class="error" lang="en">Bad syntax for variable name</span>
</div>

Each of the span messages are identified and styled via the class and the overall style given by the id. I either then put say the font style under id if I want it to act overall or I can individualise under each seperate class indentification.

As serbian says the semantics are not depreceated but the markup is. The reason why I believe is it causes conflicts during rendering - it did for me allthough they say it can be used. I found that I got either the class style or the id style but never both. As I've written it there I can easily give an overall style via the div id and individualise via the class attribute.

Just trying to save yourself the head ache that I've allready had

maxheadroom · 29-08-2005 10:41pm

Smeggle, I suggest you read http://web.archive.org/web/20040411032820/http://www.positioniseverything.net/articles/cascade.html - its a good guide to how browsers (are suppossed to) implement the cascade of styles.

P&L · 30-08-2005 10:17am

Yeah, as the other guys said, there's nothing wrong with using a class and an id, its the same a susing multiple classes - only more specific - specificity is good

Using both can often make for better written and organised CSS.

Example:

<html>

<head>
<style type="text/css">
.boxes{height:5em;width:5em}
#blue{background:#00CED1}
#red{background:#FF9595}
#green{background:#90EE90}
#orange{background:#FFD077}
</style>
</head>

<body>
<p class="boxes" id="blue">One</p>
<p class="boxes" id="red">Two</p>
<p class="boxes" id="green">Three</p>
<p class="boxes" id="orange">Four</p>
</body>

</html>

By the same token, the following would be fine as well:

<p class="box circle square" id="this_one">some text</p>

I've never had problems with anything like this ever breaking down, would love to see some examples if anyone has them.

a few css/div questions

Comments