ansaurus

Question

is there a way to modify property of css div in html

Answer 1

A:

You can use: <div id="myDiv" style="top: 150px; left: 150px;"> The altered properties will be over-ridden, but the rest will remain as per your CSS file.

CSS priority is given like this (Highest to lowest): inline -> CSS in <head> tag -> definitions in an external CSS file.

But, as NullUserException stated, ideally each div should be unique.

Saladin Akara 2010-09-15 23:42:37

Answer 2

+1 A:

First of all, you should never have multiple elements with the same ID. IDs are supposed to be unique.

Here's the most straightforward way to accomplish your goal if inline styles doesn't make sense:

.myDiv{ position:absolute; width:200px; height:200px; }

#myDiv1 { top: 150px; left: 150px; }
#myDiv2 { top: 200px; left: 200px; }
#myDiv3 { top: 300px; left: 300px; }

And then in HTML:

<div id="myDiv1" class="myDiv">The top and left needs to be 150px</div>
<div id="myDiv2" class="myDiv">The top and left needs to be 200px</div>
<div id="myDiv3" class="myDiv">The top and left needs to be 300px</div>

Larsenal 2010-09-15 23:43:30

Answer 3

+3 A:

Hi @rex, first of all, ID's are unique elements and you should only have 1 per page.

To apply the same style to multiple elements, you should use a class.

<div class="name-of-my-common-style">

And then from css, use a dot (.) instead of a hash (#) to define the style for that class. i.e.

.name-of-my-common-style {
    position:absolute;
    top:200px;
    left:200px;  
    width:200px;
    height:200px;
}

To override any styles, you can use inline CSS

<div class="name-of-my-common-style" style="width: 150px"> ... </div>

This will pick up the original styles from name-of-my-common-style but override the width due to the inline width setting of 150px.

Another approach is to create a separate class for each width declaration and apply it to the element. i.e.

.name-of-my-common-style { ..default styles here..}
.width-150 {width: 150px;}
.width-200 {width: 200px;}

And so forth...

Then you can use it like this.

<div class="name-of-my-common-style width-150">I'm 150px wide</div>

Hope this helps.

Marko 2010-09-15 23:44:25

super fantastick save me lot of extra work....

rex 2010-09-16 00:15:50

Answer 4

+2 A:

.divvy { 
    /* common attributes go here */
    position: absolute;
    width: 200px;
    height: 200px;
}

/* specific (and unique attributes, since these are 'ids') here */
#d1 { top: 150px; left: 150px; }
#d2 { top: 200px; left: 200px; }
#d3 { top: 300px; left: 300px; }

In your HTML:

<div class="divvy" id="d1">The top and left needs to be 150px</div>
<div class="divvy" id="d2">The top and left needs to be 200px</div>
<div class="divvy" id="d3">The top and left needs to be 300px</div>

The MYYN 2010-09-15 23:44:26

Answer 5

+1 A:

Firstly, id should really only be used on a single element. You really want to use 'class' rather than 'id' (and your css would be .myDiv rather than #myDiv

The only way without creating 3 divs in css would be to apply additional style attributes in the div tag where you need to override the styles in the css.

for example:

<div class="myDiv" style="top: 150px; left: 150px;"> ... </div>
<div class="myDiv"> this just uses the default style from the css </div>
<div class="myDiv" style="top: 300px; left: 300px;"> ... </div>

Fatal 2010-09-15 23:44:33

ansaurus

tags:

views:

answers:

is there a way to modify property of css div in html

related questions