zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Frage zum Aufbau eines Layouts

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2005, 22:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2005
Beiträge: 9
Flex32 befindet sich auf einem aufstrebenden Ast
Standard Frage zum Aufbau eines Layouts

Hallo erstmal,

ich möchte dieses Layouthttp://flex.modx.de/test.jpg komplett mit css und xhtml erstellen, was Neuland für mich ist da ich vorher mit tabellen und html gearbeitet ahbe..aber gut man ist ja lernwillig.

Meine Fragen:
Wie soll ich das von der struktur aufbauen:
Ich dachte an je ein div wo der hellgraue, der graue und wieder der hellgraue bereich samt submenü liegen.
joa das leftmenü in ein eigenes div unsw...ist das richtig so?

zweite frage: die blauen balken wo der menüpunkt drinn steht sollen exakt untereinander platziert werden, wie mache ich das ich habe bis jetzt zwischen den einzelnen menüpunkten immer einen abstand gehabt

kennst jemand ausser selfhtml noch ein paar tutorials zum einstieg mit xhtml und css?

bin für alle antworten dankbar
gruß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.11.2005, 09:51
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Google mal nach css templates.

Ansonsten: css4you.de

Bei Dir scheints ein Zweispalter sein zu können, evtl. ein Dreispalter.

Header
Linke Spalte - die mit dem Menü.
Für das Menü brauchst Du kein extra Div, das geht in eine Liste ul.
Rechte Spalte - der Rest.
Evtl. ganz rechte Spalte - falls auswahlmenü da rüber rutscht.

Abstände generell auf Null setzen mit dem Universalselektor:
im CSS
Code:
 * { margin: 0; padding: 0; }
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.11.2005, 14:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

So ganz verstehe ich ehrlicherweise die Beschreibung vom Flex32 nicht (Tipp: Vernünftige deutsche Sätze mit Interpunktion und Großschreibung würden da helfen ). Auch bin ich nicht sicher welches der beiden Menü das Submenü sein soll.

Ansonsten sehe ich da keine Spalten. Das sind vier Elemente (Logo, Kopfmenü, Hauptmenü, Content) mti einsprechenden Margins:

Pseudocode:
Code:
<div id="Logo"></div>
<div id="kopmenue" style="margin-left: (hell-grauer Rand  links); margin-right: (hell-grauer Rand rechts);">
   <ul style="background-color: (dunkel-grau)";>[/list]</div>
<div id="hauptmenue" style="background: (hell-blau) (Bild) no-repeat (linke Pos=Breite Hauptmenue + hellgrauer Rand links) top">
   <ul style="width: (feste Breite in em)">[/list]</div>
<div id="outerContent" style="margin-left: (Breite Hauptmenue + hellgrau links); margin-right: (hell-grauer Rand rechts)"> 
   <div id="content"></div>
</div>
ich bin zwar kein Designer, aber IMHO geht da durch die riesigen grauen Ränder viel Platz verloren - insbesondere wenn das Layout eine fixe Breite hat wonach es aussieht.

Robin
Mit Zitat antworten
  #4 (permalink)  
Alt 14.11.2005, 23:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2005
Beiträge: 9
Flex32 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von RoToRa
Pseudocode:
Code:
<div id="Logo"></div>
<div id="kopmenue" style="margin-left: (hell-grauer Rand  links); margin-right: (hell-grauer Rand rechts);">
   <ul style="background-color: (dunkel-grau)";>[/list]</div>
<div id="hauptmenue" style="background: (hell-blau) (Bild) no-repeat (linke Pos=Breite Hauptmenue + hellgrauer Rand links) top">
   <ul style="width: (feste Breite in em)">[/list]</div>
<div id="outerContent" style="margin-left: (Breite Hauptmenue + hellgrau links); margin-right: (hell-grauer Rand rechts)"> 
   <div id="content"></div>
</div>

Code:
<div id="kopmenue" style="margin-left: (hell-grauer Rand  links); margin-right: (hell-grauer Rand rechts);">
   <ul style="background-color: (dunkel-grau)";>[/list]</div>

wo kann ich den da steuern wie groß der Bereich von dem linken hellgrauen und der des Dunkelgrauen werden soll?

Desweiteren ist zwischen den einzelnen div´s ein großer Abstand obwohl ich in der css-definition margin:0px; padding:0px; sage


gruß
Mit Zitat antworten
  #5 (permalink)  
Alt 15.11.2005, 17:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Flex32
wo kann ich den da steuern wie groß der Bereich von dem linken hellgrauen und der des Dunkelgrauen werden soll?
Tut mir leid, aber die Frage verstehe ich nicht.

Zitat:
Desweiteren ist zwischen den einzelnen div´s ein großer Abstand obwohl ich in der css-definition margin:0px; padding:0px; sage
Zeig mal eine URL von was du schon hast.

Robin
Mit Zitat antworten
  #6 (permalink)  
Alt 15.11.2005, 21:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2005
Beiträge: 9
Flex32 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von RoToRa
Zitat:
Zitat von Flex32
wo kann ich den da steuern wie groß der Bereich von dem linken hellgrauen und der des Dunkelgrauen werden soll?
Tut mir leid, aber die Frage verstehe ich nicht.

Zitat:
Desweiteren ist zwischen den einzelnen div´s ein großer Abstand obwohl ich in der css-definition margin:0px; padding:0px; sage
Zeig mal eine URL von was du schon hast.

Robin
na wo stelle ich ein wie groß der Hellgraue Rand rechts und der hellgraue rand links ist?
Mit Zitat antworten
  #7 (permalink)  
Alt 16.11.2005, 11:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
na wo stelle ich ein wie groß der Hellgraue Rand rechts und der hellgraue rand links ist?
Da wo "(hell-grauer Rand links)" und "(hell-grauer Rand rechts)" steht.

Robin
Mit Zitat antworten
  #8 (permalink)  
Alt 16.11.2005, 22:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2005
Beiträge: 9
Flex32 befindet sich auf einem aufstrebenden Ast
Standard

und wie bekomme ich jetzt zb den grünen balken im content hin? als neues div?

edit: kann mir vll mal jemand die grobe struktur aufzeichen, ich bekomme das nicht so ganz hin
Mit Zitat antworten
  #9 (permalink)  
Alt 16.11.2005, 22:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Flex32
und wie bekomme ich jetzt zb den grünen balken im content hin? als neues div?
Welcher grüne Balken?
Vielleicht ein border?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.11.2005, 22:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2005
Beiträge: 9
Flex32 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca
Zitat:
Zitat von Flex32
und wie bekomme ich jetzt zb den grünen balken im content hin? als neues div?
Welcher grüne Balken?
Vielleicht ein border?
den grünen balken im content (siehe mein enwurf in post 1)
kann mir vll mal jemand die grobe struktur aufzeichen, ich bekomme das nicht so ganz hin
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
Frage zur Umsetzung meines Layouts? Geht das überhaupt was ich möchte? Delysid-25 CSS 4 18.03.2009 09:07
Script Aufbau Frage (Generell) dan_23 Serveradministration und serverseitige Scripte 2 10.07.2008 14:43
Skript Aufbau Frage ? dan_23 Serveradministration und serverseitige Scripte 9 14.03.2008 01:01
Aufbau frage drumrumschreiben? xero CSS 1 06.07.2007 21:19
Aufbau Frage xero CSS 13 23.05.2007 16:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:29 Uhr.