DIV help

webmasterplace Well-Known Member

Messages:: 802

Likes Received:: 36

Best Answers:: 0

Trophy Points:: 120

#1

Hi,

I'm having some trobble with using DIV's. For a long time I've been using tables to create my layouts, but that isn't really a nice way to make a layout.

Now I'm trying to convert everything to DIV's.
My layout consists out of several panels.

This is layout I'd like to achieve for a panel using DIV's:

[IMG]

All the boxes marked with X are DIV's with a fixed width & height.
All the boxes marked with O are DIV's with a fixed width or height.

Every DIV marked with X and O has a background image.

To understand what I mean, this is how it should look like:

[IMG]

This is the code I tried:

.topleft {
	background: url('images/topleft.png') no-repeat;
	width: 32px;
	height: 79px;
	float: left;
}

.toptitlecenter{
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	padding: 5px;
	background: url('images/topcenter.png') repeat-x;
	height: 79px;
	float:left;
}

.toptabstart{
	background: url('images/tabstart.png') no-repeat;
	width: 20px;
	height: 79px;
	float:left;
}

.toptabcenter{
	background: url('images/tabcenter.png') repeat-x;
	height: 79px;
	width: 100%;
	float:left;
}

.topright{
	background: url('images/topright.png') no-repeat;
	width: 29px;
	height: 79px;
	float:left;
	vertical-align:middle;
}

.sideleft{
	background: url('images/sideleft.png') no-repeat;
	width: 32px;
	float:left;
	vertical-align:middle;
}

.sideright{
	background: url('images/sideright.png') no-repeat;
	width: 29px;
	float:left;
	vertical-align:middle;
}

.botwrapper {
	width: 500px;
}

.botleft {
	background: url('images/botleft.png') no-repeat;
	width: 32px;
	height: 29px;
	float:left;
	vertical-align:middle;
}

.botcenter{
	background: url('images/botcenter.png') repeat-x;
	height: 29px;
	width: 100%;
	float:left;
	vertical-align:middle;
}

.botright{
	background: url('images/botright.png') no-repeat;
	width: 29px;
	height: 29px;
	float:left;
	vertical-align:middle;
}

<div class='topleft'></div> <div class='toptitlecenter'>Title comes here</div> <div class='toptabstart'></div> <div class='toptabcenter'></div> <div class='topright'></div>
<div class='sideleft'> <div> <div class='sideright'>
</div> </div> </div>
<div class='botleft'></div> <div class='botcenter'></div> <div class='botright'></div>

Code (markup):

If anyone can please help me!
Thank you very much!!

webmasterplace, Aug 17, 2010 IP

Rimona Active Member

Messages:: 123

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 63

#2

Is this what you had in mind? http://viladi.co.il/wmp/test.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>For WPM</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body> 
<div id="container"> 
    <!-- opening HEADER div --> 
    <div id="header"> 
        <div id="header-left-corner">&nbsp;</div> 
        <div id="header-left-str"> 
            <div class="header-text-area">Text area in left side of header will be limited to the size of the allocated height
                and width. </div> 
        </div> 
        <div id="header-center">&nbsp;</div> 
        <div id="header-right-corner">&nbsp;</div> 
        <div id="header-right-str"> 
            <div class="header-text-area">Text area in right side of header will be limited to the size of the allocated
                height and width. </div> 
        </div> 
    </div> 
    <!-- HEADER div now closed --> 
    <!-- opening MAIN div --> 
    <div id="main"> 
        <div class="main-text-area"> 
            <h2>Just some text to see how it looks.</h2> 
            <h4>Subheader</h4> 
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
                est Lorem ipsum dolor sit amet. </p> 
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
                zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing
                elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> 
            <h4>Subheader</h4> 
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
                ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
                vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
                praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> 
            <p>&nbsp;</p> 
        </div> 
    </div> 
    <!-- MAIN div now closed --> 
    <!-- opening FOOTER div --> 
    <div id="footer"> 
        <div id="footer-left-corner">&nbsp;</div> 
        <div id="footer-str">&nbsp;</div> 
        <div id="footer-right-corner">&nbsp;</div> 
    </div> 
    <!-- FOOTER div now closed --> 
