best practice for listing and divs

Question

MDanz 0 Junior Poster

14 Years Ago

i just started web developing and dived straight into table layouts. now that i've finished my project... i thought it would be easy to transition to divs. The problem i am having is positioning. Can i get help with these questions.

display:block;

does display:block list divs one under another?... i have div's in a loop will they display underneath one another?... or shall i use listing <ul><li></li></ul>?

how do i horizontally center an element/div inside a div? ...do i use text-align:center on the container div? or margin: 0 auto;

I understand float and listings. can you do padding on listings?

any help appreciated. Because sometimes i read the tutorials and apply them to my website and it doesn't work which is frustrating.

web-design

4 Contributors
4 Replies
148 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by macgurl70

$urya 0 Light Poster

14 Years Ago

Hi MDanz,

In order to clear your all the doubts, please look carefully at the code below:

<html>
<head>
<title> best practice for listing and divs</title>
<style ="text/css">
h1{font-size:1.5em; font-family:calibri;}
.CODE{display:block; 
border:1px dashed grey; 
background-color: lightgrey;
padding: 2 2 2 2;
margin: 2 2 2 2; 
}
.MODE{display:block; 
border:1px dashed grey; 
background-color: lightyellow;
padding: 2 2 2 2;
margin: 2 2 2 2;
}
.center{
height:auto;
width:750px;
margin-left:auto;
margin-right:auto;
border:1px solid red
}
li{
padding:5px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>best practice for listing and divs...</h1>
<h1>Centering an element/ div :</h1>
<div class="center"> Center class for the div</div>
<h1>displaying div one under another when display:block style is used:</h1>
<div class="CODE">
<div class="MODE">This line written in CODE tag </div>
<div class="MODE">This line written in CODE tag </div>
<div class="MODE">This line written in CODE tag </div>
</div>
<h1>padding on listing :</h1>
<li>This is another line written in another CODE block</li>
<li>This is another line written in another CODE block</li>
<li>This is another line written in another CODE block</li>
<li>This is another line written in another CODE block</li>
<li>This is another line written in another CODE block</li>
<li>This is another line written in another CODE block</li>
</body>
</html>

Lets see here in code above display: block; is being used in CODE and MODE class and they will display each element underneath one another. until you change display: block code of MODE class display: inline.

Now to center a div/ element, we generally think of

text-align: center;

but it will center your text written in your div tag and not the element or class. To center a div you can use:

.center{
height:auto;
width:750px;
margin-left:auto;
margin-right:auto;
border:1px solid red
}

For padding on listing you can do this :

li{
padding:5px;
border:1px solid blue;
}

But if you use this :

li{
padding:5px;
list-style:none;
border:1px solid blue;
}

You'll see that your div and listing looks alike. Yet still both have different properties.

I think these code might help you in answering your questions.

Regards
Surya

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

drjohn 56 Posting Pro in Training · Answer 1 · 2010-08-08T00:00:25+00:00

display:block is the default style for a div, therefore it is not necessary to state this the vast, vast majority of the time, as a div is by definition a block.

And block level elements sit under each other.

The normal way to get divs to sit next to each other is to define a width for them, and then float them right or left, as appropriate. Normally you would float them both the same way, but you can leave a gutter margin between them by floating one left and the other right (assuming that their widths don't either fill all available space, or more space than is available).

Using display:inline for a div begs the question WHY are you using a div when you want an inline element??? IE it is usually a mistake (not always, you may be after a special effect, it's just usually wrong).

So in conclusion, you normally have no use what so ever in applying display:block to a div. Ditto display:inline for a div. And not giving a div a width means that its width is 100% of the available space (but setting display inline changes its width to exactly that of its content, but WHY are you using a div when you want an inline element???)

PS you can't have divs in a loop, as a loop is part of an if or while or do statement in a programming language and html is not a programming language, so the phrase is meaningless.

macgurl70 9 Junior Poster · Answer 2 · 2010-08-08T01:52:31+00:00

First, the best way to look at a div is a blocking off of specific HTML code so you can format the output in a specific in less code and more efficiently. It is not part of a loop, since a loop is part of a program or script coding (such as Javascript) that will provide a specified output, such as the answer to a math equation or a specific answer. The Javascript does not stylize either - they both work together for a more effective web page.

Reading your question, it appears you are wanting to create a page that looks like tables without using tables, if so then you won't need to use the listing to create the look. I usually only use lists when creating a menu for links.

I created a very very basic outline/example and will be using that.

I am not using any CSS on the body for this example either.

The first div, or the "main" div is where I am going to set most of the styles and information for the browser to know how to display. I will be using the class for this.

.main {
   font: Arial, Helvetica, sans-serif;
   color: 000000;
   text-align: left;
   }

I am aligning the information in the main div to the left to help me with my positioning of the other divs.

I gave each div a separate id, this will help me with the placement of each specific div container.

#div1 {
	position:absolute;
	top:150px;
	left:0px;
	text-align:center;
	}
	
#div2 {
	position:absolute;
	top:150px;
	left:155px;
	text-align:center;
	}
	
#div3 {
	position:absolute;
	top:150px;
	left:155px;
	text-align:center;
	}
	
