wanted some standard CSS coding

Question

I am new to CSS designing.

I have developed a page using HTML.

I have a header including buttons like HomePage, MyData, Help. When i click the MyData link, one submenu will come up below it. Like Personal Data ,Official Data and Employee Document.

When I click on Personal Data, on the left hand side of the page a menu will come up with the content Address, Passport Details, PAN etc.

When I click the Address link it will display a table having all the address related data in the center of the page.

Here I have taken a line in between the left menu and center table.

My page

I have used 6 div's and 6 different css's for doing this.

<div id="Fourth_Page_Left_Line"> </div>
<div id="Fourth_Page_Left_Line1"> </div>
<div id="Fourth_Page_Left_Line2"> </div>
<div id="Fourth_Page_Left_Line3"> </div>
<div id="Fourth_Page_Left_Line4"> </div>
<div id="Fourth_Page_Left_Line5"> </div>

CSS:

#Fourth_Page_Left_Line {
    left: 190px;
    top: 130px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line1 {
    left: 190px;
    top: 133px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line2 {
    left: 190px;
    top: 136px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line3 {
    left: 190px;
    top: 139px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line4 {
    left: 190px;
    top: 142px;
    position: absolute;
    font-size: 20px;
}

#Fourth_Page_Left_Line5 {
    left: 190px;
    top: 145px;
    position: absolute;
    font-size: 20px;
}

Like the same I have to make a line till the bottom of the page, then I have to take another 20 to 25 div's and again I have to create CSS for those div's.

Can anyone tell me how I can reduce the code, instead of using so many div's and CSS, can I use a single div and single CSS to produce the same output?

budamivardi · Accepted Answer · 2014-06-27 07:19:42Z

1

CSS

.mainClass {left:190px; top:130px;position:absolute;font-size:20px;}
.mcTop1 {top:150px}
.mcTop2 {top:160px}
.mcTop3 {top:170px}

HTML

<div class="mainClass"></div>
<div class="mainClass mcTop1"></div>
<div class="mainClass mcTop2"></div>
<div class="mainClass mcTop3"></div>

answered Jun 27, 2014 at 7:19

budamivardi

7605 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehmet Eren Yener · Accepted Answer · 2014-06-27 07:15:14Z

0

HTML

<div class="mySmallPanel" id="#Fourth_Page_Left_Line1"></div>
<div class="mySmallPanel" id="#Fourth_Page_Left_Line2"></div>
<div class="mySmallPanel" id="#Fourth_Page_Left_Line3"></div>
<div class="mySmallPanel" id="#Fourth_Page_Left_Line4"></div>

CSS

.mySmallPanel
{
    left:190px;
    top:130px; /* Your top div */
    position:absolute;
    font-size:20px;
}

Just assign a class for each div, then in css file you can set your design

answered Jun 27, 2014 at 7:15

Mehmet Eren Yener

2,0362 gold badges24 silver badges38 bronze badges

1 Comment

padarom Over a year ago

Every of the ID's is using a different value for the top-attribute in the OP.

J Prakash · Accepted Answer · 2014-06-27 07:46:52Z

0

HTML :

<div class="mainclass" id="#Fourth_Page_Left_Line1"></div>
<div class="mainclass" id="#Fourth_Page_Left_Line2"></div>
<div class="mainclass" id="#Fourth_Page_Left_Line3"></div>
<div class="mainclass" id="#Fourth_Page_Left_Line4"></div>

CSS :

.mainclass{
     left: 190px;
     position: absolute;
     font-size: 20px;
}
#Fourth_Page_Left_Line {
    top: 130px;

}

#Fourth_Page_Left_Line1 {
    top: 133px;

}

#Fourth_Page_Left_Line2 {
    top: 136px;

}

#Fourth_Page_Left_Line3 {
    top: 139px;

}

#Fourth_Page_Left_Line4 {
    top: 142px;

}

#Fourth_Page_Left_Line5 {
    top: 145px;

}

answered Jun 27, 2014 at 7:46

J Prakash

1,3418 silver badges13 bronze badges

Collectives™ on Stack Overflow

wanted some standard CSS coding

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related