<ul>, Ausrichtung, IE, Firefox - brauche Hilfe mit meinem CSS-File

Status
Nicht offen für weitere Antworten.

shutdown

Erfahrenes Mitglied
Hi!

Ich bin weiterhin daran, meine erste CSS-Seite zu bauen, und müsste jetzt aus den betroffenen Bereichen so ziemlich alle Tabellen entfernt haben.

Jetzt hab ich aber massive Darstellungsprobleme, und möchte jemanden von euch bitten, das sich mal anzuschauen - ihr seht das wahrscheinlich wesentlich schneller.

Also zu sehen ist das ganze unter: http://www.mrg-abi2004.de/galeriegd/linux/
Und es geht um die Kategorien der Bilder und die große Bilder-Anzeige im speziellen.
(Ignoriert einfach den Hintergrund vom right_content - das war nur mal ein Test)

Ich habe das ganze unter Linux geschrieben und für den dortigen Firefox optimiert.
Auch da hab ich schon ein Problem, aber jetzt hab ich das ganze nach Windows gewechselt und jetzt kommen ein paar dazu:

1) Die inneren divs left_content und right_content stehen im Firefox über den umschließenden div container hinaus - warum?
2) Der IE kennt anscheinend keine Listen-Formatierung, weshalb dort meine Navileiste komplett unformatiert daher kommt - warum?
3) Der Firefox unter Linux hat anscheinend ne völlig andere Grund-Schriftgröße - warum?

Ich würde mich über eure Hilfe sehr freuen - ich probier nämlich schon ne ganze Weile an dem Ding rum, und komme einfach nicht weiter...

Vielen Dank schon mal!
shutdown

Hier mal mein CSS-File:

Code:
body
{
    background-color: red;
    min-width: 987px;
    width: 98.5%;
}


#container
{
    width:90%;
    height: 100%;
    min-height: 200px;
    top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background-color: white;
    border-width: 4px;
    border-style: solid;
    border-color: blue;
}


#banner
{
    width: 100%;
    height:100%;
}

#navi_container
{
    position: relative;
    left: -7.5%;
    top: 1px; 
    width: 102%;
    z-index: 2;
    margin-bottom: 2px;
}

#navi_container li
{  
    float: left;
    display: inline;    
    position: relative;
    left: 3.4%;
    top: -15px;
    margin-left: 1px;
    margin-right: 1px;  
}


#navi_container li>a
{           
    float: left;
    text-align: center;
    padding-left: 1.39%;
    padding-right: 1.39%;
    padding-top: 3px;
    padding-bottom: 3px;
    font-weight: bold;
    color: white;
    background-color: orange;       
    margin-bottom: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}


#navi_container li>a:link
{
    color: white;
    text-decoration: none;
    background-color: orange;
}

#navi_container li>a:visited
{
    color: white;
    text-decoration: none;
    background-color: orange;
}

#navi_container li>a:hover
{
    color: orange;
    text-decoration: none;
    font-weight: bold;
    background-color: white;
}

#content
{
    width: 100%;
}

#left_content
{
    position: relative;
    top: -12px;
    float: left;
    margin-top: px;
    width: 210px;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
    background-color: #FFFF00;
}


#bilder_navi
{
    width: 93%;
    position: relative;
    left: 5px;
    margin-bottom: 2px;
    margin-top: 2px;
    border-color: blue;
    border-width: 2px;
    border-style: solid;
    vertical-align: middle;
    background-color: white;
    white-space: nowrap;
}

#bilder_navi ul
{
    list-style-type: none;
    text-align: left;
    position: relative;
    left: -35px;
}

span.category 
{   
    display: block;
    text-align: center;
    width: 177px;
    padding-left: 1.39%;
    padding-right: 1.39%;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    color: white;
    background-color: orange;       
    margin-bottom: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
    position: relative;
    top: -6px;
}

