Suche im Forum:
Suchen


Autor Nachricht
Beitrag02.06.2010 um 20:05 (UTC)    
Titel: Navi und rechte Box

Hi,

ich bin gerade dabei, das Gründgerüst für ein CSS Design aufzubauen.
Nun haben sich folgende Probleme ergeben:

Die rechte Box ist nicht im Content - wie bekommt man die rein?

Stück über Navigation - woher kommt das, wie bekomt man das weg?
Die Navi ist der dünne Rahmen in den dicken, kleinen Feld.

Hoffe ihr könnt mir helfen
MfG
Beitrag02.06.2010 um 20:18 (UTC)    
Titel: CSS Navigation + rechte Box

Hallo

1) Die rechte Box ist im CSS-Design frei platzierbar und befindet sich nicht mit im Content_Container. Wenn sie in den Content soll, dann positioniere sie mit ihren Top, Left und Margin-Left Angaben so, dass sie im Content sitzt.

Zitat:

/* Hier eine Beispielplatzierung - zusätzliche Angaben musst du noch einfügen */

#sidebar_container
{
top: 400px;
left: 50%;
margin-left: 300px;
}



2) Die Navigation ist nicht der dünne Rahmen, sondern der dicke (einschließlich der Lücke oben und unten). Der dünne Rahmen gilt nur für das ul#nav li Element innerhalb der Navigation. Wenn die Lücken weg sollen, ändere die Höhe der Navigation:

Zitat:

/* Hier eine Beispielhöhe - zusätzliche Angaben musst du noch einfügen */

#nav_container
{
height: 22px;
}




Gruß
Beitrag02.06.2010 um 20:29 (UTC)    
Titel:

Bei der rechten Box ist das Problem, dass sie bei jedem Browser wo anders ist, wenn man margins verwendet oder? Macht das große Unterschiede?
Außerdem bekomme ich die Box nicht höher als der untere Rahmen des Contents. Wie bekomm ich die Box in den Content?

Wenn ich die Höhe verändere, dann verkleinert sich nur die Fläche unterhalb der Links.

Hoffe du kannst mir nochmal weiterhelfen.


Zuletzt bearbeitet von page-lab am 02.06.2010, 21:33, insgesamt einmal bearbeitet
Beitrag02.06.2010 um 20:49 (UTC)    
Titel: margin + rechte Bog

Das mit den margin-Werten ist nicht ganz richtig. Es werden nur die Dinge in jedem Browser anders dargestellt, die absolut im Bezug auf den Bildschirmrand positioniert sind. Wenn du ein Element absolut 1000px von links und 1000px von oben positionierst, dann ist es immer dort, egal ob der Bildschirm 1280 x 1000 px breit ist oder nur 600 x 500 px. Dann würde es auf manchen Bildschirmen nicht richtig zu sehen sein.

Wenn du ein Element unabhängig von der Bildschirmgröße immer an derselben Stelle richtig dargestellt haben möchtest, solltest du mit "left" zuerst eine Prozentangabe verwenden (z.B. left: 50%; - damit wird ein Element horizontal nicht am Bildschirmrand positioniert, sondern in der Bildschirmmitte und die ist logischerweise bei jedem Bildschirm an derselben Stelle). Mit dem Wert "margin-left" kannst du das so ausgerichtete Objekte dann nach rechts (positive Werte) und links (negative Werte) verschieben, wobei es seinen Bezug zur Mitte beibehält.
Die "Top"-Angabe kann man jedoch in px lassen, da es in der vertikalen Ausrichtung oftmals keine größeren Probleme gibt.

Die Box wird nicht weiter nach oben geschoben, da du die Top-Angabe vergessen hast. Wenn dort kein Wert steht, wird sie einfach an das Ende des vorhergehenden Elements angehängt (also direkt an den Content).

Die rechte Box könntest du so platzieren:

Zitat:

/* rechte Box */
#sidebar_container
{
position: absolute;
top: 300px;
left: 50%;
margin- left: 200px;
border:1px solid;
width: 150px;
min-height:400px;
}



Zuletzt bearbeitet von ill-fated am 02.06.2010, 21:56, insgesamt einmal bearbeitet
Beitrag03.06.2010 um 08:35 (UTC)    
Titel:

Wenn ich was am margin-left Wert geändert habe, hat sich nichts geändert. Hab das daher mit der %-Angabe gemacht. Ist das auch ok so?

Das mit der Navi hab ich jetzt hinbekommen...

Hoffe du kannst mir nochmal helfen.


Zuletzt bearbeitet von page-lab am 03.06.2010, 09:41, insgesamt einmal bearbeitet
Beitrag03.06.2010 um 18:24 (UTC)    
Titel: margin-left

Hallo

Prozentangaben sind nicht immer so präzise, wie man glaubt.


Darstellung bei größerem Bildschirm:




Darstellung bei kleinerem Bildschirm:




Bei reinen Prozentangaben wird eine Klasse sehr oft ziemlich unterschiedlich dargestellt. Wenn du sie 67% von links ausrichtest, dann liegen diese 67% bei jedem Nutzer an einer ganz anderen Stelle, da es viele verschiedene Bildschirm- und Fenstergrößen gibt. Daher richtet man bei zentrierten Designs solche Klassen zuerst an der Bildschirmmitte aus und benutzt zusätzlich margin, um sie genau zu platzieren:

1) zuerst die Klasse mit "position: absolute;" an eine definitive Position binden

2) dann die Klasse mit "left: 50%;" an der Bildschirmmitte horizontal ausrichten

3) zum Schluss die Klasse mit "margin-left: XXpx;" genau platzieren (negative margin-Werte verschieben die Klasse von der Bildschirmmitte aus nach links, positive nach rechts)


Zitat:

/* rechte Box */
#sidebar_container
{
position: absolute;
top: 300px;
left: 50%;
margin- left: 200px;
border:1px solid #000000;
width: 150px;
height:450px;
}




Gruß
Beitrag03.06.2010 um 19:54 (UTC)    
Titel:

Es passiert einfach nichts wenn ich den margin Wert verändere.
Beitrag03.06.2010 um 20:49 (UTC)    
Titel:

Ich glaube ich habe den Fehler gefunden:

In der Angabe "margin- left: 700px;" ist ein Leerzeichen nach margin-
Im CSS scheint der Befehl daher nicht verstanden zu werden. Entferne einfach mal das Leerzeichen. Bei mir funktioniert es dann (PS der Wert 700px ist so groß, dass die Box wahrscheinlich aus dem Design rausgeschoben wird und scheinbar verschwindet. Bei einem kleineren Wert taucht sie wieder auf.


Gruß
Beiträge der letzten Zeit anzeigen:   


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