• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Richtige Positionierung, möglich?

  • Ersteller Ersteller Intersect
  • Erstellt am Erstellt am
I

Intersect

Guest
Hallo.

Bin grad dabei eine neue Webseite zu erstellen, dabei habe ich ständig das Problem mit der Positionierung von div Boxen.
Ich habe bereits die Suchmaschine benutzt, auch den momentanen Thread über das Thema gelesen, geholfen hat es nichts.

Das Buch mit dem ich HTML, CSS lerne, ist sonst ganz gut allerdings versagt es hier.
Ich möchte nur wissen wie ich absolut Positionieren kann ohne das sich was überlappt, oder sich das Layout verschiebt sobald ich das Fenster verkleiner oder vergrößer.

Das Thema Positionierung habe ich bereits bei google nachgesucht, und viele Videos auf Youtube angesehen.
Ich bin seid 2 Stunden dran und kann nichts mehr lesen über das Thema.

Könnt Ihr mir bitte einen Crashkurz geben, oder einen Link mit hilfreichen Tipps, einem Howto geben.
Was ist den nun richtig???
"position: absolute" und dann left, und right??? Allerdings verschiebt sich dann das Layout wieder mit dem Fenster beim vergrößern oder verkleinern, warum???

Oder kann man nicht float auf right, left stellen und kann etwas nach oben oder unten positionieren???

Wie macht Ihr das....????



Vielen dank für die Aufmerksamkeit.

Hab grad echt genug davon!
 
Bist du sicher, dass du wirklich absolut positionieren willst? Damit hebst du das Element aus dem aktuellen Textfluss heraus. In der Mehrzahl der Fälle ist position:relative die bessere Wahl. Dann klappts auch mit dem Floaten.

Ansonsten: poste mal die URL mit dem Quellcode.
 
Verzichte auf absolute Positionierung, ebenso auf relative und fixierte. Dann - und nur dann - wird auch nichts überlappen.

Richtig wäre, wenn Du das Wort "position" aus deinem CSS-Wortschatz erstmal streichst und für die Anordnung von Elementen float, margin und padding verwendest.

Wenn dir dieser Tipp nicht geholfen hat, zeig mal dein konkretes Anliegen:
Wie sieht dein aktueller Code aus?
Welche Ansicht möchtest Du erreichen?
 
Habe vorhin den Quellcode gelöscht ich werde es morgen nochmal versuchen. Den Quellcode hinterher posten.
Kannst du mir ein Beispiel bringen, wie du positionierst ohne "position" zu nutzen?
Überall steht das postion benutz wird.. dabei geht es wohl besser, etwas unnötig.

@Tronjer Warum ist das nicht gut was aus dem Textfluss zu nehmen?


Vielen dank, bin euch echt dankbar..
 
Intersect schrieb:
@Tronjer Warum ist das nicht gut was aus dem Textfluss zu nehmen?
Zum Vergrößern anklicken....

Unter bestimmten Umständen macht so etwas durchaus Sinn, aber es gehört zu den typischen Einsteigerfehlern, eine Webseite wie ein Printdokument zu betrachten und die einzelnen Elemente mit position:absolute an bestimmten Stellen "festnageln" zu wollen.
 
Habs endlich hinbekommen eine Frage habe ich noch. Wie ist es möglich div Boxen rechts, links und in der mitte auszurichten?
Hier ist ein momentaner Code den ich vorhin geschrieben habe:
Code: 
body
    {
    font-family: Verdana, Arial, "Times New Roman", sans-serif;
    font-size: small;
    line-height: 160%;
    font-weight: light;
    background-color: #E4E4E4;
}

h1
    {
    font-size: 13px;    
}

a:link
    {
    color:#FF6600;    
    text-decoration: none;
}

a:visited
    {
    color:#FF6600;    
    text-decoration: none;
}

a:hover
    {
    color:#FF6600;    
    text-decoration: none;
}

#inhaltsbereich
    {
    width: 920px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #E4E4E4;
    background-color: white;
    padding: 15px;
    padding-top: 5px;    
}
.navigation
    {
    background-color: white;
    font-size: 2;
    text-align: right;
    margin: 0px;
    padding: 0px;
    color: black;
    font-weight: bold;
    border: 1px solid #E4E4E4;
    height: 30px;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    line-height: 45%;
    margin-top: 26px;
}

.header
    {
    margin-right: auto;
    margin-left: auto;
    width: 950px;
}

.h1
    {
    border-bottom: 1px solid #C0C0C0;
}
.where
    {
    font-size: 10px;
}

.links
    {
    width: 160px;

}

.mittig
    {
    width: 540px;
    margin: auto;
}

.rechts
    {
    width: 160px;
    float: right;    
}

Falls Ihr fehler im Code findet, korriert mich.

Danke
 
Schreib im HTML-Code die Elemente in exakt dieser Reihenfolge:

HTML: 
<div class="links">link</div>
<div class="rechts">rechts</div>
<div class="mittig">mitte</div>

und ergänze in deinem CSS für .links noch "float: left;" - Rest passt schon so.
 
Danke.

Es ist alles nicht wirklich so wie es sein sollte. Wenn ich die linke jetzt genau positionieren will, muss ich zur realativen positionierung greifen oder?
Mit margin geht es von der rechten Seite es anzupassen aber nicht von der linken.

Gruß.
 
Zuletzt bearbeitet von einem Moderator:
Was ist "es"? Wo willst Du Abstände haben? Das Wort "position" solltest Du dir doch erstmal aus dem Wortschatz streichen ;)
 
Habs hingekriegt ;). Danke

Das Problem war, das sich ansonst der Rahmen nach oben verlagert hat, woran lag es??
Ich habe vergessen, eine höhe anzugeben.

Vielen dank an alle die mir geholfen haben!

Gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben