✔ Firefox zeigt vertikale Leiste nicht an

Trash · 30. Mai 2006

moin moin,
ich habe ein Design mit CSS dynamisch ausgerichtet. Im IE funktioniert alles. Ein Balken oben und ein Balken links wird angezeigt und passt sich der Auflösung an. Im Firefox fehlt der linke Balken. Hier ist der Code. Ich hoffe, dass mir jemand von euch sagen kann woran das liegt.

Danke im Vorraus!

index.html

HTML:

<div class="left_oben">

	<div class="left_repeat">
         	<img src="images/logo.gif" style="float:left;width:203px; height:214px;margin-left:0px; padding:0px;
						 margin-right:0px; alt="Logo" />


		<div class="left_menupunkt">Einf&uuml;hrung</div>
		<div class="left_menupunkt">DDL</div>
		<div class="left_menupunkt">DQL</div>
		<div class="left_menupunkt">DML</div>
		<div class="left_menupunkt">DCL</div>

	</div>
	<div class="left_unten">
         </div>
</div>


<div class="content">
	<div class="header_left">
		<div class="header_repeat">
			<img src="images/header_end.gif" style="float:right;width:84px; height:113px;margin-left:0px; padding:0px;
								 margin-right:0px; alt="Logo" />
		</div>
	</div>
	
</div>

dba.css

Code:

/* CSS Datei */

body
{
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#000000;
 background-color:#FFFFFF;
 margin-left:1px;
 margin-top:1px;
 height:98%;

}

/* Header */

/*Header repeat-teil*/
.header_repeat {

height:113px;
padding:0px;
background-image:url(../images/header_repeat.gif);
background-repeat:repeat-x;
margin-left:21px;
margin-top:0px;
width:70%;
color:#000000;
background-color:#FFFFFF;
}

/*linkes passendes Stück*/
.header_left {

height:113px;
padding:0px;
background-image:url(../images/header_left.gif);
background-repeat:no-repeat;
margin-left:0px;
margin-top:0px;
color:#000000;
background-color:#FFFFFF;
}


/*linkes Menü*/



/*left repeat-teil*/

.left_repeat {

width:203px;
padding:0px;
margin-left:0px;
margin-right:0px;
float:left;
background-image:url(../images/left_repeat.gif);
background-repeat:repeat-y;
height:70%;
color:#000000;
background-color:#FFFFFF;
}


/* left-div-class für oberes puzzleteil*/
.left_oben {

width:203px;
padding:0px;
margin-left:0px;
margin-right:0px;
float:left;
height:100%;
color:#000000;
background-color:#FFFFFF;
}


/*left-untere ecke*/
.left_unten {
background-image:url(../images/left_kante_unten.gif);
background-repeat:no-repeat;
width:123px;
height:144px;
color:#000000;
background-color:#FFFFFF;
}


.content {
float:left;
height:100%;
color:#000000;
background-color:#FFFFFF;

}


.left_menupunkt {
height:22px;
width:123px;
background-image:url(../images/left_button.gif);
background-repeat:no-repeat;
text-align:left;
padding-left:15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
background-color:transparent;
}

/* CSS Datei Ende */

Maik · 30. Mai 2006

Gibt es auch eine Online-Version der Seite, denn ohne die referenzierten Grafiken, lässt sich der Seitenaufbau nur schwer nachvollziehen.

Beim ersten Blick ist mir aufgefallen, daß im HTML-Quelltext den style-Attributen jeweils das abschliessende doppelte Anführungszeichen fehlt (habe es rot markiert):

Code:

<img src="images/logo.gif" style="float:left;width:203px; height:214px;margin-left:0px; padding:0px;margin-right:0px;" alt="Logo" />     

<img src="images/header_end.gif" style="float:right;width:84px; height:113px;margin-left:0px; padding:0px; margin-right:0px;" alt="Logo" />

Trash · 30. Mai 2006

Oh, sorry. Ja klar gibts die:

http://www.room21.de/dba/index2.html

Maik · 31. Mai 2006

Hier der korrigierte Quelltext:

HTML

HTML:

<div class="left_oben">
        <div class="left_repeat">
                 <img src="images/logo.gif" style="width:203px; height:214px;margin-left:0px; padding:0px;margin-right:0px;" alt="Logo" />

                <div class="left_menupunkt">Einführung</div>
                <div class="left_menupunkt">DDL</div>
                <div class="left_menupunkt">DQL</div>
                <div class="left_menupunkt">DML</div>
                <div class="left_menupunkt">DCL</div>

        </div>
        <div class="left_unten"></div>
</div>

<div class="content">
        <div class="header_left">
                <div class="header_repeat">
                        <img src="images/header_end.gif" style="float:right;width:84px; height:113px;margin-left:0px; padding:0px;margin-right:0px;" alt="Logo" />
                </div>
        </div>

        <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                        <td class="headline_start"></td>
                        <td class="headline_repeat">Einführung</td>
                        <td class="headline_end"></td>
                </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0" width="60%">
                <tr>
                        <td>

                        </td>
                </tr>
                <tr>
                        <td>
                                Ein schweres Erdbeben hat am Morgen die indonesische Insel Java erschüttert. Bei den Erdstößen
                                  südlich der bei Touristen beliebten Stadt Yogyakarta sind jüngsten Regierungsangaben zufolge
                                   mindestens 1900 Menschen getötet und mehr als 2800 verletzt worden. Die Opferzahlen könnten
                                    noch steigen.
                        </td>
                </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                        <td class="footer_start"></td>
                        <td class="footer_repeat">Internet Grundlagen I05a 2006 | SQL | CP, TH, TT</td>
                        <td class="footer_end"></td>
                </tr>
        </table>

</div>

CSS

Code:

/*linkes Menü*/

/* left-div-class für oberes puzzleteil*/

.left_oben {
width:203px;
padding:0px;
margin-left:0px;
margin-right:0px !important; /* Für nicht-IE-Browser */
margin-right: -3px; /* Für IE */
float:left;
height:100%;
color:#000000;
background-color:#FFFFFF;
}

/*left repeat-teil*/

.left_repeat {
width:203px;
padding:0px;
margin-left:0px;
margin-right:0px;
background-image:url(../images/left_repeat.gif);
background-repeat:repeat-y;
height:70%;
color:#000000;
background-color:#FFFFFF;
}

.left_menupunkt {
height:22px;
width:123px;
background-image:url(../images/left_button.gif);
background-repeat:no-repeat;
text-align:left;
padding-left:15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
background-color:transparent;
}

/*left-untere ecke*/
.left_unten {
background-image:url(../images/left_kante_unten.gif);
background-repeat:no-repeat;
width:123px;
height:144px;
color:#000000;
background-color:#FFFFFF;
}

.content {
height:100%;
color:#000000;
background-color:#FFFFFF;
margin-left:203px !important; /* Für nicht-IE-Browser */
margin-left: 200px; /* Für IE */
}

/* Header */

/*linkes passendes Stück*/
.header_left {

height:113px;
padding:0px;
background-image:url(../images/header_left.gif);
background-repeat:no-repeat;
margin-top:0px;
color:#000000;
background-color:#FFFFFF;
}

/*Header repeat-teil*/
.header_repeat {
height:113px;
padding:0px;
background-image:url(../images/header_repeat.gif);
background-repeat:repeat-x;
margin-left:21px;
margin-top:0px;
width:70%;
color:#000000;
background-color:#FFFFFF;
}

Trash · 31. Mai 2006

Wow! Vielen Dank! Das einzige was er jetzt noch nicht macht is, dass sich der linke Balken im Firefox verkleinert, wenn man das Fenster kleiner macht bzw. die Auflösung ändert. Wie bekomme ich das hin ?

Maik · 31. Mai 2006

Vielleicht hilft da folgende CSS-Regel weiter:

Code:

html {
height: 100%;
}

Trash · 31. Mai 2006

Kann man per CSS eigentlich einstellen, dass dieser Balken der sich "zusammenzieht" nur zu einer bestimmten Größe (%) zusammenzieht und sonst ein Scrollbalken entsteht ?

Maik · 31. Mai 2006

Wohl eher nicht. Welchen Sinn sollte es auch machen, die "zusammengestauchte" Grafik zu scrollen?

Trash · 31. Mai 2006

Nein ich mein wenn Du z.B. die Auflösung bei deinem Code auf 800 * 600 stellst, wird halt das menü nicht mehr richtig angezeigt, weil es von der unteren grafik überdeckt wird...ich dachte evtl. kann man es irgendwie "stoppen", dass die grafik sich nicht weiter hochschiebt, sondern ein scrollbalken entsteht.

Aber erstmal vielen Dank für deine Superhilfe!

Maik · 31. Mai 2006

Mit einem Scrollbalken kann ich nicht dienen, dafür aber mit einer Mindesthöhe min-height:70%, die anstelle von height:70% für das Element bestimmt wird.

Aber Achtung: der IE unterstützt diese CSS-Eigenschaft nicht.

Code:

.left_repeat {
width:203px;
padding:0px;
margin-left:0px;
margin-right:0px;
background-image:url(../images/left_repeat.gif);
background-repeat:repeat-y;
min-height: 70%;
color:#000000;
background-color:#FFFFFF;
}

* html .left_repeat { /* Für IE */
height: 70%;
}

✔ Firefox zeigt vertikale Leiste nicht an

Trash

Erfahrenes Mitglied

Maik

Trash

Erfahrenes Mitglied

Maik

Trash

Erfahrenes Mitglied

Maik

Trash

Erfahrenes Mitglied

Maik

Trash

Erfahrenes Mitglied

Maik

Neue Beiträge