nicht angemeldet
Elemente Verschoben
Hi Leute,
ich suche mich noch verrückt... ich arbeite an einer Website für meine Frau und wollte sie ein wenig "W3-Konform" machen... nach diversen korrekturen fiel mir jedoch auf, das nun Elemente auf der Seite übereinander ragen, obwohl dies vorher nicht der Fall war...
http://www.anime-manga-project.de/index.php?module=frontpage&username=SailorCM&password=fd035e95fff318476a6300f1e1adca2a
Es handelt sich dabei um die auf der Seite sich befindlichen DIV's, welche sich verschieben lassen.. diese DIV's ragen nun übereinander... :(
Vielleicht sieht jemand von euch wo der Fehler liegt!
Besten Dank im Vorraus
MfG.
Benedikt Hübschen
-
Hi Benedikt,
könntest du uns vielleicht mal deine css oder Teile deiner css zur verfühgung stellen. Sonst ist es ein wenig schwierig den fehler zu lokalisiieren
Gruß Arne-
Aber natürlich:
td, p, font { font-family: Arial; font-size: 10pt; padding: 0px; }
th { font-family: Arial; font-size: 10pt; }
body { background-image:url(images/bg.gif); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; spacing: 0px 0px 0px 0px; background-attachment: fixed; }
table { border: solid 0px #000000; border-spacing: 0px; border-collapse:collapse; spacing: 0px; }
div, img { behavior: url(png.htc); }
.row1, .row2, .row3, .row3Right { background-image:url(images/bg1.png); behavior: url(png.htc); background-repeat: no-repeat; padding: 4px; }
.catLeft, .rowpic { background-image:url(images/bg2.png); behavior: url(png.htc); background-repeat: no-repeat; padding: 4px; }
.thCornerL, .thTop, .thCornerR { background-image:url(images/bg3.png); behavior: url(png.htc); background-repeat: no-repeat; }
.gensmall, .forumlink, .cattitle { color:000000; }
.forumline { padding:5px; }
.partners, statistics {
text-align: center;
}
#content td, .realcontentpane {
padding: 4px;
}#regform td {
background-image:url('images/bg1.png'); background-repeat: no-repeat;
padding: 4px;
}.logo {
width: 223px;
height: 90px;
background-image:url(images/l1.png);
background-repeat: no-repeat;
}.login {
width: 223px;
height: 90px;
background-image:url(images/l3.png);
background-repeat: no-repeat;
}.headerpane {
width: 100%;
background-color:#ffffff;
}.navigationpane, .navigation {
width: 223px;
text-align: top;
vertical-align: top;
}.advertising {
height: 90px;
background-image:url(images/l2.png);
background-repeat: repeat-x;
}.nomargin {
spacing: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 90px;
}.lasttopics {
width:100%;
}.realcontentpane {
vertical-align: top;
}ul.sortable li {
position: relative;
}ul.boxy {
list-style-type: none;
padding: 4px 4px 0 4px;
margin: 0px;
width: 10em;
font-size: 13px;
font-family: Arial, sans-serif;
border: 1px solid #ffffff;
}ul.boxy li {
cursor:move;
margin-bottom: 4px;
padding: 2px 2px;
border: 1px solid #ffffff;
background-color: #ffffff;
height:311px;
width:200px;
}#left {
width: 98%;
float: left;
margin-left: 5px;
}#cntr {
width: 98%;
float: left;
margin-left: 5px;
}#rght {
width: 98%;
float: left;
margin-left: 5px;
}h2 {
color: #7DA721;
font-weight: normal;
font-size: 14px;
margin: 20px 0 0 0;
}br {
clear: left;
}.ncontent {
display:none;
}-
Hast du die css selbst geschrieben? also da sind ein paar sachen drin die man einfacher schreiben kann z.B. background-repeat: no-repeat;. Sowas kann man ganz weg lassen. margin: 20px 0 0 0; da kann man auch: margin-top: 20px; schreiben. Wie heißen denn die Boxen? ICh weiß gerade nicht so genau, was was ist.
Ich hatte auch mal das Problem, dass ich ne alte CSS Datei genommen habe und für ne neue Seite angepasst habe. leider funst das oft nicht. Hab alles nochmal geschrieben. Ist oft der schnellste weg.
Ach, nochwas ich gerade schnell gesehen habe. padding: 2px 2px; da fehlen die 2 anderen angaben. Du musst es entweder so: padding: 2px; oder so padding: 2px 2px 2px 2px; schreiben. Also wie gesagt, ich würd die Datei mal aufs geringste reduzieren und nochmalschreiebn.
Liebe Grüße
Arne-
hi,
also da sind ein paar sachen drin die man einfacher schreiben kann z.B. background-repeat: no-repeat;
Nein, kann man nicht - weil der Defaultwert für diese Eigenschaft repeat ist.
margin: 20px 0 0 0; da kann man auch: margin-top: 20px; schreiben.
Nein, nicht wenn man für alle vier Eigenschaften eventuelle Browser-Defaults explizit überschreiben will.
padding: 2px 2px; da fehlen die 2 anderen angaben.
Nein, tun sie nicht. Lies es noch mal nach.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi Arne,
Zum Teil ist sie es... ein Teil ist C&P vom phpBB (welches ich als Grundlage für die Userverwaltung nutze), DokuWiki und einem Ajax-Sample von http://www.cyberdummy.co.uk/test/dd.php (um diesen Teil handelt das Problem)
Die CSS-Datei ist noch nicht vollständig - Ja *g* daran wollte ich mich noch machen, jedoch wundert mich trotzdem, das nachdem ich ein paar korrekturen gemacht habe (nichtmal am CSS-Code!) .. z.B. alt-Tags in Bilder usw. Plötzlich alles so stark übereinander lappt.
Zu dem margin: 2px; - Mir ist desöfteren aufgefallen, das Opera 6.x solche Angaben fast immer ignorieren, wenn nicht vollständig 2px 2px 2px 2px; angegeben wurde :)
Ich werd jetzt mal überall die Border anktivieren... vielleicht sieht man dann etwas mehr.
Gruß
Benedikt
-
hi,
Zu dem margin: 2px; - Mir ist desöfteren aufgefallen, das Opera 6.x solche Angaben fast immer ignorieren, wenn nicht vollständig 2px 2px 2px 2px; angegeben wurde :)
So what - Opera liegt aktuell in Version 9 vor - 6 nutzt vermutlich inzwischen kein lebender Mensch mehr.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
Ich habe das Problem jetzt doch selbst in den Griff bekommen.
Nachdem ich den DOCTYPE Angegeben hatte, wurde die Seite wohl oder übel anders Behandelt, was auch für die CSS-Angaben galt.
Ohne DOCTYPE-Angabe wurde das "height: 100px" eher als Mindestgröße angesehen, statt wie danach als fester Orientierungspunkt für alle nachfolgenden Elemente.
Vielen Dank an alle, die sich die Mühe gemacht haben, einmal drüber zu sehen.
MfG.
Benedikt Hübschen