Dringend: CSS Problem!

zero · #1 (**permalink**) 29.12.2005, 18:52

Gleich vorweg, CSS ist für mich ziemliches Neuland, zumindest was die Gestaltung einer Webseite damit betrifft, ich hab bisher einige Jahre nur mit Frames (anfangs) und dann Tabellen gearbeitet und denke sozusagen in Tabellen.

Nun zu meinem Problem:
Jemand hat mir freundlicherweise aus einem Tabellengrundgerüst für meine Seite ein CSS-Gerüst erstellt, welches ich noch geringfügig angepasst habe, bis ich aber auf ein Problem gestossen bin und zwar wird im Firefox zumindest bei 1024x768 bzw. verkleinertem Fenster der Footer-Bereich vom Text überlagert, im IE6 wird es hingegen komplett richtig und gewünscht dargestellt. Ich hab jetzt einige Stunden herumprobiert und verglichen bzw. nach Lösungen gesucht und bin nicht draufgekommen, wie ich das Problem in Firefox beheben könnte, daher wäre ich über Hilfe sehr dankbar, weil ich da sonst überhaupt nicht mehr weiterkomme.

Hier gibts das Grundgerüst:
http://www.edu.uni-klu.ac.at/~maglas...s/01_about.htm

Die CSS-Datei:
http://www.edu.uni-klu.ac.at/~maglas.../css/style.css

Bitte nur konkrete Lösungsvorschläge, wie gesagt, ich beschäftige mich erst seit ein paar Tage näher mit divs & co. und blicke da noch nicht ganz so durch, wie es sein sollte. (bei Bedarf kann ich die style.css auch direkt posten?)

Ahja, hab das Problem auch in einem anderen Forum gepostet, da meinte jemand, es hängt mit den floats und einer absoluten Positionierung zusammen, aber ich bräuchte einen konkreten Lösungsvorschlag, da alle meine Änderungsversuche bisher ohne Erfolg waren, im Gegenteil, dass Layout wurde erst recht zerstückelt.

Sentinel · #2 (**permalink**) 30.12.2005, 02:07

wie wäre ein ordentlicher aufbau als testcase?
du hast im ersten container ein absolut drin der ist unnötig auf den ersten blick. gib dem #text mal padding-bottom 1px bzw. in deine kurzschreibweise einbauen. mehr hab ich kein bock deine demo kann man nicht importieren und dran arbeiten :P

psycho_dmr · #3 (**permalink**) 30.12.2005, 03:34

Ich weiß zwar nicht wer dir das da "freundlicherweise" geschrieben hat, aber er hat irgendwie mist geschrieben... sry.

das ist eine in divs gespresste Tabelle, mehr nicht..

Hmm, ich kapier den code irgendwie nicht, was sollen die ganzen floats da drin? ... ich würd vorschlagen, du fängst selber nochmal neu an. Das ist keine vorlage von der man lernen sollte...

-> das könnte dir helfen

zero · #4 (**permalink**) 30.12.2005, 08:32

Langsam geb ichs echt auf.

@sentinel
Was meinst du mit "nicht importieren"? Beide Links funktionieren korrekt, die Dateien können somit einwandfrei betrachtet werden.

@psycho_dmr
Langsam kenn ich mich gar nicht mehr aus, was heisst eine in divs gepresste Tabelle? Wie baust du so ein Layout auf?? Der Code in dem Link von dir ist genau das selbe, nur halt ganz einfach, damit fang ich aber nichts an, weil meine Seite einen Header hat, zwei Randgrafiken mit jeweils einer Hintergrundgrafik, damit der Rand nicht zerreisst, sobald der Inhalt länger wird, sowie einem abschließenden Footer, der halt aus mehreren divs bestehen muss, da er diverse Sachen enthält, wie die abgerundeten Ecken, die mittlere Grafik und den Copyright Hinweis. Für mich ist der Code eigentlich logisch geordnet und ich hab schon sehr viel probiert, also Container geändert, anders angeordnet, diverse floats entfernt, das position entfernt und jedesmall war das Ergebnis in beiden Browsern schlechter als zuvor. Vor allem ein entfernen der floats zerreisst nur das Layout total. Das Gerüst stammt freundlicherweise von diwiesign, er hat das mehr oder weniger von seiner Seite ollikoi.de abgeleitet, soweit ich gesehen habe, die auch wunderbar funktioniert, aus Zeitmangel könnte es schon sein, dass da was drin ist, dass für meine Seite nicht passend ist, aber so schlecht sieht das Ergebnis ja nicht aus in IE und FF, bis auf den Fehler unten in FF ist es eigentlich genau, wie es sein soll.
Ich weiß nicht, aber alle möglichen Lösungen in CSS sehen eigentlich ähnlich aus vom Aufbau mit den divs, daher versteh ich deine Aussage nicht wirklich?

