Ergebnis 1 bis 4 von 4

Thema: Div Inhalte mehrfach zentrieren

  1. #1
    HTML Newbie
    Registriert seit
    25.03.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div Inhalte mehrfach zentrieren

    Hallo zusammen!

    Ich ärgere mich schon seit gestern mit einem Problem rum, welches schon mehrfach besprochen wurde, wo die Lösungen mir leider nicht helfen...
    Ich möchte auf einer Seite eine (zentrierte) Box anzeigen, in der wiederum ein Bild und ein Text nebeneinander (zusammen jedohc zentriert angezeigt werden sollen). Irgendwie habe ich das Gefühl, dass sich bei meinen Versuchen irgendwelche Eigenschaften überschnitten haben oder ich zu viel von meinen div Bereichen erwartet habe

    Hier der Teil des Codes den ich testweise bearbeite:

    PHP-Code:

    <div id="outerbox">
    <
    div id="innerbox">
    <
    img src="http://politik.stugen.uni-bremen.de/wp-content/uploads/2013/06/3715158_m3mst1w564h376q75v42315_RN-Sonne-A41.jpg" id="img" />
    <
    class="text1"style="font-family: Arial">Mein Text</p>
    </
    div>
    </
    div
    und hier die dazugehörigen CSS Zeilen:

    PHP-Code:

    #outerbox{    
    background-colorwhite;
    height100px;
    width350px;
    marginauto;

    }
    #innerbox{
    displayinline-block;
    background-colorblue;    }

    #img {float: left;
    height60px;
    width60px;     
    background-coloryellow;

    }

    .
    text1 {
    background-colorgreen;     
    floatleft;     
    font-size30px;    } 
    hat jemand nun einen Tipp wie ich am besten

    1. "innerbox" innerhalb von "outerbox" zentriere ?
    2. das Bild mit dem nebenstehenden Text innerhalb von "innerbox" zentriere?

    Ich nehme gerne Links zu passenden Artikeln/Beiträgen an, die mir hier weiterhelfen könnten

    Viele Grüße

    htmler
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Div Inhalte mehrfach zentrieren

    Du brauchst keine 2 DIVs, ein Div reicht und das zentriert du mit CSS margin:0 auto;
    Auf Inlinestyles solltest du komplett verzichten.
    Ein IMG Element braucht immer ein Alt Attribut.
    Dein Sonnenbild solltest du mit einem Bildbearbeitungsprogramm verkleinern, es ist viel zu gross.

    Alles in allem kann man das so lösen:

    HTML
    HTML-Code:
    <body>
        <div id="outerbox">
            <img src="http://politik.stugen.uni-bremen.de/wp-content/uploads/2013/06/3715158_m3mst1w564h376q75v42315_RN-Sonne-A41.jpg" alt="Bild einer Sonne">
            <p>Mein Text</p>
        </div>  
    </body>
    CSS
    Code:
    #outerbox {
        background-color: blue;
        height: 100px;
        width: 350px;
        margin: 0 auto;
    }
    #outerbox img {
        float: left;
        height: 60px;
        width: 60px;
        background-color: yellow;
    }
    #outerbox p {      
        font-family: Arial, san-serif;
        background-color: #008000;
        font-size: 30px;
        margin: 0;
    }
    sauber strukturiert und im CSS findet man sich besser zurecht.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    25.03.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div Inhalte mehrfach zentrieren

    Danke für deine Antwort explanator!

    Habe das mal kurzerhand eingefügt und nun habe ich zwar die outerbox zentriert, jedoch nicht den Inhalt. Ich möchte, dass sich das Bild und die Schrift in der outerbox zusätzlich zentrieren. Hast du vielleicht noch einen Rat wie ich das umsetzen kann?

    - - - Aktualisiert - - -

    ich habe ja auch deswegen eine zusätzliche div Box erstellt, in die ich mein Bild und meinen Text eingefügt habe, um anschließend die zusätzliche Box mit dem Inhalt zu zentrieren

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Div Inhalte mehrfach zentrieren

    Zitat Zitat von htmler Beitrag anzeigen
    ich habe ja auch deswegen eine zusätzliche div Box erstellt, in die ich mein Bild und meinen Text eingefügt habe, um anschließend die zusätzliche Box mit dem Inhalt zu zentrieren
    Das brauchst du nicht. du kannst noch tausend boxen drumherum machen, und wirst dein Ziel nicht erreichen. du solltest dich besser mit den Grundlagen von textelementen auseinandersetzen insbesondere text-align, display: inline und display:inline-block sowie Line-height.
    ein Diiv ist immer ein Blockelement, eine P ebenso und ein IMG ist ein Inline-Block.

    Solange du diese Zusammenhänge nicht verstehst wird das nie etwas.

Ähnliche Themen

  1. Mehrfach HTML Dateien Generator
    Von Zpike im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 02.01.2014, 18:08
  2. User mehrfach benutzen
    Von Gast123 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 30.09.2007, 17:42
  3. php_include auch mehrfach?
    Von Raiden im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 13.08.2006, 14:07
  4. Mehrfach-Listbox auslesen
    Von Günter im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 29.08.2004, 15:53
  5. mehrfach verkleinerung
    Von wernerdeluxe im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 7
    Letzter Beitrag: 22.08.2004, 13:32

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •