✔ Lücke mit wiederholendem Bild schließen

WIK-Lars · 14. November 2007

Hallo Zusammen,

ich habe einen Kopf einer Internetseite gestaltet ( siehe Anhang ). Nun habe ich, unschwer zu erkennen, noch eine Lücke in der Mitte des Headers. Diese soll durch ein schmales sich permanent wiederholendes Bildchen ( also ein grauer Streifen ) geschlossen werden. Bisher hatte ich das über background-image und background-repeat gemacht, was aber rechts beim Logo zu einem unschönen Effekt führte. Außerdem kommt mir das auch ein bißchen 'unprofessionell' vor, denn tatsächlich will ich ja nicht den Hintergrund des gesamten Headers, sondern nur die Lücke füllen.

Was mache ich nun mit diesem zusätzlichen Bildchen?
Ich habe schon alles möglich über span-Tag zwischen die div's des Headers etc. probiert, aber es will nicht so richtig klappen.

In diesem Zusammenhang möchte ich auch nochmal erwähnen, dass ich keine fixe Seitengröße angegeben habe, sondern so viel wie möglich mit variablen Größen arbeite ( falls das für die Problemlösung relevant sein sollte ).

Relevanter CSS-Code:

Code:

html,body { 
margin:0;
padding:0;
height:100%;
border-width: 1px;
border-style: solid;
border-color: black;
}
#header {       height: 15%;
  border-width: 1 solid black;
  position:relative; }
   
#header img {  float: left; }
#header .logo { position: absolute; 
  right: 0px;}
 
#header .headerstyle { postition: absolute;
         float: left; }
   
#header .topm_3 { position:absolute;
    right:202px; }

Relevanter HTML-Code:

HTML:

<div id="header">
<embed class="headerstyle" src="flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" border="1"></embed>
<img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="0" />
<img class ="topm_3" src="topm_3.gif" alt="" height="67" width="32" border="0" />
<img class="logo" src="logo_HintergrWeiss.gif" alt="" height="60" width="200" border="0" />
</div>

Vielen Dank für Eure Hilfe!

Maik · 14. November 2007

Hi,

hierfür wären ein paar Modifikationen am HTML-Code erforderlich:

Code:

<div id="header">
     <div id="header_left">
          <embed class="headerstyle" src="flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" border="1"></embed>
          <img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="0" />
     </div>
     <div id="header_right">
          <img class="topm_3" src="topm_3.gif" alt="" height="67" width="32" border="0" />
          <img class="logo" src="logo_HintergrWeiss.gif" alt="" height="60" width="200" border="0" />
     </div>
     <div id="header_center">&nbsp;</div>
</div>

und das dazugehörige Stylesheet lautet nun:

Code:

html,body {
margin:0;
padding:0;
height:100%;
border-width: 1px;
border-style: solid;
border-color: black;
}

#header {
height: 15%;
border-width: 1 solid black;
position:relative;
}

#header img {
float: left;
}

#header #header_left {
float:left;
width:366px;
margin-right:0 !important;
margin-right:-3px; /* Fixt "3px-Gap-Bug" im IE6 */
}

#header #header_right {
float:right;
width:232px;
margin-left:0 !important;
margin-left:-3px; /* Fixt "3px-Gap-Bug" im IE6 */
}

#header #header_center {
margin:0 232px 0 366px !important;
margin:0 229px 0 363px; /* Fixt "3px-Gap-Bug" im IE6 */
height:67px;
background:red; /* Hier definierst du das Hintergrundbild, das die Lücke schliessen soll */
}

#header .headerstyle {
float: left;
}

WIK-Lars · 15. November 2007

Hallo Maik,

uiuiui, im Moment habe ich mir so die ganze Site zerschossen.

Ich denke, dass liegt an den div's , oder? div erzwingt doch immer einen Zeilenumbruch!

Ich versuch's mal mit span.

Gruß, Lars

--> Ok, daran lag's nicht. Ich hab' noch einige Korrekturen vorgenommen. Es ist also jetzt nur noch der Header der wie Kraut und Rüben aussieht ;-) . Ich häng' davon mal ein Bildchen an.
Die Klassen innerhalb der image-Tags habe ich im CSS natürlich ausgeschaltet.

Ich schreib auch nochmal den aktuellen Code auf:

HTML:

<div id="header">

	<div id="header-left">
	<embed class="headerstyle" src="flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" border="1"></embed>
	<img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="0" />
	</div>

	<div id="header-center">
	&nbsp;
	</div>	

	<div id="header-right">
	<img class ="topm_3" src="topm_3.gif" alt="" height="67" width="32" border="0" />
	<img class="logo" src="logo_HintergrWeiss.gif" alt="" height="60" width="200" border="0" />
	</div>
	
</div>

Und alles im CSS, was den Header beeinflusst:

Code:

*{ margin: 0;
padding: 0; }

html,body { 	margin: 0px;
		padding: 0px;
		height: 100%;
		overflow:hidden;
		font-family: Arial, Verdana, sans-serif; }

#header {       height: 15%;
		border-width: 1px solid black;
		position:relative; }
	  
#header img { 	float: left; } 

#header #header-left { 	float: left;
			width: 366px;
			margin-right: 0px; /* !important */
			margin-right: -3px; /* Fixt 3px-Gap-Bug im IE 6 */}

