zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Design Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2004, 21:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2004
Beiträge: 3
Hawklan befindet sich auf einem aufstrebenden Ast
Standard CSS Design Probleme

Also langsam habe ich von CSS echt die Schnauze voll...

Angesteckt von den überschwänglichen Beschreibungen auf dieversen "CSS Fanseiten" die hier sicher allseits bekannt sein dürften, dachte ich mir: Versuch ich also auch mal ein Design nur mit CSS.

Naja was soll ich sagen: jetzt sitze ich seit 3 Tagen an einem total billigen 08/15 Design, welches ich mit Tables in 15 Min gehabt hätte und renne von einem Problem ins nächste.

Was ich will: ein standard 760px breites und zentriertes Design.
Oben einen Header und darunter 2 Spalten: Menü und Contentbereich, die
bei wenig Content mindestens 100% Bildschirmhöhe füllen und sich bei mehr Content anpassen.

Was ich mir bisher hier aus dem Forum und von diversen anderen Seiten so angelesen hab lief schliesslich auf folgenden Code hinaus:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Reisen f&uuml;r Individualisten</title>
<style type="text/css">
<!--
html {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	text-align: center;
	background-color: #000000;
}

div#main {
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	width: 800px;
	height: 100%;
	border: 0px none;
	background: #FDFEEE url(images/menuback.gif) repeat-y;
}

html>body #main {
	height: auto;
	min-height: 100%;
}

div#header {
	margin: 0px;
	padding: 0px;
	width: 800px;
	height: 180px;
	border: 0px none;
	background: url(images/header.jpg);
}

div#menu {
	margin: 0px;
	padding: 50px 0px 0px 5px;
	width: 120px;
	float: left;
	border: 0px none;
	background: url(images/menutop.gif) no-repeat;
}

div#content {
	margin: 0px;
	padding: 0px;
	width: 670px;
	border: 0px none;
	background: #FDFEEE;
}
html>body #content {
	margin: 0px 0px 0px 130px;
}
-->
</style>

</head>

<body>

<div id="main">

<div id="header">

</div>

<div id="menu">
Home

Konzept

Kontakt


Reisegallerie

Reiseberichte

</div>

<div id="content">
content
</div>

</div>

</body>

</html>
Das macht in IE6, Opera7 und Firefox 0.8 genau das, was ich wollte und sieht so aus: http://www.gwb-reisen.de/design.html.
Soweit so gut...

Man erinnere sich: ich habe fast 3 Tage gebraucht um soweit zu kommen und die Freude war entsprechend gross, als es endlich klappte.
Dann füge ich arglos in den MenüDIV unterhalb der Links ein Bildchen ein und WUMMS im IE fliegt wieder alles auseinander !
Er zeigt Plötzlich den Content Bereich ganz links und unterhalb des Menüs an.

Was mache ich falsch ?!
Muss ich das ganze grundsätzlich anders aufbauen oder gibt es eine Möglichkeit das Problem zu umgehen.
Bin für jede Hilfe unendlich Dankbar.


Wenn das so weitergeht häng ich nämlich meine CSS Karriere wieder an den Haken und kehre zu den guten alten Tables zurück...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2004, 22:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 21.12.2003
Beiträge: 247
Björn befindet sich auf einem aufstrebenden Ast
Standard

Hallo, wie breit ist die Grafik, die das wieder zerschießt? Es könnte sein, dass sich dadurch der Navi-Div verbreitert, da sich die Grafik quasi den Platz nimmt. Da dein div#main auf 800px steht könnte es etwas eng werden. Dadurch wird dann der content nach/unter der Navi angezeigt, da er in der Breite nicht mehr genügend Platz hat. Auch padding und margin Angaben, werden teilweise unterschiedlich interpretiert bzw. verarbeitet. Siehe z.B. hier

Geb dem Navi-Div mal eine größere Breite und dem Content entsprechend weniger oder wenn möglich mach die Grafik weniger breit.

Übrigens, wenn Du vor hast, das Layout so zu optimieren, dass es auch bei 800*600 horizontal passt, solltest Du eine Gesamtbreite von nicht mehr als 760px vorsehen. Da z.B. auch Scrollbalken Platz beanspruchen.

Björn
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.08.2004, 10:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2004
Beiträge: 3
Hawklan befindet sich auf einem aufstrebenden Ast
Standard

Hallo Björn,

danke für den Hinweis mit der Breite des Bildes.
Daran hats natürlich gelegen.
Hätte ich wirklich auch selbst drauf kommen können aber ich war gestern nach dem vermeintlichen Erfolg und dem anschliessenden Misserfolg so frustriert, daß ich fürchte ich habe nicht mehr ausreichend nachgedacht und das Posting hier etwas voreilig geschrieben.
Sorry und nochmals Danke für den Tipp auch mit der Breite von 760 statt 800.

Wo ich meinen ganzen Source nun aber schon mal hier gepostet hab, würde ich gern die Gelegenheit nutzen 2 andere Fragen zu klären, die mir auf den Nägeln brennen. Und zwar geht es um die beiden Browserweichen, die ich drin hab.

Die erste html>body #main { height: auto; min-height: 100%; } dient natürlich dazu, die Mindesthöhe sowohl im IE wie auch in allen anderen Browsern zu realisieren. Den Tipp hab ich auch hier im Forum gefunden und damit kann ich grundsätzlich durchaus leben.
Allerdings erscheint mir so eine Weiche irgendwie nicht sonderlich guter Stil (wurde ja hier im Forum auch öfters schon Bemängelt).
Daher meine Frage dazu: kennt jemand da eine elegantere Methode, das mit der Mindesthöhe in allen Browsern umzusetzen?