#div4 {
	position:absolute;
	top:300px;
	left:0px;
	text-align:center;
	}
	
#div2 {
	position:absolute;
	top:300px;
	left:155px;
	text-align:center;
	}
	
#div3 {
	position:absolute;
	top:300px;
	left:310px;
	text-align:center;
	}

Each one is given a different position in the page layout, and each "row" has the same top positioning. I will save this to a separate .css file, so I can use it on different pages in my site without having to always recode it. I will name it style.css.

A generalized HTML code would look like:

<html>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Table Testing</title>
<body>
<div id="main" class="main">
   <div id="div1">text here</div>
   <div id="div2">text here</div>
   <div id="div3">text here</div>
   <div id="div4">text here</div>
   <div id="div5">text here</div>
   <div id="div6">text here</div>
</div>
</body>
</html>

The css style for each div based on id, has the text being centered for that specific div. This also allows you to specify different text formatting for that specific block of information if you want it different than the others.

Hope this helps some.

macgurl70 9 Junior Poster · Answer 3 · 2010-08-08T06:45:26+00:00

I forgot, the time I use display:block is when I know I will be showing and hiding divs using a javascript, such as a mouseover and changing text within an area. I use different divs for the text and have some hidden, and the one showing is display:block.

Using the CSS code from my previous post and naming it style.css again.

/* CSS Document */

.main {
	font:Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:left;
	}
	
#div1 {
	position:absolute;
	top:150px;
	left:0px;
	text-align:center;
	display:block;
	}
	
#div2 {
	position:absolute;
	top:150px;
	left:155px;
	text-align:center;
	display:block;
	display:none;
	}
	
#div3 {
	position:absolute;
	top:150px;
	left:155px;
	text-align:center;
	display:none;
	}
	
#div4 {
	position:absolute;
	top:300px;
	left:0px;
	text-align:center;
	display:none;
	}
	
#div2 {
	position:absolute;
	top:300px;
	left:155px;
	text-align:center;
	display:none;
	}
	
#div3 {
	position:absolute;
	top:300px;
	left:310px;
	text-align:center;
	display:none;
	}

This will show only the div with the id of "div1"

Now, adding a button will allow us to provide an action to change the div's display status.

<html>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Table Testing</title>
<body>
<div id="main" class="main">
   <form><input type="button" value="swtich" onclick="switchDiv();"></form>
   <div id="div1">text here</div>
   <div id="div2">text here</div>
   <div id="div3">text here</div>
   <div id="div4">text here</div>
   <div id="div5">text here</div>
   <div id="div6">text here</div>
</div>
</body>
</html>

switchDiv() is the javascript function

function switchDiv(){
   document.getElementById("div1").style.display='none';
   document.getElementById("div2").style.display='block';
}

Now, when you click the button - the styles will change where div1 is now hidden and div2 is now showing.