#rand_navi2_unten
{
    display: block;
    width: 185px;
    height: 4px;
    margin: 3px;
    background-color: orange;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

#bilder_navi img
{
    width: 25%;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: px;
    border-color: white;
    border-width: 0px;
    vertical-align: middle;
}

#bilder_navi a
{
    font-size: 12.3pt;
    text-decoration: none;
    color: #DF0000;
}

#right_content
{
    border:2px solid blue; position: relative;
    top: -12px;
    float: right;
    width: 75%;
    background:url('../bilder/bruecke.JPG');
}

#right_content img
{
    width: 15%;
    border-color: white;
    border-width: 0px;
    padding: 15px;
    vertical-align: middle;
}

#spans
{
    float: right;
    position: relative;
    top: 16px;
    left: -20px;
}

#right_content_bild img
{
    float: left;
    width: 45%;
    border-color: white;
    border-width: 0px;
    padding: 15px;
    vertical-align: top;
}


span.bild_name font
{
    display: block;
    width: 300px;
    background-color: orange;
    color: white;
    font-size: 16pt;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 2px;
}


span.bild_m font
{
    display: block;
    width: 227px;
    background-color: orange;
    color: white;
    font-size: 16pt;
    padding: 5px;
    text-align: right;
    text-color: blue;
    position: relative;
    left: 73px;
    margin-bottom: 2px;
}

span.bild_preis font
{
    display: block;
    width: 227px;
    background-color: orange;
    color: white;
    font-size: 16pt;
    padding: 5px;
    text-align: right;
    position: relative;
    left: 73px;
    margin-bottom: 2px;
}

span.bild_status font
{
    display: block;
    width: 300px;
    background-color: orange;
    color: white;
    font-size: 16pt;
    padding: 5px;
    text-align: center;
}

span.beschriftung_m font
{
    float: left;
    display: block;
    width: 60px;
    background-color: orange;
    color: white;
    font-size: 16pt;
    padding: 5px;
    margin-bottom: 2px;
}



span.beschriftung_preis font
{
    float: left;
    display: block;
    width: 60px;
    background-color: orange;
    color: white;
    font-size: 16pt;
    padding: 5px;
    margin-bottom: 2px;
}

#vita_bild img
{
    width: 15%;
    position: absolute;
    top: 235px;
    right: 140px;
}

#vita_bild font
{
    font-size: 12pt;
}

#vita_bild
{
    width: 600px;
    margin-top: 5px;
    padding: 5px;
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    text-align: justify;
}

#kontakt
{
    position: relative;
    top: 5px;
}
 

x_lilu_x

Grünschnabel
hmm,

also mal abgesehn davon, dass es schon recht spät ist und der Code der Seite relativ komplex aufgebaut ist, werde ich jetzt mal alles aufzählen, was mir so auf die Schnelle aufgefallen ist.

1. Die Schriftgrößen, hängen von den Systemeinstellungen ab. Du hast allerdings in deinem CSS-Code keinerlei Angaben gemacht, welche Schrift in welcher Größe verwendet werden soll. Es gibt folgende Möglichkeiten:

- relative Schriftgrößen (1em), dabei wird die Schrift so groß wie die Breite des Zeichens "m" in der Standartschriftgröße (Vorteil: Menschen können die Schrift der Seite über den Browser vergrößern)
-absolute Schriftgrößen (1px), dabei wird die Höhe der Schrift in Pixeln angegeben und kann dann im Normalfall im Browser nicht geändert werden

2. Mir ist aufgefallen, dass du einige seltsame Prozentangaben bei der Breite von Elementen machst. Was sind denn bitte 102%? Das Maximum ist nun mal 100%, alles was drüber geht, führt mehr oder weniger oft zu Fehlern. Zwar hab ich schon auf einigen Seiten gelesen, das man mit solchen Angaben irgendwelche Browser-Bugs umschifft, jedoch verwende ich für meine Seiten ausschliesslich CSS und wenn das Layout einigermaßen logisch und systematisch aufgebaut ist, dann funktioniert das zumindest auf allen Browsern der letzten Generation fehlerfrei. Ältere Browser stellen dann eventuell kein pixelgenaues Layout dar, jedoch ist die Seite ohne Probleme bedienbar.

3. Die Styleangaben für die Listen-Tags werden werden beim IE dank seines Fehlerhaften Boxen-Modells anders interprtiert. Dies kannst du aber ausgleichen, wenn du das Padding der ul-Tags auf Null setzt und dann für die li-Tags einen Rand von links definierst.


So ... das erstmal auf die Schnelle. Ich werd mir den Code heute Nachmittag mal zu Gemüte führen und mal schaun was ich finde.


viele Grüße

Lilu
 

Gumbo

Erfahrenes Mitglied
Vielleicht solltest du bei diesen CSS-Codebrei noch einmal bei Null anfangen, dass hilft oft.
 

shutdown

Erfahrenes Mitglied
Hi!

Danke erstmal für die Antworten.

Das mit den Schriftarten hab ich jetzt verstanden
Die seltsamen %-Angaben: Nun, interessanterweise nahm der #navi_container bei 100% nicht den gesamten zur Verfügung stehenden Platz ein! (fragt mich nicht warum...)

@gumbo: Du sprichst von Codebrei. Kann ich jetzt leider net allzu viel mit anfangen.
Was ist denn bitte genau so schlecht an dem Code? Die Datei beschreibt ja auch mehrere Inhalte auf der Seite, darum musste sie ja auch länger werden...

shutdown
 

Gumbo

Erfahrenes Mitglied
Das CSS-Dateien komplex und damit groß werden, ist oft bei einem klaren Konzept unvermeidbar. Dennoch sollte sie einer gewissen Logik entsprechen und auch nicht derart überlastet sein, wie es bei deinem CSS der Fall ist.
Viele Eigenschaften sind redundant oder durch einfachere Eigenschaftskonstruktionen ablösbar. So halte ich beispielsweise die meisten, wenn nicht sogar alle relativen bzw. absoluten Positionierungen für unnötig.
 

shutdown

Erfahrenes Mitglied
okay - danke für den Tipp mit den "Relativen" :)