Sentinel · #5 (**permalink**) 30.12.2005, 08:37

nicht importieren heist, das ich die css und diese html zwar kopieren kann, aber die haben nich den gleichen erfolg, somit kann ich dein problem nicht local lösen und bei dem wirrwar da macht es auch kein spaß da nur ansatzweise was zu machen.

wie dir empfohlen wurde, selber und sauber einen aufbau herbringen, für das da sollte das nicht das problem sein

ps: schaust du sigi, so sollte es sein

zero · #6 (**permalink**) 30.12.2005, 08:47

Problem, im Firefox zieht sich der Text-div auf 100% bis zum unteren Browserrand über den Footer hinweg. Im IE6 korrekte Darstellung.
Und mir erscheint der Code ziemlich logisch, daher wüsste ich auch nicht, wie ich das anders aufbauen sollte, folglich würds auch nicht viel bringen, da neu anzufangen, wie gesagt, einige Änderungen hab ich schon probiert, hat aber alles eher was kaputt gemacht, als geholfen.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<title>Pixelfly.net™ | personal webground</title>
<meta http-equiv=expires content=0 />
<meta http-equiv=cache-control content=no-cache />
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

<body>

<div id="site">
	<div id="content">
	
		<div id="shadeleft"></div>
		<div id="headermenu">
			<div id="header"></div>		
			<div id="menu">
				<ul id="menu_nav">
				[*]<span>Home</span>
				[*]<span>Graphics</span>
				[*]<span>Artwork</span>
				[*]<span>About</span>
				[*]<span>Guestlog</span>
				[*]<span>Links</span>
				[*]<span>Contact</span>
				[/list]				</div>	
			<div id="text">
			<div class="headline">Ueberschrift 1</div>

            My name is...., I am bbla blabl blabl lalal a lala lalal alal alal flal al la laa
            My name is...., I am bbla blabl blabl lalal a lala lalal alal alal flal al la laa
            My name is...., I am bbla blabl blabl lalal a lala lalal alal alal flal al la laa


 			Ueberschrift 2

			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			The digicam that I use is a Canon PowerShot A80 with a cullmann mini tripod.
			My workstation is a Pentium4 2,5 Ghz, 512 MB Ram, 80 Gb Maxtor HDD and a Ati Radeon 9500pro.
			Letzter Satz hier da so aus, maus, haus..brrr
            </div></div>
            
        
		<div id="shaderight"></div>
	</div>

	<div id="footer">
		<div id="footerleft"></div>
		<div id="footermiddle">
			<div id="footercopy">
			<div class="copyright">Site &amp; Content Copyright © Pixelfly.net. All Rights Reserved.</div>
			</div>
		</div>
		<div id="footerright"></div>
	</div>

</div>

</body>

</html>

style.css:

Code:

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

html {
	height: 100%;
	min-height: 100%;
	max-height: 999%;
	}

body {
	height: 100%;
	min-height: 100%;
	max-height: 999%;
	width: 573px;
	font-family: "trebuchet ms";
	font-size: 11px;
	color: #919191;
	margin: 0 auto;
	background: #eeeded url('background1.jpg') repeat-x top center;
	scrollbar-face-color: #f4f4f4;
	scrollbar-highlight-color: #f4f4f4;
	scrollbar-shadow-color: #f4f4f4;
	scrollbar-3dlight-color: #fcfff9;
	scrollbar-arrow-color: #9bbdd5;
	scrollbar-track-color: #e5e6e8;
	scrollbar-darkshadow-color: #c5c5c3;	
	}

/* hack nur fuer ie */

* html body {
	height: 100%;
	}
	
* html body #site #content {
	height: 100%;
	}

/* ende ie hack*/

#site {
	height: 100%;
	min-height: 100%;
	max-height: 999%;
	width: 573px;
	}

