Flexibles CSS Homepage Design

[kingofrap]

Guten Abend,

habe mal ne Frage.

Möchte eine einfache Homepage mit flexiblen Containern machen habe aber keine Ahnung wie ich das flexibel hinbekomme.

Es sollte folgendermaßen aussehen:

wie diese Seite:

http://www.ssi-developer.net/main/templates/3col.shtml

Es sollten einen outer geben der ein Bild hat.

Dann oben einen header. Dadrunter mit etwas abstand ein horizontales Menü mit Listen was flexibel ist.
Dadrunter direkt den content Bereich mit den Inhalten.
Der header und der content sollten sich in der Breite an die Menübreite anpassen.

Wäre sehr nett wenn mir eienr eine seite nennen kann wo es ein tutorial dazu gibt oder mir dabei helfen kann weil meine aktuelle seite so viele fehler beinhaltet das ich eine neué, flexible seite dem abändern vorziehe.

MFG Daniel

P.S. Es sollte im endeffekt aussehen wie donrather.funpic.de nur hallt flexibel.

[Engin]

Hi,

Möchte eine einfache Homepage mit flexiblen Containern machen habe aber keine Ahnung wie ich das flexibel hinbekomme.

Am besten grössenangaben wie px in em vorgeben.

Es sollte folgendermaßen aussehen:

wie diese Seite:

http://www.ssi-developer.net/main/templates/3col.shtml

Schreibst doch genug hier mit ;-).

Wie das 3col bespiel oder wie SSI-Developer?

Es sollten einen outer geben der ein Bild hat.

Was ist ein outer?

Wäre sehr nett wenn mir eienr eine seite nennen kann wo es ein tutorial dazu gibt oder mir dabei helfen kann

hier werden sie doch immer geholfen, musst du nur ein Problem haben.

<Hakan>hast du Problem?</Hakan>

Grüße,
Engin
 GYRO

[Ingo Turski]

Hi,

P.S. Es sollte im endeffekt aussehen wie donrather.funpic.de nur hallt flexibel.

schön, dass Du den weg hierhin gefunden hast. Aber was hast Du an http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal ff genau nicht verstanden, um Deine Navigation flexibel zu formatieren?

freundliche Grüße
Ingo

[kingofrap]

Hi,

Vielen Dank für den Link.
Es sieht jetzt so aus:

http://donrather.funpic.de

Nur wie man im firefox sieht ist es immer noch nicht das wahre weil es halllt nicht angezeigt wird wie es soll.

Im IE läufts aber leider immer noch nicht in eienr Zeile.

MFG Daniel

[Engin]

Hi,

http://donrather.funpic.de

Nur wie man im firefox sieht ist es immer noch nicht das wahre weil es halllt nicht angezeigt wird wie es soll.

Im IE läufts aber leider immer noch nicht in eienr Zeile.

Also ich weiss nicht wie du das schaffst, bei mir siehts in beiden Browsern recht gleich aus.

Grüße,
Engin
 GYRO

[kingofrap]

Hi,

ich habe den selben Quelltext bei mir eingebaut und wesentlich die Farben geändert aber trotzdem sieht das ganze jetzt bei mir in Beiden Brwosern verschieden und total durhcgewürfelt aus weil die Menüpunkte überall auf der Homepage verteilt sind.

MFG Daniel

[kingofrap]

Also wenn das jetzt ein flexibles Design ist weiß ich nicht warum mein voheriges nicht auch flexible war weil es genau SO aussah wie das heir jetzt auch.

Wenn man diesen ***** Fehler nicht rausbekommt sagt es mir eifnach dann amche ich kein horizontales Menü (Muss mein chef mit leben)weil ich jetzt wegen foren schon 5 mal neu nagefnagen habe und jedesmal sah das ergebnis genauso aus.

MFG Daniel

[Engin]

Hi Daniel,

Also wenn das jetzt ein flexibles Design ist weiß ich nicht warum mein voheriges nicht auch flexible war weil es genau SO aussah wie das heir jetzt auch.

Sorry, hatte vergessen die div- width und height angaben in em zu machen,
habe ich jetzt korrigiert,
schau dir nochmal mein beispiel im FF an, dann drückst du die Strg Taste auf deiner Tastatur
und drehst am Rad deiner Maus bei gedrückter Strg Taste.

Wenn man diesen ***** Fehler nicht rausbekommt sagt es mir eifnach dann amche ich kein horizontales Menü (Muss mein chef mit leben)weil ich jetzt wegen foren schon 5 mal neu nagefnagen habe und jedesmal sah das ergebnis genauso aus.

Also ich seh schon einen Unterschied zwischen dem, was du vorher hattest und wie es jetzt ist.