#header #header-center { background-image: url(topm_2.gif);
			 background-repeat:repeat-x; }

#header #header-right { float: right;
			width: 232px;
			margin-left: 0px; /* !important */
			margin-left: -3px; /* Fixt 3px-Gap-Bug im IE 6 */  }

Maik · 15. November 2007

Hi,

vergleich bitte nochmal meinen gestrigen Code und schau mal, in welcher Reihenfolge ich die drei Spalten im HTML-Code notiert, und welche CSS-Formatierung ich für die mittlere Spalte #header_center vorgenommen habe.

WIK-Lars · 15. November 2007

Pardon, so was Blödes. Die div's hatte ich auch schon in der gleichen Reihenfolge wie Du und da war es ähnlich zerhackstückt. Aber ich habe da natürlich beim CSS-Code glatt was vergessen!

Sorry und danke für die Erinnerung!!

WIK-Lars · 15. November 2007

Hi Maik,

kannst Du noch mal drüberschauen?

Ich sehe jetzt keine Unterschiede mehr zu dem, was Du vorgeschlagen hast. Ich habe zusätzlich ja noch die img-classes. Wenn ich die auskommentiere, wird's aber eher schlimmer als besser.

Ich poste hier nochmal den aktuellen Code und hänge ein Bild an, so wie es mit diesem Code dargestellt wird.

HTML:

<div id="header">

	<div id="header-left">
	<embed class="headerstyle" src="flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" border="0"></embed>
	<img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="0" />
	</div>	

	<div id="header-right">
	<img class ="topm_3" src="topm_3.gif" alt="" height="67" width="32" border="0" />
	<img class="logo" src="logo_HintergrWeiss.gif" alt="" height="60" width="200" border="0" />
	</div>
	
 	<div id="header-center">
	&nbsp;
	</div>
	
</div>

Code:

*{ margin: 0;
padding: 0; }

html,body { 	margin: 0px;
		padding: 0px;
		height: 100%;
		overflow:hidden;
		font-family: Arial, Verdana, sans-serif; }

#header {       height: 15%;
		border-width: 1px solid black;
		position:relative; }
	  
#header img { 	float: left; } 

#header #header-left { 	float: left;
			width: 366px;
			margin-right: 0px; /* !important */
			margin-right: -3px; /* Fixt 3px-Gap-Bug im IE 6 */}

#header #header-center {margin:0 232px 0 366px; /* !important */
			margin:0 229px 0 363px; /* Fixt 3px-Gap-Bug im IE6 */
			height:67px;
			background-image: url(topm_2.gif);
		        /* background-repeat: repeat-x; */ }

#header #header-right { float: right;
			width: 232px;
			margin-left: 0px; /* !important */
			margin-left: -3px; /* Fixt 3px-Gap-Bug im IE 6 */  }

#header .logo {    	float: right;
			/* position: absolute;
	       		right: 0px; */ }   
	
#header .headerstyle { /* postition: absolute; */
	       	float: left; }
		 
#header .topm_3 { position:absolute;
	  	right:202px; }

DANKE

Maik · 15. November 2007

Vermutlich liegt es an der absoluten Positionierung des Grafikelements "topm_3.gif" und der float:right-Deklaration für die Klasse .logo, die ich beide in meinem Beispiel komplett aufgehoben hatte.

Ansonsten häng hier mal die Seite incl. der Grafiken als ZIP-Datei an, damit ich mir das 1:1 anschauen kann.

WIK-Lars · 15. November 2007

Ok Maik,

ich habe gerade folgendes festgestellt:

ich arbeite mit Scribe2 als Editor! Dort kann ich per Button mir die Seite im Browser anzeigen lassen. Wenn ich dies tue, erscheint der Header so, wie im letzten Posting dargestellt. Aktualisiere ich jedoch den Browser, ist die Anzeige in Ordnung, es wird also alles so wie gewünscht dargestellt.
Rufe ich den Browser normal direkt aus Windows auf und gebe dort den Pfad zum HTML-Dokument ein, erscheint die Seite direkt richtig.

Es muss also irgendwie mit der Entwicklungsumgebung zu tun haben. Na, so'n Skiet.

Also, sorry falls ich Dich zu viel genervt haben sollte. Aber dies ist mir erst soeben aufgefallen!

Merci für Deine Hilfe!!

WIK-Lars · 16. November 2007

Hallo Maik,

also, so langsam verzweifle ich. Wenn ich den Browser verkleinere wird alles verschoben. Guckst Du Dir mal das Bild im Anhang an?

Ich sende Dir jetzt einen zip-Ordner mit den Dateien (Logo's und Interna habe ich ausgetauscht).

Wäre prima, wenn Du mir da weiterhelfen würdest!

Vielen Dank schon mal!!

Maik · 16. November 2007

Hi,

das Problem lässt sich auf dieselbe Weise wie beim Menü mit der min-width-Eigenschaft beheben.

✔ Lücke mit wiederholendem Bild schließen

WIK-Lars

Erfahrenes Mitglied

Anhänge

Maik

WIK-Lars

Erfahrenes Mitglied

Anhänge

Maik

WIK-Lars

Erfahrenes Mitglied

WIK-Lars

Erfahrenes Mitglied

Anhänge

Maik

WIK-Lars

Erfahrenes Mitglied

WIK-Lars

Erfahrenes Mitglied

Anhänge

Maik

Neue Beiträge