Geek Answers Handbook

There is a way to change the css div property in html

I'm partly new to css and html, which is part of Actionscirpt. I was wondering if there is a better way to do this.

I created an external css with the following div.

#myDiv{ position:absolute; top:200px; left:200px; width:200px; height:200px; }

and in html I want to use the same div for 3 different things with different value / property.

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

Is there an easy way to do this without creating 3 divs in css ...

+4
source share
5 answers

First of all, IDs are unique elements, and you should only have 1 per page.

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

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

And then from css, use a period (.) Instead of a hash (#) to define the style for this 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 take the original styles from name-of-my-common-style , but override the width due to the built-in width parameter 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 on...

Then you can use it like this.

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

Hope this helps.

+4
source 
 .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>
+2
source

First of all, you should never have multiple elements with the same identifier. Identifiers must be unique.

Here's the easiest way to achieve your goal if inline styles don'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 the 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>
+1
source

Firstly, id should really be used for only one element. Do you really want to use a "class" rather than an "id" (and your css will be .myDiv, not #myDiv

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

eg:

 <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>
+1
source

You can use: <div id="myDiv" style="top: 150px; left: 150px;"> changed properties will be overloaded, but the rest will remain according to your CSS file.

The CSS priority is assigned in this way (from highest to smallest): inline → CSS in the <head> tags → in the external CSS file.

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

0
source

More articles:


All Articles