mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 20:35 Benutzername: Passwort: Auto-Login

Thema: Frage zu CSS und Tabellenfreiem Layout vom 13.02.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Frage zu CSS und Tabellenfreiem Layout
Seite: 1, 2  Weiter
Autor Nachricht
Juggalo4u
Threadersteller

Dabei seit: 22.11.2006
Ort: Plauen
Alter: -
Geschlecht: Männlich
Verfasst Fr 13.02.2009 13:44
Titel

Frage zu CSS und Tabellenfreiem Layout

Antworten mit Zitat Zum Seitenanfang

Ja, ich beschäftige mich gerade intensiv mit dem Thema und getreu dem Motto "Learning by rumquäling" Menno!
hab ich einfach mal versucht was umzusetzen und stoße auf paar kleine Probleme bzw. Fragen wo ich momentan nicht weiter komme.

http://sam-online.de/css-test/css_test.html <-- so schauts aus

und hier mein aktuelles css:

Code:

/*body */

body { background: #000; padding: 0px; margin: 0px;}

/* umschliessendes Div */

#page {
   width: 980px; 
   min-width: inherit;
   max-width: none;
   background: #fff;
   padding: 0px;
   margin: 0px;
   }
   
/* aufteilung in 2 Hauptspalten */
   
#linke_spalte {
   width: 735px;
   position: absolute;
  left: 0px; top: 0px;
   background: #ffffff;
   padding: 0px;
   margin: 0px;
   }
   
#rechte_spalte {
   width: 245px;
   position: absolute;
  left: 735px; top: 0px;
   background: #40a3ad;
   padding: 0 0 0 0;
   margin: 0 0 0 0;
   }
   
/* elemente der linken spalte */

#top_navigation {
   width: 735px;
   height: 65px;
   position: relative;
  left: 0px; top: 0px;
   background: #ffffff;
   padding: 0px;
   margin: 0px;
   }      

#header {
   width: 735px;
   height: 200px;
   position: relative;
  left: 0px; top: 0px; 
   background: #c8e9ed;
   padding: 0px;
   margin: 0px;
   }      

#breadcrumb_navigation {
   width: 735px;
   height: 28px;
   position: relative;
  left: 0px; top: 0px; 
   background: #cccccc;
   padding: 0px;
   margin: 0px;
   }
   
#main {
   width: 735px;
   position: relative;
  left: 0px; top: 0px; 
   background: #ffffff;
   padding: 0px;
   margin: 0px;
   }   
   
/* unterelemente von main */

#main_content {
   width: 490px;
   position: relative;
  left: 0px; top: 0px; 
   background: #ffffff;
   padding: 0px;
   margin: 0px;
   }
   
#main_navigation {
   width: 245px;
   position: absolute;
  left: 490px; top: 0px; 
   background: #e2001a;
   padding: 0px;
   margin: 0px;
   }                  
   
/* ende unterelemente von main */

#footer {
   width: 735px;
   position: relative;
  left: 0px; top: 0px; 
   background: #cccccc;
   padding: 0px;
   margin: 0px;
   }   
   
/* unterelemente von footer */

#footer_links {
   width: 245px;
   position: absolute;
  left: 0px; top: 0px; 
   background: #c6f2b1;
   padding: 0px;
   margin: 0px;
   }
   
#footer_mitte {
   width: 245px;
   position: absolute;
  left: 245px; top: 0px; 
   background: #96c67f;
   padding: 0px;
   margin: 0px;
   }         

#footer_rechts {
   width: 245px;
   position: absolute;
  left: 490px; top: 0px; 
   background: #527c3e;
   padding: 0px;
   margin: 0px;
   }   
/* ende unterelemente von footer */

#credits {
   width: 735px;
   position: relative;
  left: 0px; top: 0px; 
   background: #eda2a7;
   padding: 0px;
   margin: 0px;
   }   

/*ende linke spalte */

/* elemente rechte spalte */

/* ende elemente rechte splate */


Mein Ansatz:

- erstmal in 2 Spalten aufteilen: links und rechts
- linke Spalte: Topnavi -darunter Header -darunter Breadcrumpnavi -darunter Main - darunter Footer -darunter Credits
- Main ist nochmal unterteilt in Content und Hauptnavi
- Footer nochmal unterteil in 3 Spalten

Nun zu meinen Fragen/Problemen:

1. Bin ich Grundsäztlich auf dem richtigen Weg oder ist mein Ansatz ganz falsch?
2. Wie bekomme ich es hin das die Linke und Rechte Spalte die gleiche Höhe haben?
... das gleiche Problem hab ich ja dann auch im Mainbereich mit Content und Hauptnavi
3. Der Bereich "Credits" legt sich momentan über den Footer, wo liegt das Problem ?

Danke schonmal für euer Hilfe ... mfg Juggalo
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 13.02.2009 13:49
Titel

Re: Frage zu CSS und Tabellenfreiem Layout

Antworten mit Zitat Zum Seitenanfang

