XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Wie aufbauen? Menü neben Navigation (http://xhtmlforum.de/showthread.php?t=43705)

unregiert 02.01.2007 20:56

Wie aufbauen? Menü neben Navigation
 
Hallo

Ich möchte ein Design gestalten, dass etwas weiter über mein Können wohl hinaus geht. Es ist so, dass ich als Header eine relativ grosse Grafik nehmen möchte, die wie auf WoltLab GmbH | Startseite die ganze Seite füllt. Unterhalb dieser Grafik soll ein Verlauf sein, und über die beiden Grafiken die Content-Box. Und neben der Content-Box noch eine Navigation, falls möglich :mrgreen:.

http://img2.myimg.de/desginf2f.gif

Naja, wie ihr seht: Ein grosser Wunsch eines kleinen Mannes.

Meine Fragen:
  • Wie schaffe ich es, abgerundete Ecken zu schaffen?
  • Wie positioniere ich die Content-Box sowie die Navigation so, dass der Content in der Mitte ist, und die Navigation wie auf der Grafik neben der Contentbox ist?
  • Für die Navigation: Eine Div-Box nehmen oder mit ul/li arbeiten?

heiko_rs 02.01.2007 21:06

Zitat:

Zitat von unregiert (Beitrag 319689)
Wie schaffe ich es, abgerundete Ecken zu schaffen?

Per Grafik, die einem geeigneten Element als Hintergrund zugewiesen wird.

Zitat:

Zitat von unregiert (Beitrag 319689)
Wie positioniere ich die Content-Box sowie die Navigation so, dass der Content in der Mitte ist, und die Navigation wie auf der Grafik neben der Contentbox ist?

Arbeitest Du mit fester Breite oder variabel?

Zitat:

Zitat von unregiert (Beitrag 319689)
Für die Navigation: Eine Div-Box nehmen oder mit ul/li arbeiten?

Letzeres (und ohne umgebendes div).

unregiert 02.01.2007 21:08

b) Fester
c) Und wie erfolgt die Positionierung?

heiko_rs 02.01.2007 21:11

Bei fester Breite Navi & Content floaten und ihre Position jeweils per margin bestimmen.

info 02.01.2007 21:16

Zitat:

Zitat von unregiert (Beitrag 319689)
  • Wie schaffe ich es, abgerundete Ecken zu schaffen?

Hallo,

wenn es um abgerundete Rahmen geht, funktioniert auch folgendes:

Die folgenden Eigenschaften lassen den Netscape ab Version 6, Mozilla und firefox abgerundete Ecken darstellen:

* -moz-border-radius
* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright

Mit einer prozentualen oder eine Längenangabe legt diese Eigenschaften den Radius der Rundung fest. -moz-border-radius ist die Kurzform und steht für alle vier Ecken, die anderen Vier jeweils für eine Einzelne.

Den Rahmen legst Du wie gewohnt mit den Rahmeneigenschaften fest und fügst eine der Eigenschaften für die abgerundeten Ecken hinzu. Die Browser, die diese Eigenschaft nicht kennen, ignorieren die Angabe.
Browser

Alle Browser, außer Firefox, Mozilla und Netscape, zeigen normale eckige Rahmen an, deshalb ist der Einsatz kein Problem


Quelle: CSS 4 You - The Finest in Stylesheets

unregiert 02.01.2007 21:18

Hmm, aber Moment.
Eine "Allgemeine" Div-Box machen, die in die Mitte setzen (wie^^?) und Menü & Content rein. Dann die Allgemeine Div-Box margin-left: -(Anzahl Pixel, die das Menü braucht);?

heiko_rs 02.01.2007 21:21

Zitat:

Zitat von info (Beitrag 319694)
Die folgenden Eigenschaften lassen den Netscape ab Version 6, Mozilla und firefox abgerundete Ecken darstellen

Und mit dieser (leider) stark eingeschränkten Gruppe hat sich diese Methode auch bereits wieder erledigt. Außerdem gibt's dabei kein Anti-Aliasing.

info 02.01.2007 21:25

Zitat:

Zitat von heiko_rs (Beitrag 319696)
Und mit dieser (leider) stark eingeschränkten Gruppe hat sich diese Methode auch bereits wieder erledigt.

So sehe ich das auch. Ich wollte es mal einsetzen, habe es dann aber wieder verworfen, weil die Seite (bei verschiedenen Browern) möglichst gleich aussehen soll. Aber wenn jemand danach fragt; ein entsprechender Hinweis steht ja dabei.

heiko_rs 02.01.2007 21:40

Zitat:

Zitat von unregiert (Beitrag 319695)
Eine "Allgemeine" Div-Box machen, die in die Mitte setzen (wie^^?) und Menü & Content rein. Dann die Allgemeine Div-Box margin-left: -(Anzahl Pixel, die das Menü braucht);?

Der Header nimmt die volle Breite ein, und darunter floaten Navi & Content jeweils links (Position per margin bestimmen). Um Float-Drops bei kleinem Browser-Fenster zu vermeiden, kannst Du um Navi & Content noch ein div legen.

Falls Du Dir dieses div auf jeden Fall sparen möchtest, kann ich Dir noch eine entsprechende Alternative nennen (ist aber relativ mühsam, da der IE 5/6 min-width nicht unterstützt und daher mit relativ stark geändertem CSS vom Float-Drop abgehalten werden muß).

unregiert 02.01.2007 21:57

Kannst du mir noch etwas zu abgerundeten Ecken geben?
Bei meinem Fall (feste grösse), sollte das wohl so gehen:

(Content-Box):
PHP-Code:

<style>
#content-bottom
{
  
/* ?? */
}
#content-top
{
  
background-imageurl(/* url */);
  
background-color#000000;
}
</
style>
<
div id="content-bottom">
  <
div id="content-top">
    
hallo!
  </
div>
</
div

Aber wie würde ich jetzt den Background für die content-bottom Box "unten" starten?


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:31 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022