Hej
Jeg har fået rodet mig ud i noget css for første gang.
Jeg er dog stødt på det "lille" problem, at så snart jeg begynder at
arrangere mine elementer, beholder den omkringliggende <div> den oprindelige
størrelse, og den kan ikke gøres mindre.
Min html kode ligner noget det her (psudo)
<div class="container">
<div class="overskrift">overskrift</div>
<div class="dato">dato</div>
<div class="indhold>indhold</div>
</div>
og lad os sige at container klassen inden css er 100px høj, så er den det
også bagefter, og efterlader altså et hvidt område i bunden.
Fuld kildekode:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="./design/default/content.css" rel="stylesheet" type="text/css">
</head><H1>Nyheder</H1>
<div class="news_container">
<div class="news_title">title</div>
<div class="news_img_div"><img src="./design/default/categories/ss.jpg"
class="news_img"></div>
<div class="news_category">Kategori: ss</div>
<div class="news_date">Dato: 2005-02-22</div>
<div class="news_username">by: <a class="news_username_link"
href="mailto:rjm@mrfraggle.dk">mrx</a></div>
<div class="news_edit"><a class="news_edit_link"
href="/skole/news.php?action=editnews&id=27">ret</a></div>
<div class="news_delete"><a class="news_delete_link"
href="/skole/news.php?action=delete&id=27">slet</a></div>
<div class="news_teaser">teaser</div>
<div class="news_readmore">
<span class="news_readmore"><a class="news_readmore_link"
href="/skole/news.php?action=show&id=27">læse mere...</a></span>
<span class="news_link"> </span>
<span class="news_comments"><a class="news_comments_links"
href="/skole/news.php?action=show&id=27">Kommentarer(0)</a></span>
</div>
</div>
css:.
news_container{ border: solid black;width:22em;}
..news_title{
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
text-decoration: none;
font-weight: normal;
padding-left:10px;
border: none;
background:#999999;
}
..news_img_div{
border: none;
position:relative;
top:0px;
left:270px;
z-index:10;
}
..news_img{
width:80px;
height:80px;
}
..news_category{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration: none;
padding-left:10px;
background:#CCCCCC;
border: none;
position:relative;
top:-80px
}
..news_date{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration: none;
padding-left:10px;
background:#CCCCCC;
border: none;
position:relative;
top:-80px
}
..news_username{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style: normal;
text-decoration: none;
padding-left:10px;
background:#CCCCCC;
border: none;
height:50px;
position:relative;
top:-80px
}
a.news_username_link{
color: #84A084;
border:none;
}
..news_edit{
position:relative;
top:-140px;
}
a.news_edit_link{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration: none;
padding-left:10px;
}
..news_delete{
position:relative;
top: -155px;
left: 30px;
}
a.news_delete_link{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration: none;
padding-left:10px;
}
..news_teaser{
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration: none;
padding-left:4px;
padding-top:4px;
background:#FFFFFF;
border: none;
position:relative;
top:-80px
}
..news_article{
color: #5D5A5A;
border: none;
}
..news_readmore{
background:#cccccc;
}
..news_readmore_link{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style:normal;
text-align:left;
text-decoration: none;
ing-left:10px;
}
..news_link{
align:center;
}
..news_link_link{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
align:center;
text-decoration: none;
padding-left:10px;
}
..news_comments{
text-align:right;
}
..news_comments_links{
color: #666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-align:right;
text-decoration: none;
padding-left:10px;
}
Det var en længere smøre.Jeg ved godt at body og html taggene mangler i
eksemplet, så med mindre det ER grunden til problemet, er det ikke
relevant.Jeg ved også godt at mit CSS nok ikke er så "smart" som det kunne
være, men som tidligere nævnt har jeg ikke benyttet css og <div><span>
taggene før så det en lidt ny verden
pfh tak for hjælpen
MvhRegin Madsen
x-posted i dk.edb.internet.webdesign