CSS: Element hamnar fel

DinoMedlem sedan sep. 20011 914 inlägg

Frågan8 apr. 2009 11:04#1

Har lite problem med nedan kod.
1. Varför hamnar UL utanför #divList?
2. Varför blir inte UL centerad i #divPager?
3. Varför hamnar inte #div7 till höger och i mitten i #div6?

Tack.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaa</title>
<style type="text/css">
<!--

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td 
{
     margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:top;
}

body{font:11px/1.4 Verdana, Arial, Helvetica, Sans-Serif;}

#divList
{
     width:300px;
     text-align:center;
     padding:5px;
     border-top:solid 6px silver;
     border-bottom:solid 6px silver;			
     clear:both;
}
#divList ul
{
     list-style:none;
}
#divList ul li
{
     display: inline;
     float: left;
     margin: 5px;
     border:dotted 1px gray;
     padding:10px;
}

#divPager
{
     margin-top:5px;
     text-align:center;
     width:300px;
     clear:both;
}
#divPager ul
{
     list-style: none;
}
#divPager ul li
{
     float:left;
     padding: 6px;
}

#div6
{
     height:30px;
     vertical-align:middle;
     text-align:right;
     border:solid 1px green;			
     clear:both;
}
#div7
{
     width:100px;
     border:solid 1px red;
     vertical-align:middle;
     text-align:left;
}
-->
</style>

</head>
<body>
<div id="divList">
     <ul>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
          <li>aaaaa<br/>bbbbb</li>
     </ul>
</div>
<div id="divPager">
     <ul>
          <li><a href="#">1</a></li>
          <li>2</li>
          <li>3</li>
     </ul>
</div>

<div id="div6">
     <div id="div7"><span>hhhhhh</span></div>
</div>
</body>
</html>

jarvkloMedlem sedan juli 20013 378 inlägg

8 apr. 2009 21:49#2

Dino skrev:

1. Varför hamnar UL utanför #divList?

Du har float: left på de li som ligger i den... (float "lyfter upp" li-elementen "ovanför" ul i detta fall)

Dino skrev:

2. Varför blir inte UL centerad i #divPager?

#divPager är bara 300px bred och ligger vänsterjusterad...
Fytta bredden fråm #divPager till dess ul, sätt display:block och margin: 0 auto på ul istället

Dino skrev:

3. Varför hamnar inte #div7 till höger och i mitten i #div6?

margin-left och margin-right är noll och inte auto på #div7.
vad gäller höjdcentreringen, så gäller inte CSS vertical-align inuti div-element, så du får ta till en annan metod för höjdcentrering...

Lycka till :bire

DinoMedlem sedan sep. 20011 914 inlägg

9 apr. 2009 21:09#3

Tackar så mycket för de svaren. :)