Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 8
Seite [1]
Beckz


Rock the board




Beiträge: 62
 # Thema - 16.12.2009 um 22:16 Uhr
Also bevor ich lange erkläre:
Mein Problem sieht im IE und FF so aus:


In der Vorschau vom Dreamweaver lustigerweise richtig

html
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
1. / 2. / ... 
 <div id="container">
    <div id="logo">
    </div>
    <div id="head">
    </div>
    <div id="login">
    </div>
    <div id="clear">
    </div>
</div>


CSS
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
1. / 2. / ... 
 body {
  background-color: #000000;
  padding: 0px 10px 0 10px;
  font-size: 12px;
}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

#container {
  margin:  0 auto;
  width: 1005px;
}

#logo {
  background-image: url(images/logo.jpg);
  width: 204px;
  height: 227px;
  float: left;
}

#head {
  background-image: url(images/header.jpg);
  width: 600px;
  height: 201px;
  margin-left: 204px;
}

#login {
  float: right;
 /* margin-left: 804px;*/
  background-image: url(images/login.jpg);
  width: 201px;
  height: 227px;

}
#clear{
clear: both;
}


Ich hab jetzt glaube ich so gut wie alles schon ausprobiert, irgendwie stehe ich langsam auf dem Schlauch. Wieso rutscht das rechte Div nach unten?
Inaktiv
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 1 - 16.12.2009 um 22:26 Uhr
Hi Beckz,
bei #head fehlt das float: right/left;
und bei #login würde ich auch ein float:left daraus machen

mach bei allem mal ein float left;

Könnte aber auch damit zusammenhängen, dass alles eine unterschiedliche Höhe hat.


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 2 - 16.12.2009 um 22:31 Uhr
Nimm mal das padding aus dem body css raus, wenn ich mich nicht irre, wirds sonst so gerechnet: 10px+204px+600px+201px+10px macht eine contentbreite von:1025px, dadurch passt das ganze natürlich nicht mehr in Deinen #container. Das ist css (Cascading Style Sheets) also werden Eigenschaften (in Deinem Fall das Body padding) solange vererbt, bis es unterbunden wird. Du kannst auch versuchen, in #Container padding: 0px; unterzubringen. Korrigiert mich, wenn ich falsch liege, auf diese Art habe ich ein Tabellenlayout vollständig auf <div> umgestellt.

(siehe link...


------------------
--- CLANSPHERE ---
Professional clan care starts here
Inaktiv
|
Beckz
Thread-Ersteller


Rock the board




Beiträge: 62
 # Antwort: 3 - 16.12.2009 um 22:57 Uhr
Schönen Dank für eure Antworten!

@fUnK3r: Nachdem ich allen 3 Divs das float left zugewiesen habe, hat es funktioniert! Hmtz komisch, ich hätte Stein auf Bein schwören können das ich das schon ausprobiert hatte. Auf jeden fall vielen Dank für deine Lösung!! Lass das Thema aber bitte noch auf Wie du richtig erkannt hast hat der header eine andere höhe. Das hat den Grund das da noch ein Div zwischen soll ... könnte sein das ich da noch Probleme bekomme. Mag aber erst selber versuchen auf die Lösung zu kommen.


@SlayR:
Das mit dem vereerben vom Body hatte ich auch erst im Sinn. Aber ich meine hier mal gelesen zu haben das, das Clearfix sich ähnlich wie Clear verhält. Sprich, es hebt die vereerbung auf. Das ist aber nur gefährliges Halbwissen von mir da ich mich erstmal wieder in HTML und CSS reinfuxen muss.

Aber dir natürlich auch vielen dank für deine Mühe!


Zuletzt editiert von Beckz am 16.12.2009 um 22:58 Uhr (2x Editiert)
Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 4 - 16.12.2009 um 23:30 Uhr
Bitte schön so als tip am rande... Ich bin ziemlich oft über die "cleared floats" gestolpert, jeder browser interpretiert css anders, deshalb orientiere ich mich gern am absoluten minimum der css sätze. Es hat sich z.B. bewährt, dem Body margin und padding 0px mitzugeben, denn die eingebauten css tabellen der browser sind schon ziemlich unterschiedlich, jaja, das leidige IE vs. FF Problem...


------------------
--- CLANSPHERE ---
Professional clan care starts here
Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 5 - 17.12.2009 um 12:11 Uhr
Der Fehler lag eigentlich nur am Head, weil dem kein float zugewiesen wurde.

Das float:left; heißt ja, dass das Element links "umflossen" wird. Wenn der Head jetzt aber kein float besitzt, kann es auch nicht umflossen werden.

So viel zur Theorie
Die Praxis sieht manchmal auch anders aus =)


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 6 - 17.12.2009 um 12:31 Uhr
^^volle Zustimmung. Gut, float kann man sich auch so vorstellen das das div am gegenüberliegenden ende von float hochgeschoben und dann in float-Richtung gedrückt wird. Float left würde also heißen, das div wird am rechten rand (Page oder container) hochgerückt, wenn es nicht mehr höher geht, nach links geschoben bis es nicht mehr weitergeht. fUnK3r, hast natürlich recht, wenn man floated muss man schon ALLE den float betreffenden Elemente einbeziehen. Ich hatte schlicht das fehlende float im #head überlesen...


------------------
--- CLANSPHERE ---
Professional clan care starts here


Zuletzt editiert von SlayR ClanSphere Team am 17.12.2009 um 12:32 Uhr (1x Editiert)
Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 7 - 17.12.2009 um 12:43 Uhr
Jop, hat ein bisschen was von Tetris

@Beckz
mach am besten in dein #container nochmals drei weitere solche "Container"
den ersten machst du 204px breit,
den zweiten 600px
und den dritten 201px.
Gib ihnen keine Höhe aber floate sie ganz normal.
Damit hast du dann drei Spalten. In diese Container packst du dann jeweils die ganzen Sachen rein.
Dann hast du keine Probleme mehr mit unterschiedlichen Höhen und ein dreispaltiges Template


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
Beckz
Thread-Ersteller


Rock the board




Beiträge: 62
 # Antwort: 8 - 17.12.2009 um 22:03 Uhr
Sooooo....

Also, die Idee mit den Containern hatte ich auch heute Morgen, da ich sowieso ein drei Spaltiges Design habe. Das Design steht nun und mache mich jetzt daran die ganzen Texte zu formatieren.
Meine Frage wäre damit also beantwortet

Ich weiß nicht, vllt könnt ihr das Thema ja trotzdem auflassen. Ich könnte mir sehr gut vorstellen, das es dazu nochmal Fragen geben wird, wenn man bedenkt was alleine Google schon zu dem Thema ausspuckt. Bin mir sogar fast sicher, das die Frage schonmal hier im Forum aufgetaucht ist, auch wenn ich nichts dazu gefunden hatte.

Ich für mein teil hoffe, das ich nun keine Fragen mehr zum Thema CSS habe (viel gelernt in diesem Fred ) .... und werd mal zusehen ob ich nicht dem ein oder anderem hier im PS und C4D Forum weiter helfen kann.

beste Grüße
Beckz


Inaktiv
|
Antworten: 8
Seite [1]


Sie müssen sich registrieren, um zu antworten.