kostenloser Webspace werbefrei: lima-city

div element auf webseite paltzieren mit css

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   my-free-farm

   my-free-farm hat kostenlosen Webspace.

   21:03, 26.7.2011

   hallo zusammen,
   
   ich habe das grundgerüst für eine webseite geschrieben (verfeinertes design und Grafiken kommen später), aber jetzt habe ich ein problem mit der positionirung des rechten menüs.
   
   http://my-free-farm.lima-city.de
   
   

   div.rechts{
           background-color: #007F00;
           width: 180px;
           float: right;
           margin-top: -1475px;
           margin-right: -40px;
       }

   
   
   ich hab es jetzt so gemacht das es im chrom gut aussieht, einfach mal mit mehreren browsern probieren und ihr seht die unterschiede
   
   achso ich bin bis sonntag im urlaub also nicht wundern wenn ich nicht antworten kann
   
   Beitrag zuletzt geändert: 26.7.2011 21:04:07 von my-free-farm

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m******************r

   21:51, 26.7.2011

   Hallo!
   
   Also bei mir funkitionierts in IE, FF und Chrome..
   Vielleicht kansnt du das Problem doch kurz beschreiben?
   
   Btw. ich versteh nicht ganz, warum du mit negativem margin arbeitest..
   Positionierung mittels top: bzw. left: sowie position: ist meiner Meinung nach zielführender..
   
   LG
4. Autor dieses Themas

   my-free-farm

   my-free-farm hat kostenlosen Webspace.

   22:21, 26.7.2011

   bei mir ist es beim ie8 weiter oben als beim chrome(ca. 40 pixel), beim firefox hab ich nicht getestet(habs auf meinem desktop pc geschrieben und die browservielfalt ist nur auf dem lepi)
   
   welche css anweisungen meinst du?
   
   ich hab schon mit vertical-align probiert, da ist das rechte menü ganz unten unter der fußzeile.

5. feedping

   feedping hat kostenlosen Webspace.

   14:52, 28.7.2011

   my-free-farm schrieb:
   ... einfach mal mit mehreren browsern probieren und ihr seht die unterschiede
   

   
   
   Hallo
   
   oft hilft es, wenn man bei den umgebenden (aüßeren) DIVs die margin und padding auf 0 setzt
   
   entweder alle CSS-Klassen einzeln, oder glaobal für alle Elemente mit *
   
   

   * { 
   margin:0px; padding:0px; border: 0px;
   }

   
   
   und dann jedem Element das Abstände haben soll, auch wieder welche zuweisen (Listen, etc.)
   
   PS: Deine Klasse li ist vom Namen her nicht so gut gewählt,
   bzw. Du kannst die Listen-Elemente direkt ansprechen
   
   .links li { }
   
   und nicht (wie bei Dir) mit eingeschobener .li CSS-Klasse ( ist sonst sehr verwirrend)
   
   .links .li li { }
   
   oder?

6. mthomsen

   mthomsen hat kostenlosen Webspace.

   12:56, 29.7.2011

   Hallo.
   
   Eine andere Möglichkeit wäre die linke und rechte Spalte mit position: absolute;
   
   Und zwar gibst du dem Textbereich in der mitte links und rechts einen rand (margin-left, margin-right) mit sovielen Pixeln wie du links und rechts für die zwei Spalten brauchst.
   
   

   div.mitte { 
   background-color: rgb(192, 192, 192);
   [b]margin-bottom: 20px;
   margin-left: 200px;[/b]
   margin-right: 200px;
   padding-bottom: 20px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 1px;
   width: 600px;

   
   
   Für die linke spalte dann:
   
   

   div.links { 
   [b]position: absolute;
   top: 0;
   left: 0;[/b]
   background-color: rgb(0, 127, 0);
   width: 180px;

   
   
   Und für die rechte Spalte dann:
   
   

   div.rechts { 
   [b]position: absolute;
   top: 0;
   right: 0;[/b]
   background-color: rgb(0, 127, 0);
   width: 180px;

   
   
   Mit den Pixelangaben noch ein bisschen spielen, bis alles an seinem richtigen Platz ist.
   Vorteil bei dieser Methode ist, dass der Textbereich in der mitte eine flexible Breite hat.
   
   Viel Spass beim ausprobieren.
   
   
7. Autor dieses Themas

   my-free-farm

   my-free-farm hat kostenlosen Webspace.

   18:28, 30.7.2011

   ich hab alles was geschriebenwurde außprobiert aber das klapt alles nicht

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?