Konnte tatsächlich alle (glaub ich zumindest) relativen Positionierungen eliminieren und es schaut bis jetzt ganz gut aus (im IE).

Hier der link zur aktuellen Version: http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Acryl&bild=Die_Versuchung

Jetzt hätte ich noch 3 Fragen:
1. Im IE schauts jetzt gut aus, im Firefox aber wieder net
Hierzu 2 Punkte: In der Navigationsleiste auf der linken Seite richte ich das ul mit margin-left:3px aus und der IE zeigt es so wie ich es will. Nur der Firefox nicht. Er zeigt jetzt das ul etwa in der Mitte des zugrunde liegenden divs (#left_content) an (was ich vorher durch ne relative Positionierung gelöst hatte)
Ein weiterer Punkt ist die Detailansicht für ein Bild (mit Bildtitel, Preisen, usw).
Hier zeigt der IE jetzt alle Elemente die nebeneinander sein sollen, auch nebeneinander an (kein margin, kein ehemaliges position relative). Im Firefox legt er mir jetzt aber die rechten Blöcke unter die linken - was ich durch position relative gelöst hatte.

2. Schaut euch mal die linke Navi-Leiste an. Da findet ihr unten einen Abstand zwischen dem letzten Bild und dem Abschluss-Balken - keine Ahnung wo der her kommt.

3. Die horizontale Navigationsleiste. Kann man das irgendwie einstellen, dass die Schriftgröße zwar fest (oder vom Browser geändert werden kann), allerdings das Padding der einzelnen Blöcke immer genau so groß ist, dass der gesamte zur Verfügung stehende Raum belegt ist?


Für Hilfe wie immer im Voraus danke!

cu shutdown

Und noch ein vierter Punkt:

Bin jetzt auch noch für die Detailansicht der Bilder von px-Größen zu %-angaben gewechselt und hab die spans zusammengefasst (waren wirklich absolut redundant).

Im IE auch kein Problem - aber schauts euch das mal im Firefox an :-(
 
Zuletzt bearbeitet:

Gumbo

Erfahrenes Mitglied
Wieso werden Navigationselemente bei deutschen Entwicklern eigentlich immer mit einer Diminutivumform bezeichnet?


Mein Vorschlag:
Code:
* {
	margin:			0;
	padding:		0;
	border-style:		none;
}
body {
	padding:		20px 2%;
	background-color:	#f00;
}
#container {
	padding:		10px;
	background-color:	#fff;
}
#header {
	margin-bottom:		20px;
}
#global-nav,
#sub-nav {
	list-style:		none;
}
#global-nav {
	padding:		0.25em 0.5em;
	text-align:		center;
	background-color:	#ffa500;
}
#global-nav li {
	display:		inline;
	margin-left:		-0.4em;
}
#global-nav li a {
	padding:		0.25em 0.5em;
	color:			#fff;
	background-color:	#ffa500;
	text-decoration:	none;
}
#global-nav li a:hover {
	color:			#ffa500;
	background-color:	#fff;
}
#sidebar {
	float:			left;
	width:			25%;
}
#sub-nav li {
	margin-bottom:		2px;
}
#sub-nav li img {
	width:			25%;
	vertical-align:		middle;
}
#content {
	margin-left:		25%;
}
.datenliste dt {
	float:			left;
	width:			25%;
}
.datenliste dd {
	margin-left:		25%;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Galerie GD – Der Internetauftritt von Künstler Günter Dittrich</title>
</head>


<body>
<div id="container">

	<div id="header">
		<div id="branding"><img src="http://www.mrg-abi2004.de/galeriegd/linux2/gd-banner2.jpg" alt="Galerie GD" width="100%"></div>
		<ul id="global-nav">
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=home">Home</a></li>
			<li><a href="">Aktuelles</a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=vita">Vita</a></li>
			<li><a href="">Auftragsmalerei</a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Aquarell">Aquarell</a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Acryl">Acryl</a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Collage">Collage</a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Pastell">Pastell</a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=kontakt">Kontakt</a></li>
			<li><a href="http://gd4b92.probook.de" target="_blank">G&auml;stebuch</a></li>
		</ul>
	</div>
    
	<div id="sidebar">
		<h2>Acryl</h2>
		<ul id="sub-nav">
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Acryl&bild=Der_Traum"><img src="http://www.mrg-abi2004.de/galeriegd/bilderklein/traum.JPG"><span>Der Traum</span></a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Acryl&bild=Die_Versuchung"><img src="http://www.mrg-abi2004.de/galeriegd/bilder/versuchung.JPG"><span>Die Versuchung</span></a></li>
			<li><a href="http://www.mrg-abi2004.de/galeriegd/linux2/index.php?page=Acryl&bild=Ich_warte_auf_dich"><img src="http://www.mrg-abi2004.de/galeriegd/bilderklein/warte.JPG"><span>Ich warte auf dich</span></a></li>
		</ul>
	</div>

	<div id="content">

		<h3>Die Versuchung</h3>
		<p><img src="http://www.mrg-abi2004.de/galeriegd/bilder/versuchunggr.JPG" id=""></p>
		<dl class="datenliste">
			<dt>Maße</dt>
			<dd>60 cm × 80 cm</dd>
			<dt>Preis</dt>
			<dd>420,– EUR</dd>
		</dl>
		<p>verfügbar</p>
	</div>

</div>
</body>
</html>
 

shutdown

Erfahrenes Mitglied
Mal wieder danke!

Zwar nicht ganz das, was ich mir vorstelle, aber es sind ein paar interessante Ideen dabei.

Verblüfft bin ich aber, wie wenig CSS du für dieses Ergebnis brauchst - werd ich wohl doch nochmal auf Redundanzen-Suche gehen :)

<<<Wieso werden Navigationselemente bei deutschen Entwicklern eigentlich immer mit einer Diminutivumform bezeichnet?

Den Satz versteh ich leider nicht :)

Bin zur Zeit am Rätseln, ob das ein Kreuzworträtsel ist - Ein Navigationselement = Link, davon die Verkleinerungsform (heißt glaub ich Diminuitiv :p ) = Linkchen - macht aber keinen Sinn :)
 

shutdown

Erfahrenes Mitglied
okay - also dann mal wieder zur Navigationsleiste :)

Bei dir funktioniert das Umbrechen der Leiste bei kleinem Fenster zwar auch, ich kann das so aber nicht auf dieses Beispiel übernehmen:

Grund: Meine float-Eigenschaft. Mit dieser will ich verhindern, dass es beim Umbruch zu Überlagerungen der Effekte kommt.
Dies ist aber bei deiner Version nicht gegeben (schau dir mal nen Hover bei zwei übereinanderliegenden Links direkt hintereinander an. (Ein margin hilft da leider net)

Mit dem float "springt" mir das ganze aber aus dem zugrundeliegenden ul raus (bzw erzeugt ein zweites, sobald umgebrochen wird).

Haste da ne Idee?
 
Status
Nicht offen für weitere Antworten.