#content {
	width: 573px;
	z-index: 1;
	background: red;

	}

#text {
   width: 495px;
   padding: 0 10px 0 10px;
   z-index: 2;
   background: blue;
   }

#footer {
	clear: both;
	height: 118px;
	width: 573px;
	text-align: center;
	vertical-align: middle;
	z-index: 4;
	color: black;
	}

#footerleft {
	height: 118px;
	width: 29px;
	background: #f4f4f4 url('site_down_left.jpg') top;
	float: left;
	}

#footermiddle {
	height: 118px;
	width: 515px;
	background: #f4f4f4 url('site_down.jpg') top;
	float: left;
	}

#footercopy {
	height: 18px;
	width: 515px;
	color: #c9c9c9;
	margin-top: 80px;
}

#footerright {
	height: 118px;
	width: 29px;
	background: #f4f4f4 url('site_down_right.jpg') top;
	float: left
	}

#shadeleft {
	height: 550px;
	width: 29px;
	background: #eeeded url('site_shadeleft.jpg') top;
	float: left
	}

#shaderight {
	height: 550px;
	width: 29px;
	background: #eeeded url('site_shaderight.jpg') top;	
	float: left
	}
	
#headermenu {
	height: 345px;
	width: 515px;
	float: left;
	z-index: 2;
	}

#header {
	height: 294px;
	width: 515px;
	background-image: url('header_1.jpg');
	z-index: 3;
	}

#menu {
	height: 51px;
	width: 515px;
	}

#menu_nav {
	clear: both;
	list-style: none;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	height: 51px;
	}

#menu_nav li {
	display: inline;
	}

#menu_nav #p01 {display: block; width: 74px; height: 51px; float: left; background: url('navi_home1.jpg') no-repeat 0 0;}
#menu_nav #p02 {display: block; width: 74px; height: 51px; float: left; background: url('navi_graphics1.jpg') no-repeat 0 0;}
#menu_nav #p03 {display: block; width: 73px; height: 51px; float: left; background: url('navi_artworks1.jpg') no-repeat 0 0;}
#menu_nav #p04 {display: block; width: 73px; height: 51px; float: left; background: url('navi_about1.jpg') no-repeat 0 0;}
#menu_nav #p05 {display: block; width: 74px; height: 51px; float: left; background: url('navi_guest1.jpg') no-repeat 0 0;}
#menu_nav #p06 {display: block; width: 73px; height: 51px; float: left; background: url('navi_links1.jpg') no-repeat 0 0;}
#menu_nav #p07 {display: block; width: 74px; height: 51px; float: left; background: url('navi_contact1.jpg') no-repeat 0 0;}

#menu_nav a#p01:hover {background:  url('navi_home1.jpg') no-repeat 0 -51px;}
#menu_nav a#p02:hover {background:  url('navi_graphics1.jpg') no-repeat 0 -51px;}
#menu_nav a#p03:hover {background:  url('navi_artworks1.jpg') no-repeat 0 -51px;}
#menu_nav a#p04:hover {background:  url('navi_about1.jpg') no-repeat 0 -51px;}
#menu_nav a#p05:hover {background:  url('navi_guest1.jpg') no-repeat 0 -51px;}
#menu_nav a#p06:hover {background:  url('navi_links1.jpg') no-repeat 0 -51px;}
#menu_nav a#p07:hover {background:  url('navi_contact1.jpg') no-repeat 0 -51px;}

#menu_nav li a span {display: none;}

.headline {
	font-weight: bold;
	font-size: 13pt;
	color: #a3c2da;
	font-family: arial narrow, arial;
	padding: 15px 0 0 0;
	margin-bottom: 15px;
}

.headline2 {
	font-weight: bold;
	font-size: 11pt;
	color: #acacac;
	font-family: arial narrow, arial;
	padding: 15px 0 0 10px;
}

.copyright {
    font-family: trebuchet ms;
    font-size: 11px;
    color: #C6C4C5;
    font-weight: normal;
}

Screenshot IE6 - korrekte Darstellung:

Screenshot FF - Darstellungsproblem Text:

Sentinel · #7 (**permalink**) 30.12.2005, 09:11

