zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container untereinander mit position

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.09.2017, 09:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2017
Beiträge: 5
halloICKEbins befindet sich auf einem aufstrebenden Ast
Standard Container untereinander mit position

Morgen,

ich habe das Problem, dass ich die beiden Container (id1, id2) nicht untereinander bekomme bzw. nicht richtig dargestellt werden!

PHP-Code:
            echo "<div id='id1' style='position:relative;'>";

                echo 
"<span style='width:730px; height: 30px; top: 10px; left: 100px; z-index:1; position:absolute;'>";
                    echo 
"HEADLINE1";
                echo 
"</span>"

                echo 
"<div style='z-index:0; position: absolute;'>";
                    echo 
"<img src='images/bild2.png'>";
                echo 
"</div>"

                echo 
"<div style='position:absolute; top: 50px; left: 50px; z-index:1;'>";
                    echo 
"<img style='width: 45px; height: 30px; opacity: 0.5;' src='images/bild21.png'>";
                echo 
"</div>"
    
            echo 
"</div>"

        
            
            echo 
"<div id='id2' style='position: relative;'>";

                echo 
"<span style='width:730px; height: 30px; top: 10px; left: 100px; z-index:1; position:absolute;'>";
                    echo 
"HEADLINE2";
                echo 
"</span>"

                echo 
"<div style='z-index:0; position:absolute;'>";
                    echo 
"<img src='images/bild2.png'>";
                echo 
"</div>"

                echo 
"<div style='position:absolute; top: 50px; left: 50px; z-index:1;'>";
                    echo 
"<img style='width: 45px; height: 30px; opacity: 0.5;' src='bild22.png'>";
                echo 
"</div>"

            echo 
"</div>"
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.09.2017, 09:54
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von halloICKEbins Beitrag anzeigen
ich habe das Problem, dass ich die beiden Container (id1, id2) nicht untereinander bekomme bzw. nicht richtig dargestellt werden!
"Nicht richtig" ist keine hilfreiche Fehlerbeschreibung und für ein Problem mit HTML/CSS ist der PHP Code völlig unrelevant. Sinnvoller wäre ein Code der sichtbar macht was dein Problem ist und ein etwas genauere Beschreibung was du erreichen möchtest.

Was auffällt ist, dass dein HTML unsemantisch ist, d.h. du produzierst eine DIV Suppe. für Überschriften gibt es Elemente (H1-H6) und die DIV Elemente um die Bilder sind unnötig.

Mit der absoluten Positionierung solltest du zurück haltender sein, es ist nicht erkennbar warum die Elemente an der Stelle absolut positioniert sind.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.09.2017, 10:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Um protonenbeschleunigers Antwort auszuführen, verwende folgenden Aufbau für ein sinnvolles HTML:

Code:
<div>
<h2> Überschrift </h2>
<img>
<img> 
</div>
Mehr ist nicht nötig. Verzichtest du auch noch auf position:absolute sind die Container automatisch untereinander angeordnet.

Um es kurz zusammenzufassen: Lösche 90% vom obigen Code, dann bist du auf einem guten Weg.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.09.2017, 11:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2017
Beiträge: 5
halloICKEbins befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht habe ich mich nicht klar ausgedrückt..aber wenn ich die positions weglasse legt er mir bild11.png unter (im Textfluss) bild1.png... es soll aber auf der grafik liegen

Zu den HEADLINES... dies ist einfach nur ein Text der auf der Grafik liegt ... habe die konkreten Werte zu Vereinfachung weggelassen
Mit Zitat antworten
  #5 (permalink)  
Alt 21.09.2017, 11:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Nochmal zur verdeutlichung: Wir wissen nicht genau, was du erreichen willst. Wir kennen deine Bilder nicht und wissen auch nicht, wie es im Endeffekt aussehen soll.

Damit wir dir helfen können brauchen wir ein Beispiel (KEIN PHP) mit HTML & CSS, welches wir einfach bei zB jsfiddle.net einfügen können.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.09.2017, 11:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2017
Beiträge: 5
halloICKEbins befindet sich auf einem aufstrebenden Ast
Standard

Code:
<div id='id1' style='position:relative;'>";
   <span style='width:230px; height: 30px; top: 10px; left: 100px; z-index:1; position:absolute;'> Grafik1 </span>
   <div style='z-index:0; position: absolute;'> <img src='grosseGrafik1(400x400).png> </div>
   <div style='position:absolute; top: 50px; left: 50px; z-index:1;'> <img style='width: 45px; height: 30px; opacity: 0.5;' src='kleinebild(45x30).png'> </div> 
    
</div>

<div id='id2' style='position:relative;'>";
   <span style='width:230px; height: 30px; top: 10px; left: 100px; z-index:1; position:absolute;'> Grafik2 </span>
   <div style='z-index:0; position: absolute;'> <img src='grosseGrafik2(400x400).png> </div>
   <div style='position:absolute; top: 50px; left: 50px; z-index:1;'> <img style='width: 45px; height: 30px; opacity: 0.5;' src='kleinebild(45x30).png'> </div> 
    
</div>";
Erläuterung:
- Auf der grossen Grafik soll eine kleine Grafik eingeblendet werden im Vordergrund ... dies funktioniert

- Was nicht funktioniert, dass der Cointainer id2 unterhalb des Container id1 angezeigt wird ... Container id2 verschwindet unter id1
Mit Zitat antworten
  #7 (permalink)  
Alt 21.09.2017, 11:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Mit position:absolute nimmst du Elemente aus dem Dokumentenfluss. Du verwendest absolute bei allen 3 unterelementen. Verwende es nur bei den Elementen, die es auch wirklich brauchen (wie dem 2. Bild) Das "große" Bild braucht eigentlich kein position:absolute, das soll ja dort sehen wo es schon steht.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Menueleiste anpassen Mulo CSS 1 04.02.2015 11:08
Anfängerfrage: Zentrierung in Galerie und Border-Problem goldbeere CSS 3 04.11.2013 20:07
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 15:43
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:43 Uhr.