• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Objekte anordnen

D

donelpasso

Neues Mitglied
Hallo
Ich möchte 3 objekte in einer Reihe anordnen aber nicht direkt nebeneinander sondern Objekt a soll ganz links angeordnet werden, b im Zenter und c ganz rechts. Wie lautet der Code dafür?
Danke im Voraus
 
Bitte:
HTML: 
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=UTF-8>
        <meta name="description" content="Layout mit 3 Divs">
        <title>Layout mit 3 Divs</title>
        <style type="text/css"> 
        body {font-size:80%; font-family:"Arial", verdana, sans-serif; color:black; background:moccasin; word-wrap:break-word;} #header {background:burlywood;} 
        #objekt1 {float:left; width:20%; background:lightsalmon;} 
        #objekt2 {float:left; width:60%; background:blanchedalmond;} 
        #objekt3 {float:right; width:20%; background:lightsalmon;} 
        #objekt1, #objekt2, #objekt3 {padding-bottom:32767px; margin-bottom:-32767px;} 
        #wrapper {overflow:hidden; background:#c0c0c0;} 
        #footer {clear:both; bottom:0; background:burlywood;} 
        h1 {font-size:1.5em; margin:0; padding:10px 0; color:#fff;} 
        h2 {font-size:1.3em; margin:0; padding:10px 0;} 
        .content {padding:10px;} p {font-size:1em; line-height:1.3em; margin:0; padding:5px 0;} 
        </style>
    </head>
    <body>
        <div id="header">
            <div class="content"><h1>Layout in Prozent</h1>
                <p>Auch wenn man den Browser kleiner macht bleiben die Grössenverhältnisse erhalten.
                </p>
            </div>
        </div>
        <div id="wrapper">
            <div id="objekt1">
                <div class="content"><h2>Links 20%</h2>
                    <p>Objekt 1 ist ein Div mit 20% und wird mit float:left nach links geschoben
                    </p>
                </div>
            </div>
            <div id="objekt2">
                <div class="content"><h2>Mitte 60%</h2>
                    <p>Objekt 2 ist ein Div mit 20% und wird mit float:left in die Mitte geschoben
                    </p>
                    <p>Funktioniert in IE7, >IE8, Firefox, Opera, Safari(PC) und Chrome.
                    </p>
                </div>
            </div>
            <div id="objekt3">
                <div class="content"><h2>Rechts 20%</h2>
                    <p>Objekt 3 ist ein Div mit 20% und wird mit float:rightt nach links geschoben
                    </p>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="content">
                <p>Fussbereich wird mit float:clear wieder aus Fluss genommen
                </p>
            </div>
        </div>
    </body>
</html>
 
So viel Code für so eine Kleinigkeit? Ich hab da ehrlich gesagt keinen Überblick. Muss das <!DOCTYPE HTML> <html> <body> meta unbedignt sein? Könnte jemand evtl. die Objekte in den Code einfügen? Ich weis nicht wo genau die Objekte reinkommen.

Objekt 1 ist:
<?php previous_post_link_plus( array( 'format' => '%link','in_same_cat' => 'true',
'link' => '<img src="http://imbarofl.com/prev.png" />'
) );?>
Zum Vergrößern anklicken....

Objekt 2:
<?php the_title(); ?>
Zum Vergrößern anklicken....

Objekt 3:
<?php next_post_link_plus( array( 'format' => '%link','in_same_cat' => 'true',
'link' => '<img src="http://imbarofl.com/next.png" />'
) );?>
Zum Vergrößern anklicken....

Danke
 
Der dringenede Rat:
Bevor du anfängst in PHP-Code rumzuwühlen, denn um solchen handelt es sich in deinem Fall, solltest du erst mal die Grundlagen von HTML/CSS begreifen lernen.
Wenn du die könntest, hättest du bemerkt, dass Wustersoss dir auf deine viel zu allgemeine Frage ein sehr ausführliches Codebeispiel geliefert hat!

Um es kurz zu machen:
Das linke und das rechte Element (deine Objekte 1 und 3) müssen jeweils links und rechts gefloatet werden.
Das betrifft aber nicht deinen gesamten gezeigten Code, sondern nur den HTML-teil!!!
Also die <img ... />
Diese ergänzt du durch ein Style-Attribut mit dem nötigen CSS-Code:
HTML: 
style="float:left;"
bzw.
HTML: 
style="float:right;"

Dein Objekt 2 ist kein Objekt, sondern eine PHP-Funktion.
Diese beinhaltet offenbar die Informationen, wie genau deine Titelzeile angezeigt werden soll.
Lass diese erst mal unangetastet und meld dich noch mal, wenn es zu ungewünschten Nebeneffekten kommt...und bitte dieses mal mit ausreichenden Informationen! :-?

Reihenfolge des Codes, damit das auch funktioniert:
Objeht 1 (linkes Bild)
Objekt 3 (rechtes Bild)
Objekt 2 (dazwischen liegende Ausgabe der PHP-Funktion)
 
Die PHP Codes hab ich alle geschrieben und die funktionieren auch alle ich kenn mich mit PHP nämlich besser als mit HTML aus xD wenn ich zb um Objekt 2 <center></center> pack dann wirds auch zentriert. Ich weis schon was ich mache ich brauch nur die Codes wie die in Reihe geordnet werden und wie gesagt 1 nach links 2 mitte 3 rechts. Dass es was mit float zutun hat ahnte ich schon aber wie wo setze ich den genau hin? Hier kann man sehen wozu ich das brauche: 2 Cats 1 Cup | Funny Videos Diese 3 Objekte sind die 2 Navigationspfeile und der Titel den ich zwischen den Pfeilen haben will.
Danke
 
donelpasso schrieb:
...wenn ich zb um Objekt 2 <center></center> pack dann wirds auch zentriert. Ich weis schon was ich mache...
Zum Vergrößern anklicken....
Offenbar nicht. Der <center>-Tag ist veraltet und sollte nicht mehr benutzt werden.
In diesem Fall ist es auch völlig unnötig, da das Umfließende Element automatisch in die Mitte rückt.
Es könnte nur nötig sein, äußere Abstände zu bestimmen.
Abstände: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

donelpasso schrieb:
...aber wie wo setze ich den genau hin?
Zum Vergrößern anklicken....
Das habe ich dir bereits beantwortet!
Hier mehr Informationen dazu: float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
 
Hat sich erledigt hab ich bei dem Link gesehen xD Hab nur noch 2 Fragen: Wie kriege ich jetzt das <?php the_title(); ?> genau dazwischen zentriert? Und wie kriege ich den Titel in grössere Schrift? Wenn ich <H6></H6> herum schreibe wirds nur fett?
Danke
 
donelpasso schrieb:
Hallo
Ich möchte 3 objekte in einer Reihe anordnen aber nicht direkt nebeneinander sondern Objekt a soll ganz links angeordnet werden, b im Zenter und c ganz rechts. Wie lautet der Code dafür?
Danke im Voraus
Zum Vergrößern anklicken....

Ohne den Thread jetzt gelesen zu haben (tl;dr):

Das ist eigentlich eine ganz einfache Aufgabe. Man erstelle drei Divs mit der selben Breite. Ganz normal untereinander, ohne zu floaten. Im ersten Div ordnet man das Element links an, im zweiten mittig (margin:auto) und im dritten rechts. Anschließend schiebt man die Divs mit position:relative übereinander.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben