Div positionieren

20.01.2010, 08:04

Hallo, stehe mal wieder vor einen Problem.

Mein Seite (div page) ist mittig (Rand Links/Rechts Auto)

Darin befinden sich divs die vom float left sind, es sind keine Positionen angeben.

Jetzt habe ich eine div (right / width 500px height 350px float left) in der text steht. und ich will nun in dieser div eine grafik als link unten rechts in die ecke setzten (siehe anhang)

(das rote wöre die div right und das grüne eben die grafik)

hab gestern bissl rum probiert mit positions vergabe aber habs net hinbekommen

ich hoffe auf eure hilfe.

Naffto · 20.01.2010, 09:21

moin,

insofern du in deiner Box kein Hintergrundbild verwendest, kannst du es ganz einfach machen indem du der Box noch folgendes hinzufügst:

Code:

background: #farbe url(das bild) bottom right no-repeat;

Ansonsten habe ich es bei mir so gelöst, dass ich in der Box eine weitere gemacht habe, mit folgenden Eigenschaften:

Code:

#name {
	position:absolute;
	bottom:0px;
	right:0px;
	background: #farbe url(das bild) bottom right no-repeat;
	}

Ich hoffe es hilft dir ein wenig.

mfg

PsychoEagle · 20.01.2010, 09:28

Hi,

hast du bischen Quellcode noch?

Ansonsten, so pauschal gesagt, musst du dein Bild innerhalb der Div-Box (die mit dem Text) als erstes setzen und dann danach den Text und das Bild mit CSS positionieren:

Code:

position:absolute;
margin-top:350px-bildhöhe;
margin-left:500px-bildbreite;

Die margin-Angaben musst du vorher berechnen, die Browser machen des nicht alle mit.

Falls das nicht funktioniert, dann muss um das Bild noch eine div-box, welche dann die Eigenschaften erhalten muss.

Ich hoff ich hab dich auch richtig verstanden.

Grüße
Das Psy

20.01.2010, 09:41

@Naffto geht nicht da das bild als link sein sollen wie im text oben beschrieben

Hier mal das Page gerüst (divs heißen anders es geht hier um die #main_right_two_ge)

Code:

<div id="page">

    <div id="header">
        <div id="banner"></div>
    </div>
    
        <div id="main_left_top"></div>
        <div id="main_center_top"></div>
        <div id="main_right_top">
            <div id="menu"></div>
        </div>

    <div id="content">

        <div id="main_left"></div>
        <div id="main_right_two_ge"></div>
    
    </div>
    
    <div id="main_footer">
        <div id="main_footer_top"></div>
        <div id="main_footer_left"></div>
        <div id="main_footer_right"></div>
    </div>        

</div>

CSS der wichtigen komponeten

Code:

#page {
    height: 750px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}
#header {
    height: 90px;
    width: 1000px;
    float: left;
}
#content {
    float: left;
    height: 350px;
    width: 1000px;
}
#main_left {
    float: left;
    height: 350px;
    width: 500px;
}
#main_right_two_ge    {
    float: left;
    height: 350px;
    width: 500px;
}

Also die Grafik im Anhang in meinen 1. Post wäre dann die DIV #main_right_two_ge

Naffto · 20.01.2010, 10:14

sorry, das scheine ich überlesen zu haben

ich hoffe jetzt stimmt es!
Um die Grafik so zu positionieren, habe ich deinen #main_left das float genommen und dafür dann absolute positioniert! Dadurch kann man dann die Grafik als weiteres Div innerhalb des #main_left wieder absolute positionieren, sodass es immer unten Rechts liegt.
hier nun der relevante code:

Code:

<div id="content">

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

Css:

Code:

#main_left {
	position:absolute;
        height: 350px;
        width: 500px;
}
#main_right_two_ge    {
	position:absolute;
	bottom:0px;
	right:0px;
}

Ich hoffe diesmal stimmt es

Ansosnten korrigiere mich^^
Im Anhang noch ein kleines Bild, wie es bei mir aussieht.

