✔ Probleme beim Erstellen eines CSS Layouts

Maik · 31. März 2008

Dann versuch es mal hiermit

Code:

#navi img {
display:block;
}

Außerdem darf eine ID im HTML-Dokument nicht mehrmals vergeben werden, sondern muss darin eindeutig sein.

Hierfür ist die Klasse vorgesehen:

Code:

.naviBild{
	
	
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	height:auto;
}

Code:

<div class="NaviBild">...</div>
...
<div class="NaviBild">...</div>

Html · 31. März 2008

Ach man hier jagt ein Problem das andere. Funktioniert es in dem einen Browser gehts nicht im anderen und umgekehrt.

Diesmal habe ich die Polstereigenschaften alle zurückgesetzt und trotzdem habe ich im Gegensatz zum FF im IE einen Abstand zwischen den Links!?

HTML:

#navi {
  width: 160px;
  float: left;
  margin-left: 10px;
  display:inline;

}

#navi img {
display:block;
}


#navi ul{
	
	list-style-type:none;
	background-color:#FFFFCC;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;

}



#navi li a{
	color: black;
	text-decoration:none;
	padding:0px;
	margin:0px;
	background-color:#FFFFCC;
	border-bottom:1px solid silver;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	font-size:14px;
	height: auto;	
	
	
}

#navi li a:hover{
	
	color: black;
	text-decoration:none;
	padding:3px;
	padding-left:10px;
	background-color:#CCFF99;
	border-bottom:1px solid silver;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
}

......


<div id="navi">
 <img src="oben160gelb.gif">
 
 	
	<ul>
 		<li><a href="fgdsg.html"  >Home</a></li>
 		<li> <a href="fgsdfg.html">Links</a></li>
 	</ul>
 	
  
 <img src="unten160gelb1.gif">
</div>

Maik · 1. April 2008

Du pickst dir aber auch gleich die Problem-Klassiker heraus :suspekt:

Code:

#navi ul {

        list-style-type:none;
        margin:0;
        padding:0;
        width:160px;
}

#navi li a{
        color: black;
        text-decoration:none;
        padding:0px;
        margin:0px;
        background-color:#FFFFCC;
        border-bottom:1px solid silver;
        font-family:Arial, Helvetica, sans-serif;
        display:block;
        font-size:14px;
        height: auto;
        width:100%;


}

Code:

<style type="text/css">
...
</style>
<!--[if lte IE 7]>
<style type="text/css">
#navi li {
float:left;
}
</style>
<![endif]-->

Html · 4. April 2008

Ich bins mal wieder. Also dank eurer Hilfe konnte ich alle anfäglichen Probleme beseitigen und die Website füllt sich langsam mit Inhalt.

Nun ja aber schon folgt das nächste Problem. Die Seite die ich gerade erstelle beinhaltet ein Bild welches mit float ausgerichtet ist. Allerdings ist das Bild höher als der Text - es erhöht mir aber nicht den Inhalt im Content-Div sondern der Content hört beim Text auf und das Bild verschiebt mir meine Rahmen-Grafik nach unten.

Habe auch mal ein Screenshot erstellt, da kann man es leicht erkennen.

Hier mal mein css-file:

HTML:

<style type="text/css">

.....

#content{
  width: 790px;
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
  padding:0px 0px 0px 0px; 
  position:relative;
}



#content img.rahmen {
display:block;
}


#contentBackground{
  width:auto;
  height:auto;
  padding:0px 25px 4px 15px;
  margin:0px 0px 0px 0px;
  background-image:url(bilder/layout/content_mitte1.gif);

}


#contentInhalt{
  width: auto;
  height:auto;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px; 
  background-color:#FFFFFF;
 
}
.....
</style>

Der Html-Code:

HTML:

......

<div id="content">
	<img src="bilder/layout/content_oben1.gif"  class="rahmen" >
	
		<div id="contentBackground">
	
			<div id="contentInhalt">


<h2>Herzlich Willkommen im Buchfinkenland</h2>

<p class="text_normal"><img src="bilder/seiten/buchfinkenland.jpg" style="float:right; margin-left:10px;  margin-bottom:0px">Im südlichen Westerwald, im geographischen Dreieck zwischen Koblenz, Limburg und Montabaur, liegt inmitten einer landschaftlich ungemein reizvollen Mittelgebirgslage das Buchfinkenland mit den drei ca. 2000 Einwohner zählenden Gemeinden Gackenbach, Horbach und Hübingen.</p>

                         </div>

		</div>
	
	<img src="bilder/layout/content_unten1.gif"  class="rahmen" >
</div>
........

Hoffe das sich auch dieses Problem schnell lösen lässt

Maik · 4. April 2008

Html hat gesagt.:
Also dank eurer Hilfe konnte ich alle anfäglichen Probleme beseitigen

Unsere Hilfe?

Hier hat doch ausschliesslich meine Wenigkeit geantwortet. :suspekt:

Html hat gesagt.:
Hoffe das sich auch dieses Problem schnell lösen lässt

Sind vierzehn Minuten schnell genug?

Code:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Code:

<div id="contentBackground" class="clearfix"> ... </div>

Zur Erläuterung: Die Floatumgebung muss zum Abschluss "gecleart" werden, damit die Box #contentBackground ihren Inhalt in vollem Umfang umschliesst.

Die Klasse .clearfix wird hierfür in besagtem Element aufgerufen.

Html · 4. April 2008

Supe vielen vielen Dank

Sag mal kannst du mir diesen Teil nochmal kurz erläutern:

HTML:

