Zur Navigation

Runde Ecken mit Div und Bildern [3]

21 Jörg Kruse

Die Lücke wird anscheinend durch #edge_right verursacht - wenn du das div entfernst, verschwindet auch die Lücke

30.03.2006 16:38

22 Sam (Gast)

Ja, aber dieses Div brauche ich. Sonst habe ich keine runde Ecke am rechten Rand.

30.03.2006 17:53

23 Jörg Kruse

Es scheint so, dass der IE das div #edge_right auf eine bestimmte Mindesthöhe ausdehnt, wenn height und float definiert sind - warum er das tut - keine Ahnung :/

Möglicher Workaround:

Wenn du das div mit einem geschützten Leerzeichen füllst:

<div id="edge_right">&nbsp;</div>

Dann kannst du die Höhe auch über line-height erreichen:

#edge_right{
line-height:6px;
background: url(bilder/edge_right.gif) no-repeat;
margin-top:-1px;
}

Dann zeigt der IE das div tatsächlich nur in einer Höhe von 6px an. Das Hintergrundbild müsste dann die gesamte Breite einnehmen, so dass du auch auf float verzichten kannst

30.03.2006 23:35 | geändert: 30.03.2006 23:37

24 Chris (Gast)

Hi, sorry dass ich das Thema nocheinmal aufgreife, aber gibt es auch eine möglichkeit .PNG Grefiken anstelle der GIFs zu verwenden?

Das Problem ergibt sich an den Ecken, da tritt der repeat durch.

(btw. Thanks an den Author dieses Themas, dass die dateien noch onilne sind, helfen mir sehr weiter, please up lassen)


Beste Grüße,
Chris

19.02.2007 05:37

25 Chris (Gast)

Und mein anders Problem ist,
dass wenn ich innerhalb meines main content bereichtes vom container in html attribut wie z.B. <p> oder Formular-Attribute benutze entsteht eine Spalte, manchmal nur oben, manchmal nur unten oder wie im Beispiel unten und oben.

Beispiel:
http://chrisssss.ch.funpic.de/cms/login/images/container/container.htm

Wär klasse wenn mir da jemand weiterhelfen könnte

Beste Grüße
Chris

19.02.2007 09:22

26 Jörg Kruse

Hallo Chris,

wenn ich innerhalb meines main content bereichtes vom container in html attribut wie z.B. <p> oder Formular-Attribute benutze entsteht eine Spalte, manchmal nur oben, manchmal nur unten oder wie im Beispiel unten und oben.

Das ist der Außenrand (margin) von p. Diesen kannst du in CSS durch margin:0; beseitigen:

#content p {
margin:0;
}

19.02.2007 09:54 | geändert: 19.02.2007 09:54

27 Chris (Gast)

Wow, thank you so much.

Aber muss ich das jetzt für jeden html tag einzeln machen, den ich verwende, also

#container_main p{
margin: 0;
}
#container_main h1{
margin: 0;
}
#container_main h2{
margin: 0;
}
...
?

Und wie siehts aus mit png graphiken? da überlagert sich alles.

Schöne Grüße und einen frohen Rosenmontag,
Chris

19.02.2007 17:58

28 Jörg Kruse

Du kannst das auch so zusammenfassen:

#container_main p, h1, h2 {
margin: 0;
}

... und so gilt das für alle Elemente innerhalb von #container:

#container_main * {
margin: 0;
}

Und wie siehts aus mit png graphiken? da überlagert sich alles.

Was meinst du mit Überlagerungen - kannst du hierzu eine Beispielseite verlinken?

19.02.2007 18:10

30 Jörg Kruse

Hallo Chris,

corner_lt.png und corner_rt.png sind transparent, so dass side_t.png hintrer den Ecken sichtbar ist - die nicht-transparenten jpg corner_lt.jpg und corner_rt.jpg verdecken dagegen vollständig side_t.jpg. Wenn du die PNGs wie die JPGs mit einem dunklen statt transparenten Hintergrund erstellst, sollte das Problem behoben sein

19.02.2007 20:36