Moin
hab mal eine Frage zur Positionierung von Div Elementen.
Habe Div-Elemente für den Kopf,Inhalt,Navigation...
nun mein Problem:
Ich positioniere immer mit "posizion:absolute" , ist das ratsam ?
Oder hat diese Variante irgendwelche Nachteile ?
Gibt es Alternativen ?
mfg
Summernoon
Mein Punktekonto 0 Punkte
Positionierung (absolute,relative..)
Moderatoren: Basti, Ingo
11 Beiträge • Seite 1 von 1
Positionierung (absolute,relative..)
von Summernoon am 25.11.2007, 11:44
- Summernoon
- Mitglied
- Beiträge: 160
- Registriert: 06.11.2007, 16:44
Re: Positionierung (absolute,relative..)
von Basti am 25.11.2007, 12:08
Das hängt eigentlich ziemlich stark davon ab, was genau du gerade ausrichtest und wo es auf der Seite erscheinen soll.
In der Praxis ist es zumindest bei mir so, dass ich die position-Angabe nur sehr selten brauche, eigentlich auch bei der Ausrichtung von div-Layern, da der Initialwert static eigentlich immer gut passt.
absolute bietet sich für die Ausrichtung im Allgemeinen eigentlich nicht an, da dass ja bewirkt, dass die Inhalte unabhängig von den anderen div-Layern sind, aber meist möchte man bei Layouts ja, dass die verschiedenen Teile sich auch gegenseitig beeinflussen.
Das hängt aber wie gesagt stark davon ab, was man gerade macht. Eine allgemeine Regel, welche Angabe nun besser ist, kann es eigentlich nicht geben, da die Angaben ja für unterschiedliche Anwendungszwecke sind.
Das wäre genauso, wenn du wissen möchtest, ob du Texte nun immer kursiv, fett oder unterstrichen schreiben sollst, wofür es ja auch keine allgemeine Aussage gibt
In der Praxis ist es zumindest bei mir so, dass ich die position-Angabe nur sehr selten brauche, eigentlich auch bei der Ausrichtung von div-Layern, da der Initialwert static eigentlich immer gut passt.
absolute bietet sich für die Ausrichtung im Allgemeinen eigentlich nicht an, da dass ja bewirkt, dass die Inhalte unabhängig von den anderen div-Layern sind, aber meist möchte man bei Layouts ja, dass die verschiedenen Teile sich auch gegenseitig beeinflussen.
Das hängt aber wie gesagt stark davon ab, was man gerade macht. Eine allgemeine Regel, welche Angabe nun besser ist, kann es eigentlich nicht geben, da die Angaben ja für unterschiedliche Anwendungszwecke sind.
Das wäre genauso, wenn du wissen möchtest, ob du Texte nun immer kursiv, fett oder unterstrichen schreiben sollst, wofür es ja auch keine allgemeine Aussage gibt
-
Basti - Moderator
- Beiträge: 2000
- Registriert: 15.06.2006, 17:33
- Wohnort: Rheinbreitbach
Re: Positionierung (absolute,relative..)
von Dac-XP am 25.11.2007, 12:22
Es gibt ein sehr gutes Anwendungsgebiet für div-Ebenen mit "position: absolute":
Nämlich dann, wenn du zum Beispiel einen kleinen Hilfetext immer an der Maus haben möchtest, oder eine Box immer unter einem bestimmten Element haben möchtest
Ein kleiner JavaScript-Code als Beispiel:
Dieser Code ist im Prinizip ganz einfach. Man ermittelt die Position eines beliebigen Elements (target), und weist die X, Y-Koordinaten einem anderen Element (element) zu. Hierzu muss die div-Ebene "element" natürlich im CSS-Style "position: absolute" stehen haben.
Zum Aufbau eines kompletten Designs ist eine absolute Positionierung allerdings sehr unpraktisch.
Nämlich dann, wenn du zum Beispiel einen kleinen Hilfetext immer an der Maus haben möchtest, oder eine Box immer unter einem bestimmten Element haben möchtest
Ein kleiner JavaScript-Code als Beispiel:
- Code: Alles auswählen
var x = absLeft(document.getElementById(target));
// absLeft ermittelt die absolute X-Koordinate im Verhältniss zur GANZEN Seite
var y = absTop(document.getElementById(target)) + document.getElementById(target).offsetHeight;
// absTop ermittelt die absolute Y-Koordinate im Verhältniss zur GANZEN Seite
document.getElementById(element).style.left = x + "px";
document.getElementById(element).style.top = y + "px";
Dieser Code ist im Prinizip ganz einfach. Man ermittelt die Position eines beliebigen Elements (target), und weist die X, Y-Koordinaten einem anderen Element (element) zu. Hierzu muss die div-Ebene "element" natürlich im CSS-Style "position: absolute" stehen haben.
Zum Aufbau eines kompletten Designs ist eine absolute Positionierung allerdings sehr unpraktisch.
-
Dac-XP - Mitglied
- Beiträge: 1944
- Registriert: 23.06.2005, 19:47
- Wohnort: Mönchengladbach / NRW
Re: Positionierung (absolute,relative..)
von Summernoon am 25.11.2007, 14:51
Mal ein schnelles Beispiel geschaffen:
CSS Code
HTML Code
Wie bekomme ich die Navigation dort hin wo sie jetzt ist, ohne "position:absolute" ?
mfg
Summernoon
CSS Code
- Code: Alles auswählen
/* Wrapper */
body {
margin:0;
padding:0;
background-image:url(scanline.gif);
background-color:grey;
}
#all {
position:relative;
width:980px;
margin:auto;
border:1px dashed red;
}
/* Kopf */
#kopf {
padding:0;
margin:0;
background:#990000;
height:140px;
}
/* Inhalt */
#inhalt {
background:#000000;
height:400px;
width:600px;
margin-left:220px;
}
/* Navigation */
#navi {
background:#770000;
height:300px;
width:200px;
top:200px;
position:absolute;
}
HTML Code
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
</head>
<body>
<!-- All Div's -->
<!-- Wrapper -->
<div id="all">
<!-- Kopf -->
<div id="kopf">
<p>head</p>
</div>
<!-- Inhalt -->
<div id="inhalt">
<p>inhalt</p>
</div>
<!-- Navigation -->
<div id="navi">
<p>navi</p>
</div>
<!-- Wrapper Ende -->
</div>
</body>
</html>
Wie bekomme ich die Navigation dort hin wo sie jetzt ist, ohne "position:absolute" ?
mfg
Summernoon
- Summernoon
- Mitglied
- Beiträge: 160
- Registriert: 06.11.2007, 16:44
Re: Positionierung (absolute,relative..)
von Basti am 25.11.2007, 15:24
Dazu benutzt man in der Regel float-Angaben.
Deine Quelltextanordnung ist zwar nicht ganz optimal, aber ich vermute, dass du Navigation und Inhalt genau nebeneinander haben möchtest, oder?
Weil dann kannst du über die die jeweiligen div-Layer z.B. nach rechts und nach links ausrichten, sodass sie genau nebeneinander sind.
Und dazu brauchst du dann auch keine absoluten Angaben mehr machen.
Am besten schaust du dir mal das Tutorial hier an, da wird das nämlich alles gezeigt und erklärt. Ist auch nicht sonderlich schwierig
Deine Quelltextanordnung ist zwar nicht ganz optimal, aber ich vermute, dass du Navigation und Inhalt genau nebeneinander haben möchtest, oder?
Weil dann kannst du über die die jeweiligen div-Layer z.B. nach rechts und nach links ausrichten, sodass sie genau nebeneinander sind.
Und dazu brauchst du dann auch keine absoluten Angaben mehr machen.
Am besten schaust du dir mal das Tutorial hier an, da wird das nämlich alles gezeigt und erklärt. Ist auch nicht sonderlich schwierig
-
Basti - Moderator
- Beiträge: 2000
- Registriert: 15.06.2006, 17:33
- Wohnort: Rheinbreitbach
Re: Positionierung (absolute,relative..)
von Summernoon am 25.11.2007, 15:32
habe das mal probiert kam aber i-wie nix bei raus.
Könntest du mir mal den Css Code für "navi" sagen ?
Wie änder ich das ?
Ps: ja der Inhaltsbereich soll auf der gleichen Höhe wie die Navigation sein , habe das aber auf die schnelle weggelassen!
mfg
Summernoon
______________________________________________________________________________
Ich finde es super das hier bei der-webdesigner.net immer so schnell ne Antwort erteilt wird. Großes Lob.
Könntest du mir mal den Css Code für "navi" sagen ?
- Code: Alles auswählen
#navi {
background:#770000;
height:300px;
width:200px;
}
Wie änder ich das ?
Ps: ja der Inhaltsbereich soll auf der gleichen Höhe wie die Navigation sein , habe das aber auf die schnelle weggelassen!
mfg
Summernoon
______________________________________________________________________________
Ich finde es super das hier bei der-webdesigner.net immer so schnell ne Antwort erteilt wird. Großes Lob.
- Summernoon
- Mitglied
- Beiträge: 160
- Registriert: 06.11.2007, 16:44
Re: Positionierung (absolute,relative..)
von Ingo am 25.11.2007, 16:13
Hi. - Mit float:left müsste das in etwa so aussehen (Rest wie oben):
Wenn später hinter dem Inhalts-Div noch weitere folgen (Footer?), sollte da dann 'clear:left'
gesetzt werden.
- Code: Alles auswählen
CSS:
/* Inhalt */
#inhalt {
background:#000000;
height:400px;
width:600px;
margin-left:20px; /* <== anpassen */
float:left;
}
/* Navigation */
#navi {
background:#770000;
height:300px;
width:200px;
float:left;
}
HTML: Reihenfolge: erst Navi, dann Inhalt, sonst geht 'float:left' nicht wie gewünscht:
<!-- Navigation -->
<div id="navi">
<p>navi</p>
</div>
<!-- Inhalt -->
<div id="inhalt">
<p>inhalt</p>
</div>
Wenn später hinter dem Inhalts-Div noch weitere folgen (Footer?), sollte da dann 'clear:left'
gesetzt werden.
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
-
Ingo - Moderator
- Beiträge: 784
- Registriert: 01.04.2007, 23:21
- Wohnort: Neuss/NRW
Re: Positionierung (absolute,relative..)
von Summernoon am 25.11.2007, 16:59
den zusammenhang mit der reihenfolge versteh ich nciht.
mfg
Summernoon
mfg
Summernoon
- Summernoon
- Mitglied
- Beiträge: 160
- Registriert: 06.11.2007, 16:44
Re: Positionierung (absolute,relative..)
von Ingo am 25.11.2007, 17:35
Probiers aus ;o) float:left heißt ja: 'Das Element rückt soweit nach links wie möglich und die
nachfolgenden Elemente sollen rechts daneben "vorbeifließen", solange da noch Platz ist'.
Bei float:left ist die Reihenfolge (im HTML) wichtig, weil das DIV, welches zuerst im Text steht, auch
als erstes gezeichnet wird. - Wenn du erst 'Inhalt', dann 'Navi' schreibst, erscheint 'Inhalt' ganz links
am Rand und 'Navi' rechts daneben (wenn da genügend Platz ist). Das war aber nicht gewünscht, oder ?
nachfolgenden Elemente sollen rechts daneben "vorbeifließen", solange da noch Platz ist'.
Bei float:left ist die Reihenfolge (im HTML) wichtig, weil das DIV, welches zuerst im Text steht, auch
als erstes gezeichnet wird. - Wenn du erst 'Inhalt', dann 'Navi' schreibst, erscheint 'Inhalt' ganz links
am Rand und 'Navi' rechts daneben (wenn da genügend Platz ist). Das war aber nicht gewünscht, oder ?
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
-
Ingo - Moderator
- Beiträge: 784
- Registriert: 01.04.2007, 23:21
- Wohnort: Neuss/NRW
Re: Positionierung (absolute,relative..)
von Summernoon am 25.11.2007, 18:07
ja ich wollte das die Navigation links ist.
Aber wann würde ich denn clear:left nehmen...leuchtet mir noch nicht ganz ein.
Das mit float.left hab ich jetzt aber verstanden
mfg
Summernoon
Aber wann würde ich denn clear:left nehmen...leuchtet mir noch nicht ganz ein.
Das mit float.left hab ich jetzt aber verstanden
mfg
Summernoon
- Summernoon
- Mitglied
- Beiträge: 160
- Registriert: 06.11.2007, 16:44
Re: Positionierung (absolute,relative..)
von Ingo am 25.11.2007, 18:53
Zu clear:left ein Beispiel:
Box 2 ohne clear:left erscheint rechts neben dem Navi (unterhalb von Box 1), weil der Navi
float:left ist und rechts neben dem Navi noch Platz ist.
Box 2 mit clear:left erscheint unterhalb des Navi - clear:left beendet das 'Umfließen' des Navi.
So'was ist zum Beispiel nützlich für einen Footer zum unteren Seitenabschluss.
- Code: Alles auswählen
CSS:
#top { background:#cccccc;
height:80px;
}
#navi { background:#ccedcc;
width:200px; height:350px;
float:left;
}
#box1 { background:#cccced;
height:150px;
margin-left:200px;
}
#box2 { background:#edcccc;
height:150px;
clear:left; /* <== testhalber weglassen == */
}
HTML:
<div id="top">Top</div>
<div id="navi">Navi</div>
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
Box 2 ohne clear:left erscheint rechts neben dem Navi (unterhalb von Box 1), weil der Navi
float:left ist und rechts neben dem Navi noch Platz ist.
Box 2 mit clear:left erscheint unterhalb des Navi - clear:left beendet das 'Umfließen' des Navi.
So'was ist zum Beispiel nützlich für einen Footer zum unteren Seitenabschluss.
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
-
Ingo - Moderator
- Beiträge: 784
- Registriert: 01.04.2007, 23:21
- Wohnort: Neuss/NRW
11 Beiträge • Seite 1 von 1
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast