Hallo zusammen,
ich hab ein Problem mit CSS. Und zwar will ich die Anzeige einer Extension verändern. Soweit so gut.
Ich hab also eine HTML Datei und ein CSS File.
In einem Grafikprogramm habe ich mir mal das Layout zurecht gelegt. So solls aussehen:
Bild: ff-pfaffenhofen.de/template.jpg
Im Editor bahnen sich schon die ersten Probleme an und die einzelnen "Bilder" (Hintergründe der DIV-Tags) werden zu groß dargestellt oder doppelt:
Bild: ff-pfaffenhofen.de/editor.jpg
An was liegt das? Was läuft da mit den Floats schief?
Hier mal der HTML-Code:
<div id="einsatz_border">
<div id="einsatz_title">
<h4>###TITLE###</h4>
</div>
<div id="einsatz_type">
<h4 align="center">###TYPE###</h4>
</div>
<div id="einsatz_border">
<div id="inner-border">
<div id="einsatz_time">
###DATE_BEGIN###</div>
<div id="einsatz_time1">
###DATE_END###</div>
<div id="einsatz_location">
###LOCATION###</div></div>
<div id="einsatz_note">
<p>###DESCRIPTION###</p>
</div>
<div id="einsatz_fahrzeuge">
<ul class="fahrzeuge">
<!--###CAR_ITEM###-->
<a href="###LINK###"><img src="###IMAGE###" alt="###NAME###" /><br />
###NAME###</a>
</ul><!--###CAR_ITEM###-->
</div>
<div id="einsatz_foot">
Eintrag erstellt am ###CREATED### ###EDIT_PANEL### <a href="http://www.ff-pfaffenhofen.de/index.php?id=7">[ Zur Übersicht ]</a>
</div></div></div>
<h2><br /><br />
Die CSS:
#einsatz_border {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: #FFFFFF;
height: auto;
width: 860px;
float: inherit;
}
#inner-border {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: #FFFFFF;
height: auto;
width: 860px;
float: inherit;
}
#einsatz_title {
color: #FFFFFF;
float: left;
width: 553px;
height: 43px;
background-image: url(template-files/titel.png);
padding-top: 15px;
padding-left: 15px;
}
#einsatz_time {
color: #FFFFFF;
float: left;
width: 235px;
background-image: url(template-files/time1.png);
height: 47px;
padding-top: 13px;
padding-left: 134px;
}
#einsatz_time1 {
color: #FFFFFF;
float: left;
width: 235px;
background-image: url(template-files/time2.png);
height: 47px;
padding-top: 13px;
padding-left: 132px;
}
#einsatz_location {
background-color: #8A8484;
color: #FFFFFF;
float: left;
width: 281px;
height: 47px;
background-image: url(template-files/time3.png);
padding-top: 13px;
padding-left: 133px;
}
#einsatz_type{
color: #FFFFFF;
float: left;
width: 198px;
height:42px;
text-align: right;
background-image: url(template-files/type.png);
padding-top: 15px;
}
#einsatz_space{
width: 750px;
float: center;
height: 3px;
}
#einsatz_note{
width: 551px;
height: 387px;
float: left;
background-image: url(template-files/note.png);
padding-top: 34px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
#einsatz_fahrzeuge{
width: 200px;
float: left;
height: 387px;
background-image: url(template-files/fahrzeuge.png);
padding-top: 33px;
}
#einsatz_foot{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
width: 750px;
float: left;
height: 21px;
color: #FFFFFF;
text-align: right;
background-image: url(template-files/foot.png);
}
Im Moment siehts so aus:
http://www.ff-pfaffenhofen.de/index.php?id=7
Dann einfach auf einen Bericht klicken.
Vielleicht findet ja jemand meine Fehler #paralyzed# ... Danke!
Gruß,
red-trombone