Fühlt sich immer ein wenig an wie das erste Date.
Man hat zwar ein klares Ziel, weiss aber nie wie man den Small-Talk drumherum geschickt gestaltet um das Ziel auch zu erreichen.
Ich lass den Small-Talk jetzt einfach mal weg, und komm sofort zum Punkt.
Ich habe mir heute morgen CMSms installiert (übrigens als neuntes CMS) und bin positiv überrascht. Es ist tatsächlich das erste CMS, dass nicht nur verspricht simpel zu sein, es macht tatsächlich Sinn.
Momentan sitze ich allerdings an folgendem Problem:
Ich hab den HTML-Code und das Stylesheet meiner Site in CMSms eingebunden und einfach mal den Standard-Willkommen-Text von CMSms stehen lassen. Das Content-Div ist jetzt leider im Firefox 12px vom Header-Div abgesetzt. Ausserdem habe ich ein Div, in dem eine kleine Leiste ist, die nur das Ende der Seite visuell darstellen soll. Dieses Div ist wiederrum 12px vom Content-Div abgesetzt.
Da ich jetzt viel mit Divs um mich geworfen habe gibt's zur Veranschaulichung, und zur Auflockerung, zwei Bilder.
Die Website im Internet Explorer
Die Website im Firefox
Wie ihr seht funktioniert die Formatierung im Internet Explorer prächtig, (Allein das hat mich schon zum Staunen gebracht) im Firefox hingegen sind die Divs verschoben.
Bis jetzt hört sich das alles verteufelt nach einem HTML/CSS Problem an, mit dem ihr eigentlich nichts am Hut hat, allerdings tritt das Ganze wie gesagt erst nach der Installation von CMSms auf..
Hier der Quellcode der Seite:
Code: Select all
<!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>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>
</__body bgcolor="#8A9C84">
<!--Header-->
<div class="header">
<!--Navi-->
<div class="navi"><a href="./news.html"><img alt="arrow" src="./uploads/images/arrow.gif"/>Home</a> <a href="./geraete.html"><img alt="arrow" src="./uploads/images/arrow.gif"/>Geräte</a> <a href="./studio.html"><img alt="arrow" src="./uploads/images/arrow.gif"/>Studio</a> <a href="./kurse.html"><img alt="arrow" src="./uploads/images/arrow.gif"/>Kurse</a> <a href="./aktionen.html"><img alt="arrow" src="./uploads/images/arrow.gif"/>Aktionen</a></div>
<!--Navi Ende-->
</div>
<!--Header Ende-->
<!--Content-->
<div class="content">
{content}
</div>
<!--Content Ende-->
<!--Bottombar-->
<div class="bottombar"></div>
<!--Bottombar Ende-->
<__body>
</__html>Das wird aber gemacht, sobald ich/ihr dieses Problem gelöst habe/habt. D:
Die dazu passende CSS sieht so aus:
Code: Select all
body
{
margin: 0px;
margin-top: 10px;
}
div
{
font-family: arial, "sans-serif";
font-size: 12px;
color: #484848;
}
.header
{
width: 690px;
height: 163px;
background-image: url(./uploads/images/header.jpg);
margin: auto;
}
.content
{
/*IE*/
margin: auto;
width: 670px;
height: 383px;
background-image: url(./uploads/images/content.jpg);
text-align: justify;
padding-left: 10px;
padding-right: 10px;
}
.content[class]
{
/*Coole Browser*/
margin: auto;
width: 670px;
height: auto;
min-height: 383px;
background-image: url(./uploads/images/content.jpg);
text-align: justify;
padding-left: 10px;
padding-right: 10px;
}
.bottombar
{
width: 690px;
height: 19px;
background-image: url(./uploads/images/bottombar.jpg);
margin: auto;
}
.navi
{
height: 25px;
width: 300px;
position: relative;
top: 100px;
left: 10px;
}
a
{
color: #565656;
text-decoration: none;
font-weight: bold;
font-family: arial, "sans-serif";
font-size: 12px;
}
img
{
border: 2px;
border-style: solid;
border-color: #9CAB96;
}
.bottomtext
{
position: relative;
bottom: 0px;
}Bye..
PS: Ich kann euch leider keinen Link geben, da mein persönlicher Webspace kein PHP unterstützt, und ich das Ganze hier auf'm lokalen Apache laufen lasse..
/edit: Gerade eben habe ich herausgefunden, warum Firefox die Divs rumschubst. Ich hab die Tags gelöscht und siehe da, es scheint zu funktionieren. Mein Gesichtsausdruck konnte mit "WTF" ganz gut beschrieben werden.
Jetzt ist die Frage, wie ich den Code umschreiben muss, damit FireFox die Tags egal sind (elegante Lösung) oder wie ich dem Editor im CMS klar mache, dass er die Tags durch 's ersetzen soll...(weniger elegante Lösung)
/edit²: Auch nachdem ich die Tags rausnehme, ist das unterste Div (Das mit dem Banner, der die Seite visuell beendet.) noch um 12px verschoben.. Irgendwer da oben kann mich nicht leiden, das spüre ich.
/edit³: Hab jetzt das unterste Div auch anpassen können. Eine Überschrift bestehend aus einem erzwungen Leerzeichen war Schuld dran. Jetzt muss ich nur noch den Quelltext/WYSIWYG-Editor anpassen..
