zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Brauche Hilfe für Design

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.03.2012, 18:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Standard Brauche Hilfe für Design

Hallo Gemeinde!

Ich möchte eine neue Website erstellen, welche sich an jede Browsergröße anpassen soll.

Hier ein Beispiel wie es aussehen soll:


Erklärung:

DIV links: Feste Breite, aber flexible Höhe
DIV mitte: Flexible Höhe und flexible Breite
DIV rechts-oben: Feste Breite und Feste Höhe
DIV rechts-mitte: Feste Breite aber flexible Höhe
DIV rechts-unten: Feste Breite und Feste Höhe
DIV mitte-unten: Feste Höhe aber flexible Breite

Kann mir da mal jemand Helfen?
Mit Tabellen wäre das schnell gelöst, aber is halt ein veraltetes System...

Vielen Dank auf jeden Fall im Vorhinein!

LG,
Machomaaan
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.03.2012, 20:00
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von machomaaan Beitrag anzeigen
Ich möchte eine neue Website erstellen, welche sich an jede Browsergröße anpassen soll.
Das ist möglich, aber dir ist klar, dass das nicht sinnvoll ist?

Für besonders kleine oder große Größen eignen sich vielmehr spezialisierte Stylesheets, die mit Hilfe von Media Queries angewendet werden.

Komplexe Layouts wie dieses zeigen auf kleinen Ausgabegeräten ihre Starrheit.

Zitat:
Zitat von machomaaan Beitrag anzeigen
Kann mir da mal jemand Helfen?
Mit Tabellen wäre das schnell gelöst, aber is halt ein veraltetes System...
Wie soll diese Hilfe aussehen?

Ich bezweifle, dass das Nutzen der tabellaren Darstellung hier besonders effizient wäre. Zudem sind weder Tabellen noch tabellarische Darstellung in irgendeiner Art und Weise veraltet. Wenn du allerdings der Meinung bist, dass Tabellen nicht mehr zur Darstellung nicht-tabellarischer Daten genutzt werden sollten, hast du nur bedingt Recht: Das hätte nie der Fall sein dürfen.

Zitat:
Zitat von machomaaan Beitrag anzeigen
DIV mitte: Flexible Höhe und flexible Breite
Leider hast du ein paar Angaben vergessen: Soll das Gesamtkonstrukt 100% Höhe und Breite des Anzeigebereichs einnehmen und daher nur der Mittelteil scrollbar sein?

Oder soll stattdessen das Gesamtkonstrukt mit dem Inhalt von mitte-oben wachsen, so dass die unteren Bereiche erscrollt werden müssen, während der Mittelteil immer genug Platz für seine Inhalte hat?

Beides ist nur mit exzessivem Einsatz von absoluter Positionierung möglich und daher sehr fragil.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2012, 20:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Standard

Hallo gato,

vielen Dank erstmal für deine Antwort!

Ich habe noch nie mit Media Queries gearbeitet.

So sollte der Hintergrund letztendlich aussehen:


Wie realisiere ich das am Besten, damit es bei allen Browsern möglichst gleich aussieht?

Momentan ist diese Seite 800px Breit und ist Mittig-Oben ausgerichtet!
Wenn man allerdings einen rießigen Bildschirm mit hoher Auflösung hat, dann sieht das überhaupt nicht gut aus

LG
Mit Zitat antworten
  #4 (permalink)  
Alt 30.03.2012, 20:46
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von machomaaan Beitrag anzeigen
So sollte der Hintergrund letztendlich aussehen:
Hm, das ist schon was ganz anderes, als du zuerst beschrieben hast.

Zitat:
Zitat von machomaaan Beitrag anzeigen
Wie realisiere ich das am Besten, damit es bei allen Browsern möglichst gleich aussieht?
Das sollte nicht sehr schwer sein, wenn du nicht zu kompliziert Denkst.
Die seitlichen Schattierungen kannst du mit einem zentrierten Hintergrundbild lösen.

Die Aufteilung zwischen Inhaltsbereich und Seitenstreifen sollte mit Faux Columns lösbar sein (siehe FAQ). Der Footer sollte mit "Footer Stick Alt" (siehe ebenfalls FAQ) lösbar sein.

Bedenke, dass der Footer durchaus die volle Breite einnehmen darf. Überschneidungen verhinderst du, indem du seitliche Außenabstände nutzt.

Wenn dir diese Art des Arbeitens noch Schwierigkeiten bereitet, rate ich, ein Standardwerk wie Little Boxes durchzuarbeiten um eine solide Grundlage zu erhalten.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.03.2012, 16:46
Benutzer
neuer user
 
Registriert seit: 15.10.2005
Beiträge: 73
netinja befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von machomaaan Beitrag anzeigen
Momentan ist diese Seite 800px Breit und ist Mittig-Oben ausgerichtet!
Wenn man allerdings einen rießigen Bildschirm mit hoher Auflösung hat, dann sieht das überhaupt nicht gut aus

LG
Hallo,

Du könntest dem umfassenden Div statt starrer 800px, eine variable Breite geben, zb so:

#wrapper {
width: 60em;
min-width: 700px;
max-width: 95%; }

Damit hättest du ein Layout, was bei vielen Browserbreiten gut aussieht.
Der Nachteil wäre aber, dass du den Tipp von gato

Zitat:
Zitat von gato Beitrag anzeigen
Die seitlichen Schattierungen kannst du mit einem zentrierten Hintergrundbild lösen.
nicht mehr verwenden könntest, da hierfür ein starres Layout notwendig ist.

