Darstellungsprobleme

[danihue]

Hallo,

ich versuche gerade eine Website (fast) ganz ohne Tabelle, nur mit CSS zu gestalten. Dabei ergeben sich jedoch bereits jetzt einige Darstellungsprobleme:

1. sollen bei der Navi grüne Navigationssymbole angezeigt werden (wie beim hover-Zustand) - warum werden die nicht angezeigt?

2. Schaut euch bitte mal die Darstellung im FF an - da ist ja etwas völlig wuschig - woran liegt das???

Hier ist der Link

Und hier das Stylesheet:

/*Impressum*/

.header_impressum {
	background-image: url(header_ringbuch.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	width:700px;
	height:276px;
}

.rahmen_impressum {
	width:720px;
	height:600px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}


.navi_impressum {
	width:700px;
	height:20px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #666666;
	border-bottom-color: #666666;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color:#FFFFFF;
}

/*Navigation*/

.navi{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-stretch: ultra-expanded;
	letter-spacing: 1px;
	text-decoration:none;
		
}

.navi:link{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-stretch: ultra-expanded;
	letter-spacing: 1px;
	text-decoration:none;
	background-image: url(navi_gr.gif);
	background-color:#ffffff;
	
	}
	
	
.navi:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-stretch: ultra-expanded;
	letter-spacing: 1px;
	background-image: url(navi_bl.gif);
	text-decoration:none;
	background-color:#ffffff;
		}
	

.content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	margin-left: 15px;
}


.bg_site {
	background-image: url(bg_site.jpg);
	background-repeat: repeat-x;
}

a{
	text-decoration:none;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	color: #666666;
}

a:hover{
	text-decoration:none;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	color: #B5DC10;
	
}

.start_downloads {
	padding: 10px;
	float: left;
	height: 200px;
	width: 170px;
	background-color: #ffffff;
	border: 1px solid #666666;
	margin-left: 15px;
	margin-top: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-right: 1px;
	margin-bottom: 15px;
	
}

.wir_box {
	padding: 10px;
	float: left;
	height: 200px;
	width: 600px;
	background-color: #ffffff;
	border: 1px solid #666666;
	margin-left: 15px;
	margin-top: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-right: 1px;
	margin-bottom: 15px;
	
}

.termine_box {
	padding: 10px;
	float: left;
	height: 200px;
	width: 600px;
	background-color: #ffffff;
	border: 1px solid #666666;
	margin-left: 15px;
	margin-top: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-right: 1px;
	margin-bottom: 15px;
	
}

.p1{
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: normal;
}

.p1:link{
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: normal;
}
.p1:hover{
    color: #B5DC10;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: normal;
}


.p2{
	text-decoration:none;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #B5DC10;
	list-style-type: square;
}

.p2:link{
	text-decoration:none;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	color: #B5DC10;
	list-style-type: square;
	
}

.p2:hover{
	text-decoration:none;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	list-style-type: square;

}

[gen]

Hi danihue,

1) versuch mal folgendes:

.navi{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-stretch: ultra-expanded;
	letter-spacing: 1px;
	text-decoration:none;
        background-image: url(navi_gr.gif);
		
}

2) Ich weis jetzt zwar nicht was du mit wuschig meinst, aber mich stört am meisten dass beim scrollen der heade rnicht mit scrollt. Dazu solltest du mal in der Klasse .header_impressum das fixed entfernen beim attachment

Viele Grüße,
gen

[danihue]

Ich habe die Seite inzwischen weiterbearbeitet. Im IE sieht soweit eigentlich alles recht gut aus. Probleme macht jedoch weiterhin der FF. Aber seht selbst... Link

Wie kann ich die "Fehler" beheben??? (Navigation, Box im Contentbereich, Springen der Startseite...)

Hat jemand eine Idee?

[gen]

Hi danihue,

wo genau sind denn die Fehler bei mir passt alles - Oder hast dus schon selber geändert? Oder seh ichs einfach nicht

Viele Grüße,
gen

[Rinaldo]

Fehler auf der Site:
- Navi springt ist etwas versetzt in FF oder IE.
- schwarzer Rahmen um Inhalt geht nicht um Inhalt im FF.

[gen]

Ich erkenn kein Springen beim navigieren, das kann ich nicht beurteilen.

Du musst der Klasse content_box eine feste (Mindest)Höhe geben (height: 400px) um den schwarzen Rahmen korrekt anzeigen zu lassen. Wie sich das DIV verhalten soll, wenn der content länger ist regelst du mit dem Attribut overflow.

Viele Grüße,
gen

[danihue]

Zitat von gen

Du musst der Klasse content_box eine feste (Mindest)Höhe geben (height: 400px)

Das würde bedeuten, dass ich für jeden Rahmen auf jeder Seite ein eigenes sheet anlegen muss ich dachte mit "auto" sollte der Rahmen sich automatisch anpassen !?

Zitat von gen

...Wie sich das DIV verhalten soll, wenn der content länger ist regelst du mit dem Attribut overflow.

Was bedeutet "overflow"?

Schaut euch bitte mal das rollover des Menüpunkts "Startseite" von einer der Unterseiten aus an ... da wird bei mir im FF das graue Viereck doppelt angezeigt ... !?

Wenn ich zwischen der Startseite und einer anderen hin un her klicke springt die Seite .. wie kann ich das beheben?

[gen]

Zitat von danihue

Das würde bedeuten, dass ich für jeden Rahmen auf jeder Seite ein eigenes sheet anlegen muss ich dachte mit "auto" sollte der Rahmen sich automatisch anpassen !?

Nein das stimmt nicht. Du legst nur eine Mindesthöhe für alle Seiten fest. Seiten die höher sind vergrößern das DIV automatisch ...

Zitat von danihue

Was bedeutet "overflow"?

Overflow bedeutet genau diesen Effekt, dass Seiten z.B. höher als die definierte Höhe sind (weil z.B. mehr content vorhanden ist). Was mit dem "überlangen" Inhalt dann passiert regelst du mit dem Attribut Overflow

Viele Grüße,
gen

[danihue]

Ich habs inzwischen mit einzelnen sheets gelöst ... vielleicht nicht die Ideallösung, aber es funktioniert.

Sieht doch jetzt ganz gut aus