.clearfix:after {
content: ".";
display: block;
.....

Was bewirkt dieses after und was hat es mit dem content auf sich!?
Ist das eigentlich normal, dass man solche speziellen stylesheets bei css-layouts verwenden muss oder liegt das an meinem "evt. verkorksten" Layout

Maik · 4. April 2008

Das Pseudoelement :after in Verbindung mit der content-Eigenschaft generiert automatisch nach dem Element einen Inhalt, in diesem Fall ein Punkt, der u.a. mit der clear:both-Eigenschaft formatiert wird, um die Floatumgebung aufzuheben, und so im Dokument wieder den normalen Textfluss herzustellen.

Diese Technik erübrigt somit das Einbinden eines inhaltsleeren DIVs mit der clear:both-Eigenschaft zum Ende des DIVs #contentBackground:

Code:

<div id="content">
	<img src="bilder/layout/content_oben1.gif"  class="rahmen" >
	
		<div id="contentBackground">
	
			<div id="contentInhalt">


<h2>Herzlich Willkommen im Buchfinkenland</h2>

<p class="text_normal"><img src="bilder/seiten/buchfinkenland.jpg" style="float:right; margin-left:10px;  margin-bottom:0px">Im südlichen Westerwald, im geographischen Dreieck zwischen Koblenz, Limburg und Montabaur, liegt inmitten einer landschaftlich ungemein reizvollen Mittelgebirgslage das Buchfinkenland mit den drei ca. 2000 Einwohner zählenden Gemeinden Gackenbach, Horbach und Hübingen.</p>

                         </div>
			<div style="clear:both;"></div>
		</div>
	
	<img src="bilder/layout/content_unten1.gif"  class="rahmen" >
</div>

Keine Sorge, es liegt in deinem Quellcode kein Fehler vor, sondern ist einfach eine erforderliche und ganz normale Maßnahme, wenn das Floaten von Elementen beendet werden soll, um die Fortsetzung des Textflusses unterhalb des umflossenen Elements zu erzwingen.

Html · 7. April 2008

Mal wieder ein neues Problem:

Ich habe ein Fotogalerie eingebaut die durch eine ungeordnete Liste erzeugt wird.
Doch ich schaffe es einfach nicht diese Liste in meinem Content-Div zentrieren.
Habe schon alles mögliche ausprobiert (align, margin auto ....)

Natürlich wäre es mit Pixelangaben bei margin-left und right machbar aber es muss doch auch tatsächlich richtig zentriert werden können!?

HTML:

ul.galerie
{
list-style-type: none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;

}




ul.galerie li
{

float: left;
margin: 0 10px 10px 0;

}

ul.galerie img
{
width: auto;
height: auto;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}

PHP:

<?php
 
	echo '<div id="contentInhalt"><div><ul class="galerie">';
		$z=-1;
			while($row_bilder=mysql_fetch_array($result_bilder))
					{
						$z=$z+1;
						echo "<li>
<a href=include/show.php?id=".$id_safe."&Anfangsposition=".$z." onclick=\"return oeffnefenster(800,650,this.href)\" ><img src=\"".$pfad.$ordner."/TN/".$row_bilder['name']."\"></a></li>";
			
        			}

	echo '</ul></div></div>';

?>

Maik · 8. April 2008

Floatende Elemente lassen sich nicht ohne weiteres horizontal zentrieren.

Wenn die Breite der Bilder bekannt ist, kann für das Listenelement eine entsprechende Gesamtbreite ermittelt und so mittels margin:0 auto horizontal zentriert werden. Ansonsten wirst du damit leben müssen, dass die Galerie linksbündig sitzt.

Html · 9. April 2008

So solangsam naht die Fertigstellung der Seite. Doch kurz vor Schluss hab ich noch ein Problem zu lösen (mal wieder). Und zwar habe ich einen ähnliche Seite wie die Bildergalerie zum Darstellen der Presseberichte - was mich aber nun ärgert ist, dass der linke Abstand beim IE mal wieder größer ist als beim Firefox !?

Hier mein Code:

HTML:

......

<link rel="stylesheet" href="css/text.css">

<style type="text/css">


ul.presse{
	
	list-style-type:none;
	padding:0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	
	}


ul.presse li{

	float:left;
	width:240px;
	height:280px;
	padding:10px 40px 30px 40px;
	margin: 0px 0px 30px 30px;
	border:1px solid silver;
	}


p.titel {


font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	display:block;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: none;
	border-bottom-color: #CCCCCC;
	text-align:left;
}




</style>




<h2>Pressearchiv</h2>



<ul class="presse">

<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-Feriendorf.jpg" ></p>

</li>

<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/Party-01.02.2008.jpg" width="240" height="250" ></p>

</li>


<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-Feriendorf2.jpg" width="240" height="207" ></p>

</li>


<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-Haushalt.jpg" width="137" height="250" ></p>

</li>


<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-Kindergarten.jpg" width="240" height="181" ></p>

</li>

<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-MGV.jpg" width="240" height="74" ></p>

</li>


<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-Moehnen.jpg" width="240" height="147" ></p>

</li>



<li>

  <p class="titel"><strong>Westerwäler Zeitung vom 11.03.08</strong></p>
  <p align="center"><img  src="bilder/pressearchiv/RZ-Feriendorf.jpg" ></p>

</li>


</ul>


........

Ihr seid echt spitze hier (speziell Maik in diesem Fall) und ohne euch wäre ich mit Sicherheit noch lange nicht so weit.

Und auch diesmal bin ich sehr zuversichtlich,das sich dieser Schönheitsfehler schnell beheben lässt!

✔ Probleme beim Erstellen eines CSS Layouts

Maik

Html

Erfahrenes Mitglied

Anhänge

Maik

Html

Erfahrenes Mitglied

Anhänge

Maik

Html

Erfahrenes Mitglied

Maik

Html

Erfahrenes Mitglied

Anhänge

Maik

Html

Erfahrenes Mitglied

Anhänge

Neue Beiträge