Grüße,
Engin
 GYRO

[kingofrap]

Hi,

Also je nachdem wie weit man zoomt rutsch das Menü wieder ein paar zeilen runter.

Köntest du mir die codepassagen die du geändert hat einzeln mal reinschreiben habe nämlich an der seite schon das css formatiert so das ich enen besseren überblick habe und möchte nicht alles durchsuchen.

Also an sich ist das so ja gut das sich die ganze seite gleichzeitig vergrößert.

Nur sollten jetzt wenn alle Links drinne sind alles gleichbreit sein.

MFg Daniel

[Engin]

Hi,

Also je nachdem wie weit man zoomt rutsch das Menü wieder ein paar zeilen runter.

Das versteht man unter Flexiblem Design.  ;-)

Köntest du mir die codepassagen die du geändert hat einzeln mal reinschreiben habe nämlich an der seite schon das css formatiert so das ich enen besseren überblick habe und möchte nicht alles durchsuchen.

Im wesentlichen habe ich nur die width und height geändert.

  
 .header {  
 width:57em;  
 height:3em;}  
  
 #Seite {  
    width: 57em;  
    height:30em;  
  }  
  
  #Inhalt {  
    width:18em;  
  }  

Also an sich ist das so ja gut das sich die ganze seite gleichzeitig vergrößert.

Nur sollten jetzt wenn alle Links drinne sind alles gleichbreit sein.

Da du ein Paar mehr Links hast, wie mein beispiel, ist das so ne Sache, alles gleich breit zu kriegen.

Du könntest aber ein Paar der verweise, z.b. Kontakt, Impressum und Partner
unter dem grossen Div Platzieren, so z.b..  (Das kann man natürlich hübscher machen, möchte dir aber den Spass nicht am formatieren vorenthalten ;-)

Grüße,
Engin
 GYRO

[kingofrap]

Hi,

Hi

Das versteht man unter Flexiblem Design.  ;-)

Nur das war doch auch ein Problem was ich vorher hatte also habe ich ja vorher auch ein flexibles Menü gehabt.

Da du ein Paar mehr Links hast, wie mein beispiel, ist das so ne Sache, alles gleich breit zu kriegen.

Du könntest aber ein Paar der verweise, z.b. Kontakt, Impressum und Partner
unter dem grossen Div Platzieren, so z.b..  (Das kann man natürlich hübscher machen, möchte dir aber den Spass nicht am formatieren vorenthalten ;-)

Ja wenn ich ein "Dropdown Menü" hinkriegen würde wo dann mehrere Punkte unter eienm Überpunbkjt ständen wäre das die Lösung die ich noch einsheen könnte.
Nur so ein Menü habe ich shconmal für meine eigene Seite probiert und nicht hinbekommen.
Bräuchte also wieder Hilfe.

MFG Daniel

P.S. Also die Probleme jetzt:

1. Die Höhé des Inhalts wird bei FF nicht angepasst.
2. Menü sollte bei jedem Browser und bei jeder Schrftgröße glöeich aussehen.
3. Die schrift sollte von der größe wie vorher sein.

[Struppi]

Im wesentlichen habe ich nur die width und height geändert.

.header {
width:57em;
height:3em;}

#Seite {
    width: 57em;
    height:30em;
  }

#Inhalt {
    width:18em;
  }

>   
  
Mit Breitenanagaben in em musst du zurückhaltend sein. Wenn es um den kompletten Inhalt geht ist diese Angabe nicht zu empfehlen, da es eben auch nicht flexibel ist, verwende dafür '%' dann passt sich die Anzeige ans Browserfenster an, dass ist dann flexibel.  
  
Struppi.

[Jonathan]

Hallo,

verwende dafür '%' dann passt sich die Anzeige ans Browserfenster an, dass ist dann flexibel.

Halte ich für nicht so toll.

Wenns zentriert sein soll, bin ich dann eher für sowas:

body {
margin:0 auto;
max-width: 45em; /* Maximalbreite um lesbarkeit bei großen Bilschirmen zu gewähleisten */
min-width: 350px; /* Minimalbreite, damit enthaltene Grafiken ordentlich angezeigt werden können und nicht aus der box "herausfließen" */
/* sonst einfach die ganze Viewportbreite nehmen, width braucht nicht angegeben zu werden */
}

Ohne Zentrierung genauso, nur ohne margin 0 auto;

Jonathan

[Struppi]

verwende dafür '%' dann passt sich die Anzeige ans Browserfenster an, dass ist dann flexibel.

Halte ich für nicht so toll.

Ich schon ;-)

Wenns zentriert sein soll, bin ich dann eher für sowas:

