zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box in einer anderen Box absolut positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2009, 21:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2009
Beiträge: 5
kmstario befindet sich auf einem aufstrebenden Ast
Standard Box in einer anderen Box absolut positionieren

Hallöchen,

ich hoffe ich trete nicht in Newbee Fettnäpfen, aber ich finde einfach keine passende Antwort.
Ich möchte innerhalb einer Content-Box eine zweite Box(Inbox) absolut positionieren.
Die Seite an sich soll aber Zentriert im Bildschirm ausrichten.

hier mal ne Grafik:


Die Inbox muss sich aber immer an oberster Position also im z-index 100; befinden,
sodass der Inhalt der Content-Box unter der Inbox bleibt.

Ich hoffe es ist verständlich,

Gruß Andreas

Geändert von kmstario (25.06.2009 um 21:28 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2009, 21:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Absolut positionierte Elemente orientieren sich immer am Elternelement, wenn dieses die Eigenschaft "position" ungleich "static" besitzt, ansonsten am nächsten Elternelement. Gibt es kein Elternelement mit dieser Eigenschaft, orientiert sich das absolut positionierte Element am Viewport, also dem Browserfenster. Folglich braucht deine Contentbox höchstwahrscheinlich nur position: relative;
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.06.2009, 21:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2009
Beiträge: 5
kmstario befindet sich auf einem aufstrebenden Ast
Standard

Hallöchen,

leider kann ich dir nicht ganz folgen. kannst du mir ein Beispiel zeigen?

hier mal mein Test:
CSS:
HTML-Code:
#wrapper {
width: 980px;
margin: 0 auto;
text-align: right;
}

#main_left {
background: #FFF;
float: left;
height: auto;
width: 190px;
margin: 0 auto;
padding: 10px 10px 10px 20px;
text-align: left;
}

#main_content {
background: #FFF;
border-right: 1px dotted #333;
border-left: 1px dotted #333;
float: left;
width: 790px;
margin: 0 auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
.articleText { 
	margin-bottom: 15px;
        padding:0 0 15px 0;
        color: #333333;
        line-height: 1.4em;
        text-align: left;
        border-bottom: 1px solid #eaeaea;
} 
.fotoright {
background: #FFF;
    float: right;
    margin: 1px 0px 5px 10px;
    padding: 5px 5px 5px 5px;
    border: 1px solid #eaeaea;
}
Html:

HTML-Code:
<div id="wrapper">

<div id="main_left">
main_left
</div>

<div id="main_content">
<div class="box_artikeltext">
<div class="fotoright">
<img src="4984099cf.jpg" border="0" width="150" height="87" alt="" title="" /></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
</div>

<div style="position:absolute; margin-left:350px; z-index:10; border:1px solid #888; background:#eaeaea;">text</div>
</div>
</div>

Geändert von kmstario (25.06.2009 um 22:13 Uhr) Grund: Habe noch was im Quelltext vergessen
Mit Zitat antworten
  #4 (permalink)  
Alt 25.06.2009, 22:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2009
Beiträge: 5
kmstario befindet sich auf einem aufstrebenden Ast
Standard

So weit bin ich schon:
CSS:
HTML-Code:
#wrapper {
width: 980px;
margin: 0 auto;
text-align: right;
}

#main_left {
background: #ccc;
float: left;
height: auto;
width: 190px;
margin: 0 auto;
padding: 10px 10px 10px 20px;
text-align: left;
}

#main_content {
background: #eee;
border-right: 1px dotted #333;
border-left: 1px dotted #333;
/* float: left; */
width: 790px;
margin: 0 auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
#main_inbox {
position:absolute;
margin-left:650px; 
width:150px;
height:150px;
z-index:10; 
border:1px solid #888; 
background:#eaeaea;"
}

.articleText { 
	margin-bottom: 15px;
        padding:0 0 15px 0;
        color: #333333;
        line-height: 1.4em;
        text-align: left;
        border-bottom: 1px solid #eaeaea;

} 
.fotoright {
background: #FFF;
    float: right;
    margin: 1px 0px 5px 10px;
    padding: 5px 5px 5px 5px;
    border: 1px solid #eaeaea;
}
HTML:
HTML-Code:
<div id="wrapper">

<div id="main_left">
main_left
</div>

<div id="main_content">
<div class="box_artikeltext">
<div class="fotoright">
<img src="4984099cf.jpg" border="0" width="150" height="87" alt="" title="" /></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
</div>

<div id="main_inbox">text</div>
</div>
</div>
jetzt bleibt die Inbox an Position, aber main_left und main_content überlappen sich jetzt.
Wie kann ich das bei der Situation verhindern?
Mit Zitat antworten
  #5 (permalink)  
Alt 25.06.2009, 22:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
Zitat von regloh
Folglich braucht deine Contentbox höchstwahrscheinlich nur position: relative;
Da steht doch alles drin. Deine im Screenshot betitelte Contentbox braucht position: relative;
Die Contentbox ist lt. deinem Quellcode #main_content. Gib diesem Element die genannte Positionierung und dein absolut positioniertes div wird sich an #main_content orientieren.

Zitat:
jetzt bleibt die Inbox an Position
Ja. Weil #main_content immernoch position: static hat.

Zitat:
aber main_left und main_content überlappen sich jetzt.
Du hast #main_content das float entzogen, was dazu führt, dass der Inhalt von #main_content #main_left umfließt.

Geändert von regloh (25.06.2009 um 22:32 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.06.2009, 23:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2009
Beiträge: 5
kmstario befindet sich auf einem aufstrebenden Ast
Standard

Hallöchen,

mit float:left; liegen die main_left und die main_content übereinander,
deswegen habe ich es deaktiviert. Ich dachte nun muss main_left nur noch gesperrt werden oder so.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.06.2009, 01:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
mit float:left; liegen die main_left und die main_content übereinander,
Wenn #main_left und #main_content jeweils float: left; bekommen, liegen sie mit Sicherheit nicht übereinander. Was hier übereinander liegen wird, sind vermutlich #main_left und

Desweiteren sind deine gesetzten Eigenschaften eh etwas wirr. Die auto-Margin für #main_left und #main_content sollen genau was bewirken? Wenn du die Seite zentrieren willst, reicht die auto-Angabe bei #wrapper aus.

Klappt denn nun die absolute Positionierung von #main_inbox ?
Mit Zitat antworten
  #8 (permalink)  
Alt 26.06.2009, 01:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2009
Beiträge: 5
kmstario befindet sich auf einem aufstrebenden Ast
Standard

Nabend,

jetzt bin ich doch ins Fettnäpchen getreten

Erstmal ja, das mit der Box hat perfekt geklappt, Vielen Dank !

Hatte mich doch glatt in der Breite verrechnet, daher mein Fehler mit den Boxen main_left und main_content.

Danke nochmal, weiter so,

Gruß Andreas
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
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument dimension CSS 1 25.07.2008 14:49
Box variabel in Breite und Höhe Black Fladder CSS 2 12.04.2008 17:31
Div-Element relativ zu anderem DIV positionieren FBI CSS 1 23.06.2007 15:11
Element absolut positionieren ProXy CSS 0 27.03.2006 10:47
Box innerhalb einer Box mit Text drum herum krass2001 CSS 4 31.05.2005 19:02


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