Die zweite Weiche html>body #content { margin: 0px 0px 0px 130px; } ist eigentlich die seltsamere.
Wenn ich die nämlich nicht drin hab Zeigen sowohl Firefox wie auch Opera den Content Layer nicht rechts neben dem Menu Layer an, sondern ganz links am Rand, so daß der Menu Layer den Content Layer überlagert obwohl der Menu Layer doch eigentlich "floating: left" ist (wobei aber witzigerweise der Inhalt des Content Layers dort, wo der Menu Layer ist sehr wohl rechts vorbeifloatet und erst unterhalb des Menu Layers ganz nach Links rutscht).
Im Gegensatz zur ersten Weiche stört mich die hier ganz gewaltig, da mir das ziemlich schlampig getrickst vorkommt und ich auch keine logische Erklärung für das Verhalten von Firefox und Opera habe.
Kann mir da jemand sagen, woran das liegt und ob man das auch anders beheben kann?

Grüße,
Thomas
Mit Zitat antworten
  #4 (permalink)  
Alt 12.08.2004, 10:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Hawklan

Die erste html>body #main { height: auto; min-height: 100%; } dient natürlich dazu, die Mindesthöhe sowohl im IE wie auch in allen anderen Browsern zu realisieren. Den Tipp hab ich auch hier im Forum gefunden und damit kann ich grundsätzlich durchaus leben.
Allerdings erscheint mir so eine Weiche irgendwie nicht sonderlich guter Stil (wurde ja hier im Forum auch öfters schon Bemängelt).
Daher meine Frage dazu: kennt jemand da eine elegantere Methode, das mit der Mindesthöhe in allen Browsern umzusetzen?
Solange Du auf einer Mindesthöhe für alle Browser bestehst und den IE da nicht ausschließen willst, gibt es keine wirklich andere Methode. Es gibt noch ein paar andere "Browserweichen" für den IE, die man einsetzen könnte, aber die oben genannte ist valide.

Zitat:
Die zweite Weiche html>body #content { margin: 0px 0px 0px 130px; } ist eigentlich die seltsamere.
Wenn ich die nämlich nicht drin hab Zeigen sowohl Firefox wie auch Opera den Content Layer nicht rechts neben dem Menu Layer an, sondern ganz links am Rand, so daß der Menu Layer den Content Layer überlagert obwohl der Menu Layer doch eigentlich "floating: left" ist (wobei aber witzigerweise der Inhalt des Content Layers dort, wo der Menu Layer ist sehr wohl rechts vorbeifloatet und erst unterhalb des Menu Layers ganz nach Links rutscht).
Im Gegensatz zur ersten Weiche stört mich die hier ganz gewaltig, da mir das ziemlich schlampig getrickst vorkommt und ich auch keine logische Erklärung für das Verhalten von Firefox und Opera habe.
Kann mir da jemand sagen, woran das liegt und ob man das auch anders beheben kann?
*g*
- Die ist überhaupt nicht seltsam. Mozilla und Opera verhalten sich W3C- konform, der IE mal wieder nicht.
Bei float bleibt der nachfolgende Container an sich unberührt und liegt unter dem floatenden, nur der Text wird zur Seite gedrängt. Also muss man ein margin angeben, um den ganzen Container zur Seite zu rücken. Geht auch im IE - der allerdings läßt dann eine 3px breite Lücke.....
Andere Möglichkeit: beide Container floaten. Dann legen sie sich in allen Browsern nebeneinander (sogar im IE). Dabei kann der rechte sowohl mit float:right als auch mit float:left versehen werden (die stecken ja in einem übergeordneten Container. Hinterher nochmal clearen - sonst kommt der äußere Container nicht mit.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.08.2004, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2004
Beiträge: 3
Hawklan befindet sich auf einem aufstrebenden Ast
Standard

AH !

Danke für die Infos.
Insbesondere das mit dem Clearen war sehr interessant, da mir genau das Problem auch schon aufgefallen war wenn beide Container Floaten.
Da kann ich die Weiche ja schon wieder rausnehmen

Langsam schöpfe ich wieder Hoffnung für meine CSS Fähigkeiten

Grüße,
Thomas
Mit Zitat antworten
  #6 (permalink)  
Alt 12.08.2004, 12:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 21.12.2003
Beiträge: 247
Björn befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Langsam schöpfe ich wieder Hoffnung für meine CSS Fähigkeiten
Gut, genauso soll es auch sein Wäre ja ein Ding, wenn man Dich in diesem Forum nicht weiter für tabellenloses Layout gewinnen könnte. Mit den bisher gelösten Problemen hast Du auch schon einige "Klassiker" kennengelernt. Du wirst sehn, je vertrauter Du damit wirst, umso mehr wirst Du wissen und schätzen, was Du an CSS und validem Code hast.

Björn
Mit Zitat antworten
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
CSS für Firefox, IE, Opera Probleme - Browserweiche talkuvit CSS 4 31.10.2009 19:07
Probleme mit Design Cybertronic CSS 4 27.08.2009 09:31
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
Problem mit float beim CSS Design GLURAK CSS 2 14.05.2005 20:08
Probleme Tabellenloses Design mit css wingman CSS 3 21.08.2004 16:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:53 Uhr.