CODEWITHSUNDEEP
csshtml
Laura Hill
Laura Hill

Reputation: 51

How to wrap a DIV within a DIV

I am trying to wrap div (noint_box1) within some divs however I am being unsuccessful. Can some please check the css and see what I am doing wrong.

HTML:

<div id="tabs-container">
        <div id="tabs-box">
      <div class="tab active" id="tab1" onclick="showtab(1)">Delivery</div>
    <div class="tab" id="tab2" onclick="showtab(2)">Payments</div>
    <div class="tab" id="tab3" onclick="showtab(3)">Returns</div>
    <div class="tab" id="tab4" onclick="showtab(4)">Discount</div>
    </div>
    <div id="tab-content-box">
    <div class="tab-content active" id="content1">CONTENT </div>
    <div class="tab-content" id="content2">CONTENT</div>
    <div class="tab-content" style="text-decoration:none" id="content3">COTENT</div>
    <div class="tab-content" id="content4">CONTENT</div>
    </div>


    </div>
    </div>

STYLESHEET:

#noint_box1{text-align:center;}
#tabs-container { width:942px; border-color: transparent}
#tab-content-box { border:none; border-color: transparent }
#tabs-box { height: 30px; border-color: transparent; padding-bottom:3px;}
.header1 {font: 22px 'MuliLight', Arial, sans-serif; color: #026c9f; text-align:left; vertical-align:top; text-shadow: #6ac6f0 1px 1px 1px; font-weight:bold }
.tab {     
 font-family:Arial, Helvetica, sans-serif;
 cursor:pointer
.tab.active { border-bottom: 2px solid white; text-align:left }
.tab.active { border-bottom: 2px solid white; text-align:left}
.tab-content { display: none; padding: 5px; text-align:left}
.tab-content.active { display: block; text-align:left}
#tab1 {margin-right:10px; text-align:center}
#tab2 {margin-right:10px; text-align:center}
#tab3 {margin-right:10px; text-align:center}
#tab4 {margin-right:10px; text-align:center}
#content1 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px}
#content2 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px; margin-bottom:3px}
#content3 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px}
#content4 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px}

Upvotes: 0

Views: 197

Answers (2)

dmi3y
dmi3y

Reputation: 3522

both html and css are bloated, I would not recommend use such style

after beautifyling both

HTML via http://jsbeautifier.org/

<div id="noint_box1">
    <td class="topparts" width="936">MY CONTENT1</td>
    <div id="tabs-container">
        <div id="tabs-box">
            <div class="tab active" id="tab1" onclick="showtab(1)">Delivery</div>
            <div class="tab" id="tab2" onclick="showtab(2)">Payments</div>
            <div class="tab" id="tab3" onclick="showtab(3)">Returns</div>
            <div class="tab" id="tab4" onclick="showtab(4)">Discount</div>
        </div>
        <div id="tab-content-box">
            <div class="tab-content active" id="content1">CONTENT1
                <br />
            </div>
            <div class="tab-content" id="content2">CONTENT2</div>
            <div class="tab-content" style="text-decoration:none" id="content3">CONTENT3</div>
            <div class="tab-content" id="content4">CONTENT4</div>
        </div>

and CSS via http://cssbeautify.com/

#noint_box1 {
    text-align: center;
}

#tabs-container {
    width: 942px;
    border-color: transparent;
}

#tab-content-box {
    border: none;
    border-color: transparent;
}

#tabs-box {
    height: 30px;
    border-color: transparent;
    padding-bottom: 3px;
}

.header1 {
    font: 22px 'MuliLight', Arial, sans-serif;
    color: #026c9f;
    text-align: left;
    vertical-align: top;
    text-shadow: #6ac6f0 1px 1px 1px;
    font-weight: bold;
}

.tab {
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer
.tab.active { border-bottom: 2px solid white;
    text-align: left;
}

.tab.active {
    border-bottom: 2px solid white;
    text-align: left;
}

.tab-content {
    display: none;
    padding: 5px;
    text-align: left;
}

.tab-content.active {
    display: block;
    text-align: left;
}

#tab1 {
    margin-right: 10px;
    text-align: center;
}

#tab2 {
    margin-right: 10px;
    text-align: center;
}

#tab3 {
    margin-right: 10px;
    text-align: center;
}

#tab4 {
    margin-right: 10px;
    text-align: center;
}

#content1 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
}

#content2 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
    margin-bottom: 3px;
}

#content3 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
}

#content4 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
}

you could easily observe troubles in HTML code, and as well css looks to be excessive and might be potentially cleaned up

Upvotes: 2

Guffa
Guffa

Reputation: 700212

I see three problems with the HTML code:

  • You have a table cell among the divisions. If you are in a table row, the divisions can't be there, and if you aren't in a table row, the table cell can't be there.

  • There is no ending tag for the <div id="tabs-container">

  • There is no ending tag for the <div id="noint_box1">

Upvotes: 1

Related Questions