20.01.2010, 10:25

danke für deine mühe aber achte mal auf #page

die seite ist mittig (rand auto werte)..und da habt es bei mir wenn ich die #main_right_two_ge absolut positioniere und die benutzerbildschirm kleiner wird immer die selbe position (somit dann außer halb der page

oder irre ich mich...

Anhang:

Grau = Bildschirmhintzergrund
Rahmen Rot = #Page
Hellgrün = Header & Footer
Rot = #main_left
Hellblau = #main_right_two_ge
Schwarz = die grafik die hin soll

hab ich nur fix zusammengeschustert im paint ^^ da ich grad nich an die original webseite rankomme

Naffto · 20.01.2010, 10:36

Also bei mir verschiebt sich da nichts. Es bleibt immer unten Rechts, egal wie groß der Benutzerbildschirm ist(getestet mit FF 3.5.3 und IE 8 ).
Das liegt daran, dass sich(in meinem Beispiel von oben) #main_left innerhalb von #content befindet. Dabei wird #main_left immer so positioniert, dass es am linken Rand von #content anfängt.
Da sich jetzt die Grafik innerhalb des #main_left befindet, wird diese immer nur innerhalb des #main_left positioniert.
Da ich der Grafikbox noch sage, dass diese immer unten Rechts sein soll, bleibt diese auch dort.
Ob diese Erklärung nun so 100% stimmt, weiß ich nicht! Dabei könnte ich mich auch irren. Jedenfalls ist beim testen der o.g. Browser kein Positionierungsfehler aufgetreten.

MFG

20.01.2010, 10:43

Zitat:

Zitat von Naffto

Also bei mir verschiebt sich da nichts. Es bleibt immer unten Rechts, egal wie groß der Benutzerbildschirm ist(getestet mit FF 3.5.3 und IE 8 ).
Das liegt daran, dass sich(in meinem Beispiel von oben) #main_left innerhalb von #content befindet. Dabei wird #main_left immer so positioniert, dass es am linken Rand von #content anfängt.
Da sich jetzt die Grafik innerhalb des #main_left befindet, wird diese immer nur innerhalb des #main_left positioniert.
Da ich der Grafikbox noch sage, dass diese immer unten Rechts sein soll, bleibt diese auch dort.
Ob diese Erklärung nun so 100% stimmt, weiß ich nicht! Dabei könnte ich mich auch irren. Jedenfalls ist beim testen der o.g. Browser kein Positionierungsfehler aufgetreten.

MFG

dann versuch da mal mit meiner gerüst und css und dann da die grafik einzubauen...da klappt es nicht, aber ich werds nochmal versuchen, man lernt ja nie aus

EDIT:

die Floats müsssen beibehalten werden..wenn ich das jetzt in die #main_right_two_ge einbauen liegt die #grafik rechts am bildschirm rand außerhalb der page

Code:

<div id="main_right_two_ge">

<div id="grafik" style="width:100px; height:100px; position:absolute; bottom:0px; right:0px;">Hier die Grafik</div>

</div>

Naffto · 20.01.2010, 11:14

soo

hab das ganze jeze noch mit floats gemacht. Wie es jetzt bei mir aussieht, steht im Anhang.

Hier der HTML Code:

Code:

<div id="content">
    <div id="main_left">main_left</div>
    <div id="main_right_two_ge">main_right_two_ge
     	<div id="grafik">Hier Grafik</div>
    </div>
  </div>

Und hier das CSS dazu:

Code:

#main_left {
	float:left;
        height: 350px;
        width: 500px;
}
#main_right_two_ge    {
	position:relative;
	float:right;
	height: 350px;
        width: 500px;
}
#grafik    {
	position:absolute;
	bottom:0px;
	right:0px;
}

Noch so nebenbei: Für die Grafikbox muss man nicht unbedingt eine Größe angeben. Lässt man die weg, passt sich die Box automatisch der Größe des eingefügten Bildes an.

MFG

20.01.2010, 11:18