Juggalo4u hat geschrieben:
2. Wie bekomme ich es hin das die Linke und Rechte Spalte die gleiche Höhe haben?
... das gleiche Problem hab ich ja dann auch im Mainbereich mit Content und Hauptnavi


http://www.google.de/search?q=faux+columns
http://www.google.de/search?q=equal+height+columns
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Fr 13.02.2009 14:29
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.positioniseverything.net/
  View user's profile Private Nachricht senden
Juggalo4u
Threadersteller

Dabei seit: 22.11.2006
Ort: Plauen
Alter: -
Geschlecht: Männlich
Verfasst Fr 13.02.2009 14:48
Titel

Antworten mit Zitat Zum Seitenanfang

Danke schonmal für die schnellen Infos ...
  View user's profile Private Nachricht senden
Juggalo4u
Threadersteller

Dabei seit: 22.11.2006
Ort: Plauen
Alter: -
Geschlecht: Männlich
Verfasst Fr 13.02.2009 16:28
Titel

Antworten mit Zitat Zum Seitenanfang

Ich denke mal ich bin jetzt schon einige Schritte vorwärtsgekommen.
Vor allem auch was aufgeräumte Quellcode im Stylesheet betrifft *ha ha*

Das schaut jetzt so aus:

Code:

body { background: #000; padding: 0px; margin: 0px;}


#container { overflow: hidden; }
#container div { float: left; padding-bottom: 2000px; margin-bottom: -2000px;}
#container .links { width: 735px; background: #FFFFFF;}
#container .rechts { width: 245px; background: #406096}

#leftcontainer { overflow: hidden; }
#leftcontainer div { width: 735px;}
#leftcontainer .topnavi { height: 65px; background: #FFFFFF; margin-top: 0px;}
#leftcontainer .header { height: 367px; background: #CCCCCC; margin-top: 0px;}   
#leftcontainer .breadcrump { height: 28px; background: #DAFFFA; margin-top: 0px;}
#leftcontainer .main { background: #FFFFFFß; margin-top: 0px;}

#maincontainer { overflow: hidden; }
#maincontainer div { float: left; background: #fff; padding-bottom: 2000px; margin-bottom: -2000px;}
#maincontainer .content { width: 490px;}
#maincontainer .hauptnavigation { width: 245px; background: #E2001A}

#footerncontainer { overflow: hidden; }
#footercontainer div { float: left; background: #fff; width: 245px; padding-bottom: 2000px; margin-bottom: -2000px;}
#footercontainer .flinks {background: #c6f2b1}
#footercontainer .fmitte {background: #96c67f}   
#footercontainer .frechts {background: #527c3e}

#globalfooter { overflow: hidden;}
#globalfooter div {clear: both;}
#globalfooter .gflinks { background: #FFFFFF; width: 980px; height: 25px;}


Und bringt mich zu diesem Ergebnis: http://www.sam-online.de/css-test/css_test2.html

Im IE schon mal ganz zufriedenstellend, der Firefox macht aber irgendwie immer nen Abstand nach oben und unten in die Container.

Edit: : Noch ein Problem was bei beiden Browsern auftritt: Verkleinert man das Browserfenster springt irgendwann die Rechte Spalte nach links unten.

Jemand noch eine Idee oder den entscheidenden Tip???

Danke schonmal im Voraus


Zuletzt bearbeitet von Juggalo4u am Fr 13.02.2009 16:41, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 13.02.2009 16:38
Titel

Antworten mit Zitat Zum Seitenanfang

Auf die Schnelle:

Code:
* {
   margin:0;
   padding:0;
}


Und such mal nach "css reset" um zu erfahren worum es geht usw.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Fr 13.02.2009 16:40
Titel

Antworten mit Zitat Zum Seitenanfang

du kannst im vorfelde mal ein wenig "reseten":


Code:

* { margin: 0; padding 0}

ganz an den anfang...

desweiteren haste noch n BOM im quelltext des css... so siehts bei dir
aus:

Code:

@charset "UTF-8"; 



edit: ohhh, dieser doofe m ey!!! Mädchen!


Zuletzt bearbeitet von pixelpapst303 am Fr 13.02.2009 16:43, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Juggalo4u
Threadersteller

Dabei seit: 22.11.2006
Ort: Plauen
Alter: -
Geschlecht: Männlich
Verfasst Fr 13.02.2009 16:48
Titel

Antworten mit Zitat Zum Seitenanfang

* Ich bin unwürdig * Coole Sache

Ich mein mir raucht der Kopf *Whaazzzz uppp?* , aber ich bin begeistert was man mit vernünftiger Formatierung
an Ergebnissen und vor allem mit wie wenig Quelltext erzielen kann ...
  View user's profile Private Nachricht senden
 
Ähnliche Themen Allgemeine Frage zu Photoshop-Layout für CMS
Grundlegende Frage einer DreamW Homepage mittels PS Layout
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
Rechtliche Frage bzw. einfach ne Frage :)
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.