</div> 
<!-- CONTAINER div now closed --> 
</body>
</html>

HTML:

and CSS

*{
  padding:0;
  margin:0;
}


body{
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
}


#container {
	clear: both;
	height: auto;
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;

}


#header {
	width: 960px;
	height: 79px;
        padding:0;
        margin:0;
}


#header-left-corner {
	float: left;
	height: 79px;
	width: 32px;
	background-image: url(graphics/top-left-BG.png);
	background-repeat: no-repeat;
}


#header-left-str {
	float: left;
	height: 79px;
	width: 410px;
	background-image: url(graphics/top-str-BG.png);
	background-repeat: repeat-x;
}


#header-center {
	float: left;
	height: 79px;
	width: 79px;
	background-image: url(graphics/top-middle-BG.png);
	background-repeat: no-repeat;
}


#header-right-corner {
	float: right;
	height: 79px;
	width: 29px;
	background-image: url(graphics/top-right-BG.png);
	background-repeat: no-repeat;
}


#header-right-str {
	float: right;
	height: 79px;
	width: 410px;
	background-image: url(graphics/top-str-BG.png);
	background-repeat: repeat-x;
}


#main {
	clear: both;
	float: left;
	width: 960px;
	height: auto;
	padding:0;
	margin:0;
	background-image: url(graphics/main-BG.png);
	background-repeat: repeat-y;

}



#footer {
	clear: both;
        width: 960px;
        height: 29px;
        padding:0;
        margin:0;
}


#footer-left-corner {
	float: left;
	height: 29px;
	width: 32px;
	background-image: url(graphics/bottom-left-BG.png);
	background-repeat: no-repeat;
}


#footer-str {
	float: left;
	height: 29px;
	width: 899px;
	background-image: url(graphics/bottom-str-BG.png);
	background-repeat: repeat-x;
}
 
#footer-right-corner {
	float: right;
	height: 29px;
	width: 29px;
	background-image: url(graphics/bottom-right-BG.png);
	background-repeat: no-repeat;
}


.header-text-area {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFF66;
	text-align: left;
	float: left;
	height: 60px;
	width: 390px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 9px;
	padding-left: 10px;
}


.main-text-area {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #070AC2;
	text-align: left;
	height: auto;
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	margin-top: 10px;
	margin-bottom: 0px;
}


p {
	padding-top: 0px;
	padding-bottom: 12px;
}


h2 {
	font-size: 24px;
	padding-top: 6px;
	padding-bottom: 12px;
}


h4 {
	font-size: 16px;
	padding-top: 0px;
	padding-bottom: 12px;
}

Code (markup):

Feel free to use.

Rimona, Aug 17, 2010 IP

webmasterplace Well-Known Member

Messages:: 802

Likes Received:: 36

Best Answers:: 0

Trophy Points:: 120

#3

Thanks!
I'll see what I can do with it

webmasterplace, Aug 17, 2010 IP

Rimona Active Member

Messages:: 123

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 63

#4

Here it is fluid version: http://viladi.co.il/wmp/test2.html

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>For WPM v2</title>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body> 
<div id="container"> 
    <!-- opening HEADER div --> 
    <div id="header"> 
        <div id="header-str"> 

            <div id="header-left-corner">&nbsp;</div> 

<div class="left-header-text-area">Left header text - can be anything you want as long it is not higher than 60 px and will
    always be 40% of internal width. </div> 
            <div id="header-right-corner">&nbsp;</div> 

<div class="right-header-text-area" style=" ">Right header text - can be anything you want as long it is not higher than 60 px and will
    always be 40% of internal width.</div>
            <div id="header-center">&nbsp;</div>

        </div> 
    </div> 
    <!-- HEADER div now closed --> 
    <div id="leftwrapper"> 
        <div id="rightwrapper"> 
            <div class="main-text-area"> 
                <h2>Just some text to see how it looks.</h2> 
                <h4>Subheader</h4> 
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
                    sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                    kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
                    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
                    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
                    sea takimata sanctus est Lorem ipsum dolor sit amet. </p> 
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                    eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
                    zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing
                    elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> 
                <h4>Subheader</h4> 
                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
                    ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
                    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
                    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> 
                <p>&nbsp;</p> 
            </div> 
            <!-- MAIN-TEXT-AREA div now closed --> 

        </div> 