body {
margin:0 auto;
max-width: 45em; /* Maximalbreite um lesbarkeit bei großen Bilschirmen zu gewähleisten */
min-width: 350px; /* Minimalbreite, damit enthaltene Grafiken ordentlich angezeigt werden können und nicht aus der box "herausfließen" */
/* sonst einfach die ganze Viewportbreite nehmen, width braucht nicht angegeben zu werden */
}

Naja, ich bevorzuge eher sowas:

body{
margin: 0 2%;
}

Damit gewährleitest du zumindest immer ein halbwegs harmonisches Verhältnis und vermeidest Scrolbalken oder riesige leere Flächen.

Struppi.

[kingofrap]

hmm wem soll ich hier jetzt was glauben :D

Ich glaube ich gehe hin und mache jetzt erstmal die Seite soweit ich es schaffe weiter und dann oste ich sie nochmal mit Link hierher.

Dann könnt ihr mir direkt am eigenen Quelltext die Stellen sagen weil ich sonst keinen Plan habe wo ich genau noch was ändern muss.

MFG Daniel

[Struppi]

hmm wem soll ich hier jetzt was glauben :D

Wem du möchtest, dass ist eine Glaubensfrage.

Struppi.

[Ingo Turski]

Hi,

Vielen Dank für den Link.
Es sieht jetzt so aus:

http://donrather.funpic.de

das ist schon wesentlich besser als vorher.

Im IE läufts aber leider immer noch nicht in eienr Zeile.

auch im Firefox nichtm wenn die Febstewrbreite nicht ausreicht.
Verabschiede Dich davon, diese vielen Menüpunkte in einer Zeile unterzubringen - das geht einfach nicht immer. Sorge vielmehr dafür, dass sie ggfls. vernünftig umgebochen werden.

freundliche Grüße
Ingo

[kingofrap]

Hi,

Hi,

Verabschiede Dich davon, diese vielen Menüpunkte in einer Zeile unterzubringen - das geht einfach nicht immer. Sorge vielmehr dafür, dass sie ggfls. vernünftig umgebochen werden.

Wenn eine andere Lösung dann mit drop down bei vereinzelten Links.

Hast du eine idee wie ich die Links zusammenfassen kann also mit welchem überbegriffen

Und wäre nett wenn du oder ein anderer mir erklären könnte wie ich das amche weil ich das shcon soo oft probiert habe für andere seiten aber es nie geklappt hat.

MFG Daniel

[Engin]

Hi,

Und wäre nett wenn du oder ein anderer mir erklären könnte wie ich das amche weil ich das shcon soo oft probiert habe für andere seiten aber es nie geklappt hat.

Ich weiss ja nicht, wie du das ganze anpackst,
also warum es bei dir einfach nicht geht, bei mir (1)funkt es. ;-)

Grüße,
Engin
 GYRO

(1) ...(kommt nicht nochmal vor ;)

[kingofrap]

Hi,

Hi,

Ich weiss ja nicht, wie du das ganze anpackst,
also warum es bei dir einfach nicht geht, bei mir (1)funkt es. ;-)

Vielen Dank auf der Basis werde ich jetzt erstmal die komplette index.php datei schreiben und gestalten.
Wenn ich fertig bin melde ich mich vlt. nochmal wieder.

Ich mus mir jetzt nur erstmal gründlich überlegen welche Links ichmit dropdown mache und welche nicht.

Also mit welchem über- und unterpunkt  das mache.

Grüße,

Ich Grüße dich auch :D

Daniel

[Ingo Turski]

Hi,

Hast du eine idee wie ich die Links zusammenfassen kann also mit welchem überbegriffen

Du könntest zunächst schon mal Impressum und Kontakt zu einer Seite Kontakt zusammenfassen.

Und zur dynamischen Navigation: was genau hast Du bei http://de.selfhtml.org/css/layouts/navigationsleisten.htm#javascript nicht verstanden?

freundliche Grüße
Ingo

[kingofrap]

Hi,

Hast du eine idee wie ich die Links zusammenfassen kann also mit welchem überbegriffen
Du könntest zunächst schon mal Impressum und Kontakt zu einer Seite Kontakt zusammenfassen.

Werde ich denke ich mal so machen.

Und zur dynamischen Navigation: was genau hast Du bei http://de.selfhtml.org/css/layouts/navigationsleisten.htm#javascript nicht verstanden?

Mein Problem ist das es immer wenn ich es angepasst habe nicht mehr lief oder anders aussah.

Aber engin hat mir ja eins gebastelt.

freundliche Grüße

MFG Daniel

[kingofrap]

edit: in dem rechten div sollte immer was anderes stehen aber ich arbeite mit php also mache ich nicht jedesmal eine neues seite.

Deshalb nutzt dieses css für die aktuelle seite nicht.