LG
Netinja
Mit Zitat antworten
  #6 (permalink)  
Alt 31.03.2012, 21:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Standard

Hallo Leute!

Vielen Dank für eure Tipps und Infos!

Ich wollte jetzt mal die Seite einfach etwas Breiter machen (1000px) und in der Höhe variable!
Das mit der Höhe, und damit der Footer immer am Boden bleibt habe ich mit einem Wrapper gelöst!

Die rechte Spalte wird jedoch mittels float:right rechts im Container ausgerichtet und wenn der text in einen der Divs im rechten DIV länger ist, dann fährt das irgendwann hinter dem Footer nach unten vorbei.

Ich bin echt am verzweifeln.
Kann mir jemand mal ein einfaches Grundgerüst erstellen?
Vielen Dank im Vorhinein.
Mit Zitat antworten
  #7 (permalink)  
Alt 31.03.2012, 21:37
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von machomaaan Beitrag anzeigen
Die rechte Spalte wird jedoch mittels float:right rechts im Container ausgerichtet und wenn der text in einen der Divs im rechten DIV länger ist, dann fährt das irgendwann hinter dem Footer nach unten vorbei.
Wenn du uns zeigst, wie du es aktuell gelöst hast (Online-Beispiel!), dann können wir dir sagen wo der Fehler liegt. Dann muss man keine Lösung erraten.

Alternativ kannst du dich gleich darüber schlau machen, wie float und clear funktionieren, da liegt nämlich aller Wahrscheinlichkeit der Hund begraben
Mit Zitat antworten
  #8 (permalink)  
Alt 01.04.2012, 13:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Also hier das Design.

Das Float wieder beenden habe ich auch an diversen Stellen versucht, ändert sich aber nichts!

Vielleicht kannst du mir auch noch sagen, wie ich den Text im Footer unten zentriert im schwarzen Bereich hinbekomme?
Wenn ich ein Margin in der Breite des rechten orangenen Bildes eingebe, funktioniert es nicht?

Und im Allgemeinen, passt du Struktur der CSS Datei? Bei der ersten Seite habe ich extrem viele DIV's verwendet und für jeden Style praktisch ein eigenes DIV angelegt -> Was ja kompletter Unsinn ist, denke ich mal

Danke auf jeden Fall schon einmal.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.04.2012, 13:37
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Warum denn nicht gleich so
Zitat:
Zitat von machomaaan Beitrag anzeigen
Das Float wieder beenden habe ich auch an diversen Stellen versucht, ändert sich aber nichts!
clear funktioniert nicht bei absolut positionierten Elementen. Wenn du bei #footer die Angabe position: absolute; weglässt und bei #content die Angabe min-height 100%, löst sich dein Problem.

Zitat:
Zitat von machomaaan Beitrag anzeigen
Vielleicht kannst du mir auch noch sagen, wie ich den Text im Footer unten zentriert im schwarzen Bereich hinbekomme?
Wenn ich ein Margin in der Breite des rechten orangenen Bildes eingebe, funktioniert es nicht?
Margin ist hier nicht sinnvoll, weil du ja deinen Hintergrund beibehalten willst (margin ist immer transparent - Grundlagenwissen).

Wenn ich bei #footer die Angabe zu width weglasse (da unnötig) und padding-right: 280px; festlege, kann ich auch die Inhalte von #footer zentrieren.

Zitat:
Zitat von machomaaan Beitrag anzeigen
Und im Allgemeinen, passt du Struktur der CSS Datei? Bei der ersten Seite habe ich extrem viele DIV's verwendet und für jeden Style praktisch ein eigenes DIV angelegt -> Was ja kompletter Unsinn ist, denke ich mal
Die CSS-Datei ist recht unübersichtlich.

div-Elemente haben nichts mit CSS zu tun Für den Anfang ist das HTML-Gerüst schon brauchbar. Wenn du mehr Erfahrung hast, wird sich die Zahl der div-Elemente und der IDs und Klassen noch weiter verringern. Du solltest dich aktuell noch mehr mit den Grundlagen beschäftigen.

Dein Quelltext insgesamt ist noch recht aufgebläht (zahlreiche meta-Elemente die keine Auswirkung haben) und etwas fehlerhaft. Nutze den Validator.

Da sich deine Seite im Aufbau befindet solltest du in der Dokumenttypangabe die Variante Strict anstatt Transitional verwenden (oder gleich den HTML5-Doctype verwenden).

meta- und link-Elemente solltest du selbstschließend notieren, z.B.
HTML-Code:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- anstelle: -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.04.2012, 09:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Standard

Hey Gato!

Vielen Dank für die Tipps und Infos!
Werde es heute Abend gleich mal ausprobieren.
Vielen Dank auch für die Tipps mit den Meta-Tags!

Besten Dank und ich melde mich wieder, wenns was News gibt

LG
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
Brauche Hilfe, Tabelle + CSS D3r-Tot (X)HTML 3 02.08.2010 16:43
Brauche hilfe zu vhost.conf bei einem Apache debian vServer onkel-tom Serveradministration und serverseitige Scripte 5 16.11.2008 13:42
HILFE, ich brauche Hilfe von Profis! frambuesa CSS 13 13.06.2008 23:46
brauche hilfe bei design hyperterminal CSS 10 10.03.2005 16:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:20 Uhr.