best practice for listing and divs

[MDanz]

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.

 

[wildteen88]

does display:block list divs one under another?... i  have div's in a loop will they display underneath one another?

Divs and (un)ordered lists (<ol> or <ul>). Are all block level elements so applying display: block will have no affect on these tags.

 

I  have div's in a loop will they display underneath one another?... or shall i use listing <ul><li></li></ul>?

If you're displaying a menu or list of items then it is best to use a (unordered) list, then use CSS to style the menu to your liking. You'd use divs for each part of your layout. For example

<div id="container">
    <div id="header">
         Heading here
         <div id="navigation">
               Site menu here
         </div>
     </div>

      <div id="main">
            main content here
      </div>

       <div id="footer">
                footer here
       </div>
</div>

 

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;

Do not use text-align. text-align is for aligning text not elements on your page. Provided the parent container has a width defined you can use auto margins (margin: 0 auto;)

 

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

You can apply padding to any element.

[MDanz]

thanks for help

 

here's my code.. the divs aren't listing below one another.

 

<div id="headerfront">//phpcode</div>
<div class="qclass">
//php code
</div>
<div id="amount" class="aclass">
//phpcode
</div>

 

#headerfront {
display:block;
position:absolute; width:100%; top:0px; left:0px; height:115px; text-align:center; background-image:url("headerbackground.jpg"); }

.qclass {
display:block;
width:1000px;
margin:0 auto;
}
.aclass {
display:block;
margin:0 auto;

}

 

how do i get the divs to list under one another? they all seem to start at the top. there are a collection of elements in the php code.. so unorderlist is not appropriate.

[MDanz]

using float instead of display blocks work.  But when i put float:none; then the amount div goes to the top;

[MDanz]

nvm the above... this is the most important.  I know how to list now.  It just seems when i try to position elements inside a div, it effects everything outside the container div.

 

How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected.

 

i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div. 

 

The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div.

<div id="adult">
<?php echo "<ul><li>test1</li></ul>";  ?>
</div>
<div id="qanda">
<?php  echo "
<div id='questions'>
<ul id='questionsul'>
<li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li>
</ul>
</div>

<div id='answers'>
<ul id='answersul'>
  <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li>
</ul>
</div>


";  ?>
</div>
<div id="amount"">
<?php echo "<ul><li>test3</li></ul>";;  ?>

</div>
	<div id="results">
<?php echo "<ul><li>test4</li></ul>";  ?>
</div>
<div id="contributing">
<?php echo "<ul><li>test5</li></ul>";  ?>
</div>
<div id="advert">
<?php echo "<ul><li>test6</li></ul>";  ?>
</div>
</div></div>

 

CSS

 

#questions{
position:relative;
top:0px;
text-align:left;

}

#answers{
position:relative;
top:0px;
text-align:right;


}


#adult{
width:700px;
margin:0 auto;

}

#qanda {
width:700px;
margin:0 auto;
}

#amount {

width:700px;
margin:0 auto;
}

#results {
width:700px;
margin:0 auto;

}

#contributing {
width:700px;
margin:0 auto;

}
#advert {
width:700px;
margin:0 auto;

}