A question regarding div's and id's

Associate
Joined
5 Jan 2005
Posts
2,236
Location
Cyprus
Hi,

I couldn't find anything on google probably because l couldn't phrase what was l searching correctly.

My question is simple. I have a website designed using divs. Those divs have id that style them from the external .css file. Now if l also want to add id's in order to manipulate those div either with .php or .js what options do l have?

Can l have 2 ids on the same div? I think not, but someone with more knowledge on the subject please tell me what can l do.

Thanks in advance.
 
Use class to style the divs instead of using id.

PHP:
<div id="black"></div>

#black {
background:black;
}

...becomes...

PHP:
<div class="black" id="whatever"></div>

.black {
background:black;
}
 
with PHP you can switch div id with a simple if or switch statement.

Of course the reason for changing divs might make this a little easier to clarify.

<div id="<?php if ($foo == $bar) { echo "divIdOne"; } else { echo "divIdTwo"; } ?></div>

<div id="
Code:
<?php 

switch ($divname) {
    case ($foo == $baz):
        $divname = "divIdOne";
        break;
    case ($foo == $bar):
        $divname = "divIdTwo";
        break;
}

echo $divname;

?>
"></div>

very very crude, but easy short-term solution.
 
Last edited:
Basically an "ID" is used for specifying regions/sections of a webpage. Eg: Header, Main, Nav, Footer, News, Events. An ID can only be used once within a page. It is common to also inculde any styling within the ID CSS for that element, rather than defining a seperate class.
PHP:
CSS:
#Nav {}

HTML:
<div id="Nav">


A "Class" is used for styling elements be it a Div, UL, P etc. An element can have many classes applied to it. A Class style can be reused within the same page.
PHP:
CSS:
.Style1 {}

HTML:
<div class="Style1">

IDs and Classes can appear together,
PHP:
CSS:
#Nav {}
.Style1 {}

HTML:
<div id=Nav" class="Style1">
 
id's are as they sound, identifications for an individual element.

HTML won't validate at 1.0 Strict if more than one element has the same ID or an element has more than one ID.
 
Back
Top Bottom