DIV Container im Header positionieren

    Moin,

    ich arbeite zurzeit an meinem Internetauftritt lokal mit XAMPP.
    Als Wordpress Theme habe ich mich für Pilcrow entschieden.

    Leider habe ich ein Problem mit meiner DIV/Text-Positionierung. Jedes mal, wenn ich einen Container einfüge verschiebt sicht der rest des Layouts ODER der DIV-Container bewegt sich unabhängig zum rest, wenn ich die Seite verkleiner im Browser bleibt der container sturr auf seinem platz.

    Ich habe ein Bild gemacht wie ich mir das dachte:
    http://www.bilder-space.de/show_img.php?i…g&size=original

    Hier ein Link zur Seite (nur ein teil, da Lokal)..
    http://xmimox.bplaced.de/wordpress/

    Ich denke ich füge den Container immer an der falschen Stelle ein, ich bin mittlerweile etwas verwirrt.

    Gruß Moritz

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von alchymyth

    allgemein:
    ...
    welche div wo im code?

    kannst du ein beipiel posten?

    Hi,
    da ich den DIV nicht positionieren, deshalb habe ich ein Bild eingefüht (erster link) wo der div hin soll mit meinem Text.

    Als DIV Code dachte ich an:

    PHP
    <div id="Layer1" style="position:absolute; width:200px; height:100px; z-index:1; background-color: #0099CC; border: 1px solid #000000">Lorem Ipsum </div>

    Ich habe versucht den Code in die ID PIC zu packen, aber wo auch immer ich es versucht habe klappt es leider nicht.

    Ich hoffe jetzt ist es etwas klarer.


    Gruß Moritz

    der bilderupload-link ist im moment nicht funktionsfaehig; aber mit dem code und der info, in welche div der code rein soll, geht's weiter:

    Zitat


    An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

    http://www.w3schools.com/css/css_positioning.asp

    d.h.: um ein element absolut in relation zu einem anderen element zu positionieren muss das umgebende element zB mit 'position: relative;' formattiert sein; in deinem fall, versuch:

    Code
    #pic { position: relative; }


    und

    Code
    #Layer1 { 
position:absolute; 
width:200px; 
height:100px; 
z-index:1; 
background-color: #0099CC; 
border: 1px solid #000000; 
top:20px; 
left: 50px; }


    (zahlenwerte anpassen)

    ahh super es klappt !

    PHP
    <div id="Layer1" style="color:#fff; font-size:20px; position:absolute; margin: 90pt 0 0 10pt; width:180px; height:100px; background-color: #9A802D;  border: 1px solid #000000">  <p style="line-height:1.3em; margin:0.5em 0.5em 1em 1em">  Lorem<br> Ipsum  <br>text</p>  
</div>

    Jedoch nutze ich padding und margin und nicht " top:20px; left: 50px; ".

    Macht man eigentlich noch breaks ? <br> oder nimmt man stattdessen css befehle wie <p> .. ?

    Danke

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden