zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie aufbauen? Menü neben Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.01.2007, 20:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 4
unregiert befindet sich auf einem aufstrebenden Ast
Standard 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 .



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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.01.2007, 21:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von unregiert Beitrag anzeigen
Wie schaffe ich es, abgerundete Ecken zu schaffen?
Per Grafik, die einem geeigneten Element als Hintergrund zugewiesen wird.

Zitat:
Zitat von unregiert Beitrag anzeigen
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 anzeigen
Für die Navigation: Eine Div-Box nehmen oder mit ul/li arbeiten?
Letzeres (und ohne umgebendes div).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.01.2007, 21:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 4
unregiert befindet sich auf einem aufstrebenden Ast
Standard

b) Fester
c) Und wie erfolgt die Positionierung?
Mit Zitat antworten
  #4 (permalink)  
Alt 02.01.2007, 21:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Bei fester Breite Navi & Content floaten und ihre Position jeweils per margin bestimmen.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.01.2007, 21:16
info
Gast
 
Beiträge: n/a
Standard

Zitat:
Zitat von unregiert Beitrag anzeigen
  • 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
Mit Zitat antworten
  #6 (permalink)  
Alt 02.01.2007, 21:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 4
unregiert befindet sich auf einem aufstrebenden Ast
Standard

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);?
Mit Zitat antworten
  #7 (permalink)  
Alt 02.01.2007, 21:21
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von info Beitrag anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 02.01.2007, 21:25
info
Gast
 
Beiträge: n/a
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.01.2007, 21:40
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von unregiert Beitrag anzeigen
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ß).
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.01.2007, 21:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 4
unregiert befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55
Vertikale Navigation: IE6 - Whitespace-Bug? b.erry CSS 6 12.02.2009 16:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:08 Uhr.