Suche im Forum:
Suchen


Autor Nachricht
Beitrag03.09.2010 um 13:18 (UTC)    
Titel: Css Positionieren

Hi,
Ich wollte mal wieder ein neues Design erstellen. Und ich würde nun gerne wissen wie ich Textfelder ( Content, Rechte Box, Divboxen...) am schlausten Positioniere. Biss her habe ich das immer mit position absolute gemacht. Aber wie ich selbst gemerkt hab ist das nicht unbedingt die beste Lösung, da ich so bspw. kein Footer verwenden kann.
Also ich würde nun gerne wissen wie man die Positionen sonst noch bestimmen kann das einzige was ich mir noch vorstellen könnte wäre mit margin-top und margin-left weiß aber nicht sicher ob das funktioniert.

MFG eMil
______________

Akinom ist ein kostenloses Strategie-Browser-Kartenspiel komplett in PHP geschrieben.
HPBK Posting Roulett
Beitrag03.09.2010 um 17:48 (UTC)    
Titel:

Ich bin Anhänger der "float"-Methode:
http://de.html.net/tutorials/css/lesson13.asp
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag03.09.2010 um 18:06 (UTC)    
Titel:

hmmm okaay. hab mir das ganze durchgelesen. Also so wie ich das da erlese ist das für die Positionierung IN einer Box und nicht einer Box.

Könntest du eventuell einen groben Code Posten wie das z.B Beim content aussehen würde ? Ich glaube von da an würde ich dann alleine weiterkommen.

MFG eMil
______________

Akinom ist ein kostenloses Strategie-Browser-Kartenspiel komplett in PHP geschrieben.
HPBK Posting Roulett
Beitrag03.09.2010 um 18:33 (UTC)    
Titel:

Okidoki Cheffe.

Wie du richtig vermutet hast geht float nur in einer Box.
Du musst dir das Arbeiten mit dem Float-Befehl wie ein Puzzle vorstellen, Elemente innerhalb einer Box die schwimmen, werden immer versuchen den vorhandenen Raum aufzufüllen.
Code:
<style type="text/css>
#box {
width: 200px;
background: #f2f2f2;
}

#element1 {
width: 90px;
height: 40px;
margin: 5px;
background: #202020;
float: left;
}

#element2 {
width: 90px;
height: 90px;
margin: 5px;
background: #202020;
float: right;
}

#element3 {
width: 90px;
height: 40px;
margin: 5px;
background: #333;
float: left;
}
</style>

<div id="box">
<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>
</div>

Alle Elemente in der Box richten sich mit Float an deren Rand aus.

Der Content setzt sich im großen aus einer Überklasse und drei Subklassen zusammen:
Code:

<style type="text/css">
#pre_content {
float: left;
}

#content {
float: left;
}

#post_content {
float: left;
}
</style>

<div id="content_container">
<div id="pre_content"></div>
<div id="content"></div>
<div id="post_content"></div>
</div>

Damit sich alle Bestandteile richtig anordnen solltest du die Elemente immer in eine Richtung "floaten" lassen.
Tricks kann man dann mit unterschiedlichen float Richtungen erreichen.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.


Zuletzt bearbeitet von badweb am 03.09.2010, 19:37, insgesamt einmal bearbeitet
Beitrag03.09.2010 um 18:59 (UTC)    
Titel:

Es ist schon etwas später daher bin ich wohl nicht mehr ganz so Aufnahme fähig. aber irgendwie hab ich das immer noch nicht so ganz verstanden. Und mit dem ersten Code kann ich nicht sehr viel anfangen.

float left bedeutet das der Inhalt einer Box am linken Rand ist ?
Aber wie bekomme ich denn einen gewissen Abstand zum linken Rand hin ?
und der content Code beinhaltet noch nicht den Abstand von oben( So wie ich das sehe) das kann ich auch alles noch hinzufügen dürfte kein Problem sein.



Gibt es noch andere gute möglicherweise leichtere Möglichkeiten ?

MFG eMil
______________

Akinom ist ein kostenloses Strategie-Browser-Kartenspiel komplett in PHP geschrieben.
HPBK Posting Roulett
Beitrag03.09.2010 um 19:58 (UTC)    
Titel:

Abstände erhälst du wie gewohnt mit den margin/padding Befehlen.

Du kannst natürlich auch einem Element einen Abstand direkt vom Bildschirmran aus zuweisen:
Code:
#element {
top: 300px;
}

Da aber die Auflösung von Benutzer zu Benutzer variiert ist dann auch jedesmal die Anzeige anders.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag04.09.2010 um 10:25 (UTC)    
Titel:

hmm irgendwie komm ich damit nicht so ganz klar.

Mach mache ich es das eine div box immer einen bestimmten Abstand zu einer anderen Box hat, bspw. dem content?

MFG eMil
______________

Akinom ist ein kostenloses Strategie-Browser-Kartenspiel komplett in PHP geschrieben.
HPBK Posting Roulett
Beitrag04.09.2010 um 17:57 (UTC)    
Titel:

Abstände zu anderen Elementen/Div-Boxen sind margin bzw. padding Befehle.

In meinem ersten Beispiel oben siehst du bei den elementen die Zeile "margin: 5px;". Das bedeutet, dass an die Box von allen 4 Seiten einen Abstand von 5px zum nächsten Element hat.

Füge einfach mal den Code auf einer deiner Seiten ein und probiere ein bisschen rum.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de