<!-- RIGHTCONTAINER div now closed -->
</div> 
<!-- LEDTCONTAINER div now closed -->

    <!-- opening FOOTER div --> 
    <div id="footer"> 
        <div id="footer-str"> 
            <div id="footer-left-corner">&nbsp;</div> 
            <div id="footer-right-corner">&nbsp;</div> 
        </div> 
    </div> 
    <!-- FOOTER div now closed --> 
</div> 
<!-- CONTAINER div now closed --> 
</body>
</html>

HTML:

The CSS:

*{
  padding:0;
  margin:0;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  line-height: 1.5em;
}

#container {
	clear: both;
	height: auto;
	width: 96%;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}

#header {
	width: 100%;
	height: 79px;
   padding:0;
   margin:0;
}

#header-left-corner {
	float: left;
	height: 79px;
	width: 32px;
	background-image: url(graphics/top-left2-BG.png);
	background-repeat: no-repeat;
}

#header-str {
	float: left;
	height: 79px;
	width: 100%;
	background-image: url(graphics/top-str-BG.png);
	background-repeat: repeat-x;
}

#header-center {
	height: 79px;
	width: 79px;
	background-image: url(graphics/top-middle-BG.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin: auto;
	z-index: 50;
}

#header-right-corner {
	float: right;
	height: 79px;
	width: 29px;
	background-image: url(graphics/top-right2-BG.png);
	background-repeat: no-repeat;
}



#leftwrapper{
	float: left;
	width: 100%;
	background-image: url(graphics/leftwrapper-BG.png);
	background-repeat: repeat-y;
	clear: left;
	height: auto;
}

#rightwrapper{
	float: right;
	width: 95%;
	background-image: url(graphics/right-BG.png);
	background-repeat: repeat-y;
	clear: right;
	height: auto;
	background-position: right;
}




#footer {
	clear: both;
	width: 100%;
	height: 29px;
   padding:0;
   margin:0;
}

#footer-left-corner {
	float: left;
	height: 29px;
	width: 32px;
	background-image: url(graphics/bottom-left2-BG.png);
	background-repeat: no-repeat;
}

#footer-str {
	float: left;
	height: 29px;
	width: 100%;
	background-image: url(graphics/bottom-str-BG.png);
	background-repeat: repeat-x;
}


#footer-right-corner {
	float: right;
	height: 29px;
	width: 29px;
	background-image: url(graphics/bottom-right2-BG.png);
	background-repeat: no-repeat;
}

.main-text-area {
margin: 0 50px 0px 10px;
}


.left-header-text-area {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFF66;
	text-align: left;
	float: left;
	height: 60px;
	width: 40%;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 9px;
	padding-left: 10px;
}

.right-header-text-area {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFF66;
	text-align: left;
	float: right;
	height: 60px;
	width: 40%;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 9px;
	padding-left: 10px;
}


p {
	padding-top: 0px;
	padding-bottom: 12px;
}

h2 {
	font-size: 24px;
	padding-top: 6px;
	padding-bottom: 12px;
}

h4 {
	font-size: 16px;
	padding-top: 0px;
	padding-bottom: 12px;
}

Code (markup):

Fully W3 compliant

Rimona, Aug 19, 2010 IP

webmasterplace Well-Known Member

Messages:: 802

Likes Received:: 36

Best Answers:: 0

Trophy Points:: 120

#5

Thanks a lot m8!
Sorry for late reply ... I was expecting a PM lol

webmasterplace, Aug 20, 2010 IP

uabclst Greenhorn

Messages:: 47

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 16

#6

Rimona did you use a tool to get that nice listing? or did you do it manually?

uabclst, Aug 22, 2010 IP

Rimona Active Member

Messages:: 123

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 63

#7

I used tidyhtml.

Be careful it still has some bugs - but if you set it only to format the listing you should be ok.

Rimona, Aug 22, 2010 IP

Log in or Sign up

DIV help

webmasterplace Well-Known Member

Rimona Active Member

webmasterplace Well-Known Member

Rimona Active Member

webmasterplace Well-Known Member

uabclst Greenhorn

Rimona Active Member

Useful Searches