nicht angemeldet
divs positionieren ohne zwischenabstand
hallo Leute , ich komme einfach nicht mehr weiter beim Css positionieren:
zwischen den divs ist im Ie immer ein abstand und der Netscape Browser macht was ganz anderes..dabei soll es so aussehen wie im Opera.Wer weiß Rat?
http://www.paritaet-hd.de/contenido/cms/front_content.php?idcat=4
css:
body{background-color:#F2F2FB;text-align: center;}
/*rahmen*/
.rahmen{ text-align: left; width: 700px;margin: 0 auto 0 auto;border: 1px solid red;
background-color:yellow;height: 100%;}
/* logo*/
.a{float:left; }
/* blauer kasten*/
.b{float:left;width:35px;height:96px;background-color:#181EA5;border-style:solid;border-width:1px;border-color:red;}
/*personen*/
.c{float:left;}
/*roter kasten*/
.d{position:relative;background-color:#F51D30;width:180px;height:35px;float:left;}
/*Blauer kasten */
.e{position:relative;background-color:#181EA5;width:514px;height:35px; border-style:solid; border-width:1px; border-color:red;}
/*servicenavigation*/
.f{left:40px;position:relative;padding-top:5;}
Danke Jürgen
-
Servus Jürgen,
hast Du es schon mal mit position: absolute; in der jeweiligen CSS Klasse porbiert?? Ist zwar erst mal mehr Aufwand, aber...
Außerdem haben der IE und der Netscape eh ein Problem, weil der IE das Dokument als Nullpunkt sieht und der Netscape das Fenster selbst (oder anders rum, weiss es nicht mehr genau).
Ich habe meine Bilder immer mit einer absoluten Positionsangabe festgelegt. Wenn das bei Dir nicht geht, musst Du mit JavaScript die Definitionen dynamisch gestalten:
BSP:
.button1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
position: absolute;
left: 305px; //Diese Angabe mit Javascript dynamisch zuweisen
top: 42px; //Siehe "left"
}Vielleicht hilft das mal weiter.
Viele Grüße
Wolfgang
-
Servus Wolfgang,
doch mit absoluten einheiten geht es ,aber dann ist das content feld nicht mehr mittig im browser je nach größe, geht das den nicht ohne javascript? Jürgen
-
-
Hallo Jürgen,
hallo Leute , ich komme einfach nicht mehr weiter beim Css positionieren:
das glaub' ich dir gerne...! So viele Klassen, alles relativ, vor allem relativ wenig Inhalt z.B.
<!--blauer kasten-->
<div class="b">
</div>zwischen den divs ist im Ie immer ein abstand
IE-bug -> siehe http://positioniseverything.net/explorer/threepxtest.html
und der Netscape Browser macht was ganz anderes..
meistens das Richtige...
dabei soll es so aussehen wie im Opera.
sicher? mit dem Abstand des Inhalts zum Rahmen rechts außen (in OP 7.23)?
Wer weiß Rat?
Ein gutes CSS Tutorial?
Ich habe mir deinen Quelltext und deine CSS Datei mal angeguckt, bin mir aber ehrlich nicht ganz im klaren darüber, wie es nun eigentlich aussehen soll.
Allerdings finde ich deinen Ansatz schon viel zu aufwendig & kompliziert.
Lass' die Elemente doch im 'normalen Fluß', verwende 'float' nur da, wo es wirklich gebraucht wird (es gibt ja z.B. auch noch die 'display:inline' Eigenschaft, sowie 'margin' und 'padding'). Frei nach dem Motto: "weniger ist Mehr!".Zu beachten sind natürlich auch noch solche Dinge wie:
- Doctype-Switch (speziell im Bezug auf den Box-Modell Bug)
- Browser-Bugs (wovon die versch. IE Versionen ja bekanntlich am meisten zu bieten haben)
- fehlende Unterstützung einiger CSS Eigenschaften in gewissen Browsern
- etc.
Ferner würde ich dir raten, ruhig auch mal #ID's an Stelle von .Klassen zu verwenden. Und wenn Klassen, dann richtig, oder meinst du hier bspw.
h1.h1{font-family: arial, geneva, sans-serif; font-size:1.2em; color:#000000; }
wirklich nur die Überschriften 1. Ordnung, die der Klasse 'h1' angehören?
Auch mit der jeweiligen Namensvergabe ist das so eine Sache.Das ist alles nicht böse gemeint, nur solltest du vielleicht noch mal einige fertige Layouts studieren und anschließend über einen neuen Ansatz nachdenken.
Ein paar gibt's u.a. hier:
http://webhost.bridgew.edu/etribou/layouts/
http://css-discuss.incutio.com/?page=TwoColumnLayouts
http://css-discuss.incutio.com/?page=ThreeColumnLayoutsGruß Gunther