Ahhhhhhhhhhhhhhhhhhhh wie geil

doch so einfach...ich glaubs ja netz

super geil dankeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

EDIT: würde man es noch hinbekommen das der text eventuell entweder die #grafik umläuft oder im vordergrund ist?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Layer richtig positionieren	sagato0816	JavaScript, Ajax und mehr	22	21.10.2009 19:28
[Erledigt] object am Rand positionieren	TAZweb	HTML, Usability und Barrierefreiheit	1	09.03.2009 13:04
[Erledigt] Login-Feld positionieren	Jasper	PHP Tipps 2009	17	19.02.2009 00:12
CSS Div korrekt positionieren?	She-Sign.de	HTML, Usability und Barrierefreiheit	2	24.01.2009 16:26
Elemente an einer x beliebigen Stelle positionieren	phpbeginner	HTML, Usability und Barrierefreiheit	7	24.08.2006 17:48
element am unteren rand positionieren	AliceD	HTML, Usability und Barrierefreiheit	1	07.09.2005 08:40
Css Problem - Divs anders positionieren	ypsie	HTML, Usability und Barrierefreiheit	7	22.08.2005 17:40
[Erledigt] Dynamisch Bilder übereinander positionieren?		HTML, Usability und Barrierefreiheit	4	15.08.2005 12:52
GDLib mehere Grafiken erzeugen und positionieren		PHP Tipps 2005-2	2	06.08.2005 17:57
[Erledigt] Bilder frei positionieren und von Text umfließen lassen.		HTML, Usability und Barrierefreiheit	10	24.04.2005 00:05
[Erledigt] DIV positionieren		HTML, Usability und Barrierefreiheit	12	20.03.2005 18:32
[Erledigt] CSS: <DIV> Positionieren		HTML, Usability und Barrierefreiheit	1	18.02.2005 21:05
span mittels css in div positionieren		HTML, Usability und Barrierefreiheit	6	10.02.2005 14:15
Grafiken mit css positionieren		HTML, Usability und Barrierefreiheit	12	30.12.2004 13:15
Tabelle positionieren	Anuschka	HTML, Usability und Barrierefreiheit	3	19.08.2004 03:35

20.01.2010, 08:04
22hase Gast Beiträge: n/a	Div positionieren Hallo, stehe mal wieder vor einen Problem. Mein Seite (div page) ist mittig (Rand Links/Rechts Auto) Darin befinden sich divs die vom float left sind, es sind keine Positionen angeben. Jetzt habe ich eine div (right / width 500px height 350px float left) in der text steht. und ich will nun in dieser div eine grafik als link unten rechts in die ecke setzten (siehe anhang) (das rote wöre die div right und das grüne eben die grafik) hab gestern bissl rum probiert mit positions vergabe aber habs net hinbekommen ich hoffe auf eure hilfe. Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.01.2010, 09:21
Naffto Neuer Benutzer Registriert seit: 18.01.2010 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	moin, insofern du in deiner Box kein Hintergrundbild verwendest, kannst du es ganz einfach machen indem du der Box noch folgendes hinzufügst: Code: background: #farbe url(das bild) bottom right no-repeat; Ansonsten habe ich es bei mir so gelöst, dass ich in der Box eine weitere gemacht habe, mit folgenden Eigenschaften: Code: #name { position:absolute; bottom:0px; right:0px; background: #farbe url(das bild) bottom right no-repeat; } Ich hoffe es hilft dir ein wenig. mfg

20.01.2010, 09:28
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Hi, hast du bischen Quellcode noch? Ansonsten, so pauschal gesagt, musst du dein Bild innerhalb der Div-Box (die mit dem Text) als erstes setzen und dann danach den Text und das Bild mit CSS positionieren: Code: position:absolute; margin-top:350px-bildhöhe; margin-left:500px-bildbreite; Die margin-Angaben musst du vorher berechnen, die Browser machen des nicht alle mit. Falls das nicht funktioniert, dann muss um das Bild noch eine div-box, welche dann die Eigenschaften erhalten muss. Ich hoff ich hab dich auch richtig verstanden. Grüße Das Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

