✔ CSS Design - Code

Status
Nicht offen für weitere Antworten.
F

futufry

Mitglied
Hallo,

bin z.Z. dabei eine Webseite für ein altes Unternehmen zu entwerfen und war bereits kurz vor der Fertigstellung. Das Problem war, dass ich die Seite mit Tabellen programmiert habe. Dies hat sich deutlich in der Ladezeit bemerkbar gemacht, so das ich mich dazu entschlossen habe auf CSS umzusteigen.

Da ich noch blutiger Anfänger bin, benötige ich eure Hilfe! Ich habe bereits einen ersten Anfang gemacht und das Design grob zusammengestellt, jedoch machen mir die Verschachtelungen bissel Sorge.

Folgende Fragen quälen mich momentan:

Bin ich damit auf dem richtigen Weg oder sollte ich nochmal anfangen? Wenn ja, wie könnte ich die Ebenen geschickt einsetzen?

Wie ihr sehen könnt, geht der Text über die Ebene. Ist bestimmt ein Standardproblem bei Anfängern wie mir :) Wie kann ich das beseitigen? Hab bisher noch keine eindeutige Lösung gefunden. overflow bzw. visible bereiten mit Kopfschmerzen, will nicht klappen.

Wie bekomme ich das komplette Design zentriert? Also in die Bildschirmmitte?


Ich wäre euch sehr sehr dankbar, wenn ihr mir bei meinen Fragen helfen könntet. Will nicht mehr länger auf Tabellen zurückgreifen, sondern etwas neues lernen.
 
Zuletzt bearbeitet:
futufry hat gesagt.:
Wie ihr sehen könnt, geht der Text über die Ebene. Ist bestimmt ein Standardproblem bei Anfängern wie mir Wie kann ich das beseitigen? Hab bisher noch keine eindeutige Lösung gefunden. overflow bzw. visible bereiten mit Kopfschmerzen, will nicht klappen.
Zum Vergrößern anklicken....
Ich empfehle Dir den Wert auto für die overflow-Eigenschaft, damit der überlange Inhalt in der Box gescrollt werden kann:

Code: 
#content {
        position:absolute;
        left: 198px;
        width:538px;
        height:494px;
        z-index:1;
        top: 6px;
        overflow: auto;
}
futufry hat gesagt.:
Wie bekomme ich das komplette Design zentriert? Also in die Bildschirmmitte?
Zum Vergrößern anklicken....
CSS-Code für ein horizontal zentriertes DIV-Element:

Code: 
#centerBox {
position: absolute;
left: 50%;
width: 790px;
margin-left: -395px; /* negative Hälfte von width:790px */
top: 10px;
}
CSS-Code für ein horizontal und vertikal zentriertes DIV-Element:
Code: 
#centerBox {
position: absolute;
left: 50%;
width: 790px;
margin-left: -395px; /* negative Hälfte von width:790px */
top: 50%;
height: 590px;
margin-top: -295px; /* negative Hälfte von height:590px */
}
HTML: 
<body>
        <div id="centerBox"> 
                 <!-- Hier folgt das bestehende Layout --> 
        </div>
</body>
 
Oh vielen vielen Dank!

Wie bekomme ich es hin, dass statt der Scrollbalken das Design "verlängert" wird? Halt die Ebenen von der Höhe her länger werden?! Weiß nicht recht, wie man das besser beschreiben könnte^^
 
Elemente mit einer absoluten Positionierung lassen sich nicht mit einer variablen Höhen ausstatten.
 
Hab das jetzt einigermaßen hingekriegt, wie ich es haben wollte. Muss jetzt nur noch unten bei dem Footer paar Einstellungen treffen, da der nicht komplett sichtbar ist.
 
Zuletzt bearbeitet:
Probier es mal mit der ersten Variante zur horizontalen Zentrierung des DIVs #centerBox:

Code: 
#centerBox {
position: absolute;
left: 50%;
width: 790px;
margin-left: -395px; /* negative Hälfte von width:790px */
top: 10px;
}
 
Im Firefox scheint er es nicht richtig anzuzeigen :( Der Footer befindet sich auf Höhe des Headers. An was könnte das liegen?
 
Zuletzt bearbeitet:
Der Footer ist auch nicht, wie alle übrigen DIVs, im Anzeigefenster absolut positioniert, und rutscht daher nach oben.
 
Du mußt auch angeben, wo das Element positioniert werden soll, ansonsten gilt als Voreinstellung top:0 und left:0 ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück