Geek Answers Handbook

How can I reorganize some duplicate HTML and CSS?

How can I reorganize the following duplicate HTML and CSS?

The code is about 10 numbers. The top of the room i is 40 * i pixels.

I used colons to indicate the lines that I deleted.

HTML:

<div id="room1">Room 1</div> <div id="room2">Room 2</div> : <div id="room10">Room 10</div>

CSS

 #room1, #room2, : #room10 { : top: 40px; : } #room2 {top: 80px} #room3 {top: 120px} #room4 {top: 160px} : #room10 {top: 400px}
+1
source share
5 answers

Should it be in absolute positioning? Why not do it?

 <div id="room1" class="roomHeight">Room 1</div> <div id="room2" class="roomHeight">Room 2</div> : <div id="room10" class="roomHeight">Room 10</div> .roomHeight { height: 40px; }

Each room will still be folding, as they are naturally under the block display, and each of them with a height of 40 pixels will have the same effect as using absolute positioning and declaring the top of each div.

+3
source

If you need relative / absolute positioning, there is no cleaner way to specify a different top for n different div s.

Sorry, but you just need to write everything exactly , similar to how you have it. Having done this myself, I think that I have something a little shorter than yours.

For reference, I would do this if I needed positioning:

Live demo

CSS

 #roomContainer { position: relative } #roomContainer div { position: absolute; background: #ccc; width: 100px; height: 16px; padding: 10px; text-align: center; outline: 1px solid blue } #room1 { top: 0px } #room2 { top: 40px } #room3 { top: 80px } #room99 { top: 9120px }

HTML:

 <div id="roomContainer"> <div id="room1">Room 1</div> <div id="room2">Room 2</div> <div id="room3">Room 3</div> </div>
+4
source

give each of them the same class and make the class separately as follows:

 <div id="room1" class="room">Room 1</div> <div id="room2" class="room">Room 2</div> : <div id="room10" class="room">Room 10</div>

css:

 .room { margin-top: 40px }

I'm not sure why you used the top property, are they all located absolutely?

+1
source

First, I would suggest giving the "room" div also a class for the common css properties: <div id="room1" class="room"></div> Or, if they are all in a common parent, use this to assign common css properties:

 <div id="allrooms"> <div id="room1">Room 1</div> <div id="room2">Room 2</div> </div> #allrooms div { ... }

If you don't need this list of css rules for all div s, you might consider considering applying the left properties directly to div s: <div style="left: 20px">Room 1</div>

+1
source

it would be better to use a div to wrap the entire line, and then ... so you have <div class="schedulerRow"> <div id="room1" class="room">room 1</div> <div id="scheduler1">Enter Time division elements in here</div> </div>

Css .schedulerRow, room { height: 40px;}

then you can interact with time division elements on the same line without affecting the other lines of the room.

0
source

More articles:


All Articles