20.01.2010, 10:14
Naffto Neuer Benutzer Registriert seit: 18.01.2010 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	sorry, das scheine ich überlesen zu haben ich hoffe jetzt stimmt es! Um die Grafik so zu positionieren, habe ich deinen #main_left das float genommen und dafür dann absolute positioniert! Dadurch kann man dann die Grafik als weiteres Div innerhalb des #main_left wieder absolute positionieren, sodass es immer unten Rechts liegt. hier nun der relevante code: Code: <div id="content"> <div id="main_left">main_left <div id="main_right_two_ge">Grafik</div> </div> </div> Css: Code: #main_left { position:absolute; height: 350px; width: 500px; } #main_right_two_ge { position:absolute; bottom:0px; right:0px; } Ich hoffe diesmal stimmt es Ansosnten korrigiere mich^^ Im Anhang noch ein kleines Bild, wie es bei mir aussieht. Miniaturansicht angehängter Grafiken

20.01.2010, 10:25
22hase Gast Beiträge: n/a	danke für deine mühe aber achte mal auf #page die seite ist mittig (rand auto werte)..und da habt es bei mir wenn ich die #main_right_two_ge absolut positioniere und die benutzerbildschirm kleiner wird immer die selbe position (somit dann außer halb der page oder irre ich mich... Anhang: Grau = Bildschirmhintzergrund Rahmen Rot = #Page Hellgrün = Header & Footer Rot = #main_left Hellblau = #main_right_two_ge Schwarz = die grafik die hin soll hab ich nur fix zusammengeschustert im paint ^^ da ich grad nich an die original webseite rankomme Miniaturansicht angehängter Grafiken

20.01.2010, 10:36
Naffto Neuer Benutzer Registriert seit: 18.01.2010 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	Also bei mir verschiebt sich da nichts. Es bleibt immer unten Rechts, egal wie groß der Benutzerbildschirm ist(getestet mit FF 3.5.3 und IE 8 ). Das liegt daran, dass sich(in meinem Beispiel von oben) #main_left innerhalb von #content befindet. Dabei wird #main_left immer so positioniert, dass es am linken Rand von #content anfängt. Da sich jetzt die Grafik innerhalb des #main_left befindet, wird diese immer nur innerhalb des #main_left positioniert. Da ich der Grafikbox noch sage, dass diese immer unten Rechts sein soll, bleibt diese auch dort. Ob diese Erklärung nun so 100% stimmt, weiß ich nicht! Dabei könnte ich mich auch irren. Jedenfalls ist beim testen der o.g. Browser kein Positionierungsfehler aufgetreten. MFG

20.01.2010, 11:14
Naffto Neuer Benutzer Registriert seit: 18.01.2010 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	soo hab das ganze jeze noch mit floats gemacht. Wie es jetzt bei mir aussieht, steht im Anhang. Hier der HTML Code: Code: <div id="content"> <div id="main_left">main_left</div> <div id="main_right_two_ge">main_right_two_ge <div id="grafik">Hier Grafik</div> </div> </div> Und hier das CSS dazu: Code: #main_left { float:left; height: 350px; width: 500px; } #main_right_two_ge { position:relative; float:right; height: 350px; width: 500px; } #grafik { position:absolute; bottom:0px; right:0px; } Noch so nebenbei: Für die Grafikbox muss man nicht unbedingt eine Größe angeben. Lässt man die weg, passt sich die Box automatisch der Größe des eingefügten Bildes an. MFG Miniaturansicht angehängter Grafiken

20.01.2010, 11:18
22hase Gast Beiträge: n/a	Ahhhhhhhhhhhhhhhhhhhh wie geil doch so einfach...ich glaubs ja netz super geil dankeeeeeeeeeeeeeeeeeeeeeeeeeeeeee EDIT: würde man es noch hinbekommen das der text eventuell entweder die #grafik umläuft oder im vordergrund ist?