1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Deutsch
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

CSS: <div> Ausrichtung mit CSS; margin Problem

  • Fugo
  • 21. Juni 2006 um 01:02
  • Unerledigt
  • Fugo
    15
    Fugo
    Mitglied
    Punkte
    2.420
    Beiträge
    366
    • 21. Juni 2006 um 01:02
    • #1

    Hi @ll!

    Ich weiß dass das ein Problem ist, dass oft angesprochen wird. Nun such' ich selbst grade eine Lösung für eine Ausrichtung von divs mittels css.

    Ich möchte gerne eine Seite bauen, die aus vier <div> Bereichen besteht, wobei das ganze [zumindest horizontal] zentriert sein soll.

    Hier der link zu meinem kleinen Experiment:
    http://www.unet.univie.ac.at/~a0526379/php/hp_klaus/index.php

    Der Internet Explorer zeigt mir die Seite so an, wie ich sie gerne hätte... im Firefox, den ich nutze, verschiebt sich durch's margin das ganze leider. Wie bekomm ich's hin, dass es im Firefox und anderen Browsern gleich aussieht wie im IE. Kann doch nicht so schwer sein, bei ein paar divs...

    - div_main [schwarz] dient als Hülle und zum zentrieren des ganzen sowie ausrichten der Tochter-divs. Bei korrekter Formatierung sollte vom SCHWARZ eigentlich nix mehr zu sehen sein.

    -div_01 [rot] soll später eine Grafik enthalten
    -div_02 [grün] soll später das Menü enthalten
    -div_03 [blau] soll später eine Hintergrundgrafik enthalten
    -div_content [grau] soll Text enthalten und an ensprechender Stelle über die Hintergrundgrafik gelegt werden

    Hoffe, es ist verständlich, was ich vorhabe.


    Zum Ansehen, meine format.css

    Code
    body {margin-top: 40px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#cccccc; text-align: center;}
    
    
    #div_main{ 
    margin: auto;
    width: 750px;
    height: 450px;
    background-color: #000000;
    }
    #div_01{ 
    width: 750px;
    height: 13px;
    background-color: #990000;
    }
    #div_02{ 
    width: 750px;
    height: 21px;
    background-color: #009900;
    }
    #div_03{ 
    width: 750px;
    height: 416px;
    background-color: #000099;
    text-align:left;
    }
    
    
    #div_inhalt{ 
    width: 510px;
    height: 388px;
    background-color: #999999;
    margin-left: 22px;
    margin-top: 17px;
    }
    Alles anzeigen


    und hier mein box-gerüst:

    Code
    <div id="div_main">
    <div id="div_01"></div>
    <div id="div_02"></div>
    <div id="div_03">
    <div id="div_inhalt"></div>
    </div>
    </div>

    Kann mir bitte dazu jemand ein Box-Modell mit korrekten Formatierungen für IE, FF und Co posten? Klingt ja eigentlich ganz einfach - is es für mich aber leider nicht :winking_face:

    thx im Voraus
    Fugo



  • seHaas
    11
    seHaas
    Mitglied
    Reaktionen
    3
    Punkte
    1.238
    Beiträge
    206
    • 21. Juni 2006 um 08:46
    • #2

    hallo,

    ich weiß zwar net warum aber wennst beim #div_inhalt bei den css sachen ein "position: absolute;" dazugibts schauts gleich aus.

    hab auch schon manchmal so komische fehler gehabt, meistens glaub ich warens tippfehler, weil wenn ich die ganze sache nochmal angegangen bin warens dann weg :winking_face:

    mfg seHaas

  • davewood
    17
    davewood
    Mitglied
    Reaktionen
    9
    Punkte
    3.204
    Beiträge
    536
    • 21. Juni 2006 um 09:42
    • #3

    bin a bissl zu faul deinen ganzen text zu lesen, aber horizontale zentrierungen werden normalerweise mit

    margin-left:auto;
    margin-right:auto;

    gemacht

    I like Toast!

  • Fugo
    15
    Fugo
    Mitglied
    Punkte
    2.420
    Beiträge
    366
    • 22. Juni 2006 um 13:07
    • #4

    Noch'n Problem

    Ich versuche grade, mir ein hovermenü zusammenzubasteln und dabei gerne auf JS verzichten... weil ich für die ganze Seite gerne ohne JS auskommen möchte. Als Alternative möcht ichs gerne mit css-formatierten links realisieren, in etwa so:

    Code
    #navi_01{ display:block; background-image:url(images/design_03.jpg); width:50px; height:17px }
    #navi_01:hover    { background-image:url(images/design_03_over.jpg); }


    Dazu hab ich dann eine Tabelle:

    Code
    <table border="0" cellpadding="0" cellspacing="0" height="17">
    <tr>
    <td><a href="index.php?section=news" id="navi_01"></a></td>
    </tr>
    </table>


    Leider krieg ich im IE immer noch um jede BildLink einen 1-Pixel dicken Rand - den ich einfach mit keiner Formatierung wegkrieg. Im Firefox hingegen ist dieser Rand wiederum nicht... komm da nicht recht weiter.

    Edit: Hmm... Anscheinend lässt sich auch dieses Problem durch ein position:absolute bereinigen... ob das so ganz korrekt ist :winking_face:



  • gerhardk
    3
    gerhardk
    Mitglied
    Punkte
    50
    Beiträge
    7
    • 22. Juni 2006 um 17:42
    • #5

    probier einmal
    "border:none;"
    weis nicht ob das so richtig ist...

    LG
    Gerhard

    NObody is Perfect :ausheck:

  • Fugo
    15
    Fugo
    Mitglied
    Punkte
    2.420
    Beiträge
    366
    • 22. Juni 2006 um 17:49
    • #6

    Habs jetzt gelöst, indem ich ein transparentes 1 Pixel Bild drüber gelegt hab... funktioniert einwandfrei - anders hab ichs einfach nicht hinbekommen - zumindest nicht fürn IE.



  • Maximilian Rupp 27. Dezember 2024 um 12:06

    Hat das Thema aus dem Forum Programmieren nach Entwicklung verschoben.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Rechtliches

Impressum

Datenschutzerklärung

  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  • Deutsch
  • English
Zitat speichern