dein case nützt so nichts....

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>margin-top?</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {margin:0px auto;padding:0;height:100%;background:black;text-align:center;color:#ccc;}
#stamm {margin:0 auto;text-align:left;width:800px;background:blue;}
#copy {margin:0 10px 0 10px;width:760px;height:50px;}
#header {margin:0 10px 0 10px;width:760px;}
#narvi {margin:0 10px 0 10px;width:760px;}
#maincontent {margin:0 10px 0 10px;width:760px;}
</style></head>
<body>
<div id="stamm">
<div id="copy">copyright oben</div>
<div id="header">margin was auch immer und höhe</div>
<div id="narvi">narvigation</div>
<div id="maincontent">inhalt der seite</div>

</div>

</body>

</html>

ist ein vorschlag zur güte, den weiter ausbauen ist nur die basis.

zero · #8 (**permalink**) 30.12.2005, 09:21

Kannst du das noch etwas weiter erklären? Ich seh da nur ein paar container im Header, die dann im body der reihe nach aufgerufen werden, aber was das jetzt mit meiner Seite zu tun hat, versteh ich nicht wirklich? Sind die Werte (760px) nur so eingesetzt, oder sagen die irgendwas aus? Und stehen die css-definitionen nur im Header, weil es weniger Arbeit ist für dich jetzt zum Zeigen, oder hat das auch einen Grund? Was verstehst du unter "case" und warum ist es nutzlos?
Jaja, Fragen über Fragen, aber ich will das jetzt genau wissen, langsam glaub ich, es wär besser gewesen, nicht zu fragen...ich hab ja das Gefühl, dass sich den Code niemand wirklich anschaut, weil ich wirklich nicht glaube, dass da soviel falsch läuft, ich hab mir die container sogar schon aufgezeichnet und finde den Aufbau sehr logisch (site, content, header mit menü-definition, seitliche ränder, footer....)

Sentinel · #9 (**permalink**) 30.12.2005, 09:26

kopier deinen code selbst, speicher den in ner test.html und staune

also die grundüberlegung:

dein seitenaufbau ist sehr einfach, du benötigst nur container untereinander., also teilt man die page erstmal ein.

stamm ist der spaß der es ausrichtet
copy beherbergt dein copyright oben rechts (muss halt von dir ausgerichtet werden)
darunter kommt dein hellblauer header, muß halt angepasst werden
darunter kommt die narvi, da presst dein menü rein, such nach suckerfish das scheint für den fall evtl. praktischer zu sein.
darunter kommt der maincontent mit dem inhalt deiner seite. überschriften nicht in ein div sondern h1 aber das ist feinarbeit.
deine bg grafiken kannst du genauso einsetzen. im grunde fertig

ps: zum faken der runden ecken kann man bei dem aufbau noch ein div drüber und drunter setzen, die dann die bg grafik dafür drin haben.
pss: welche breiten, höhen und abstände du nutzt ist dir natürlich überlassen. die 760 sind rein fiktiv und sollen dir erstmal deinen rand der page ermöglichen, geht auch anders zu lösen, ist aber dir überlassen und rein nur die basic. geht um den grundaufbau.

zero · #10 (**permalink**) 30.12.2005, 09:37

Ahm, der Code zeigt mir einen Container wo ich das ganze Zeug reinhaun muss, nehm ich mal an....aber das hab ich ja im Prinzip schon mit dem container site bzw. content...hm....vielleicht überseh ich da irgendwas, worauf du mich hinweisen willst? Den content-container hab ich schon mit allen möglichen varianten umgebaut, ohne Erfolg.

Ich weiß nicht, deine Lösung da kann ich schon nachvollziehen, aber wo tu ich die ganzen Grafiken hin dabei, so einfach ist das nicht, der Hintergrund hat einen leichten Verlauf, daher verwende ich seitlich zwei extra Grafiken die den Rand bis zum Ende des Farbverlaufs simulieren, danach wird nur eine sich nach unten fortsetzende Randgrafik angezeigt, darum gehts ja auch, ansonsten wär es schon um einiges einfach, aber ich hab da einige Grafiken drin, für die Ecken, Ränder, Footer und die müssen auch genau passen mit dem Hintergrund usw. Wo siehst du eigentlich oben ein Copyright?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 17:37
Css und Steam Problem	justinlenz	Offtopic	3	27.03.2008 21:58
Problem mit Layout- Totaler CSS Noob	meici	CSS	3	01.03.2008 16:33
CSS Problem	Adriana	CSS	0	09.09.2006 16:51
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04