Florian: Layout mit Bild am unteren Rand

SELF-Forum

Layout mit Bild am unteren Rand

Florian
– Informationen zu den Bewertungsregeln

Hi,
hab ein kleines Problem mit dem Layout bzw. Hintergrund meiner Seite.
Der Hintergrund ist ein Farbverlauf. Dazu hatte ich einfach einen 1px breiten Streifen mit dem Farbverlauf mit repeat-x als Hintergrund gesetzt. Ich möchte allerdings, dass der Verlauf auch bei kleinen Auflösungen/Fenstergrößen ganz angezeigt wird, also dass er in der Höhe verkleinert wird.
2tes Problem: Unten am Fensterrand sollte immer ein weiteres Bild angezeigt werden.
Ich habe es bereits mit einem Table-Layout versucht. Ja ich weiß das, das nicht besonders gut ist, aber ich weiß einfach nicht wie ich das mit reinem CSS realisieren soll. Hat übrigens auch nicht funktioniert. Das Bild schwebte nach wie vor unberührt unter dem Text herum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
	...  
	<body>  
		<table height="100%">  
		<tr><td>  
			<div id="header">  
				...  
			</div>  
			<div id="content">  
				...  
			</div>  
		</td></tr>  
		<tr><td height="100px">  
			<div id="foot">  
				<img src="foot.png">  
			</div>  
		</td></tr>  
		</table>  
	</body>  
</html>

Könnt ihr mir sagen, was ich falsch mache, bzw. wie ich das mit CSS umsetzen kann.

Danke schonmal

mfg Florian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layout mit Bild am unteren Rand

    tomtom
    – Informationen zu den Bewertungsregeln

    Hallo,

    also, dass mit dem Fensterrand bzw. (<div id="foot">) ist ziemlich einfach. Du kannst das Bild im DIV als Hintergrund platzieren, z.B.: sowas:

    #foot{  
width:??px;  
height:??px;  
background: url(....bilddatei...) top center no-repeat;  
}

    und wenn Du das an einer bestimmten stelle haben willst, kannst Du es mit margin bzw. padding dahin verschieben, kurz gesagt:

    #foot{  
width:??px;  
height:??px;  
margin:??px ??px ??px ??px;  
padding:??px ??px ??px ??px;  
background: url(....bilddatei...) top center no-repeat;  
}

    Mit <table> arbeitet man wirklich nur dann, wenn man was wirklich mit Tabellen zu tub hat. Ansonsten überhaupt nicht.

    Das andere Problem mit "repeat-x" habe ich nicht so ganz verstanden. Kannst Du mir die Internetseite nennen, dann kann ich mal rauf gucken. Hast Du es mal mit dem Attribut "position" absolute bzw. relative in der CSS versucht?

    Gruß
    tomtom

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Layout mit Bild am unteren Rand

      Florian
      – Informationen zu den Bewertungsregeln

      Danke für deine Antwort

      #foot{

      width:??px;
      height:??px;
      margin:??px ??px ??px ??px;
      padding:??px ??px ??px ??px;
      background: url(....bilddatei...) top center no-repeat;
      }

        
Das funktioniert glaub ich nicht, da ich ja nicht genau sagen kann wo das Bild angezeigt werden soll. Es soll nur immer ganz unten am Fensterrand angezeigt werden. Und der ist ja nicht bei jedem an der gleichen Stelle.  
  

> Das andere Problem mit "repeat-x" habe ich nicht so ganz verstanden. Kannst Du mir die Internetseite nennen, dann kann ich mal rauf gucken. Hast Du es mal mit dem Attribut "position" absolute bzw. relative in der CSS versucht?  
  
Hab's leider noch nirgendwo hochgeladen. Ich möchte einen Farbverlauf von blau nach weiß. Damit der auch auf großen Bildschirmen gut aussieht und die Seite füllt ist der relativ hochauflösend. Hab ich jetzt allerdings einen kleineren Bildschirm wird nur ein Teil des Farbverlaufs angezeigt, also nur der obere Teil. Der Teil mit weiß ist dann kaum bis nicht mehr zu sehen. Deshalb bräuchte ich etwas mit dem ich die Höhe des Verlaufs verkleinern könnte. Hoffe das war verständlicher.  
  
mfg Florian
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Layout mit Bild am unteren Rand

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Florian:

    nuqneH

    Der Hintergrund ist ein Farbverlauf. Dazu hatte ich einfach einen 1px breiten Streifen mit dem Farbverlauf mit repeat-x als Hintergrund gesetzt.

    Den Streifen solltest du breiter machen.
    ↗Pixelgröße für kachelbare Hintergrundgrafik

    Moderne Browser beherrschen Farbverläufe auch ohne Grafiken.
    ↗Mozilla Developer Center: Using gradients
    ↗Surfin’ Safari: Introducing CSS Gradients
    ↗Broken Links: CSS gradient syntax: comparison of Mozilla and WebKit

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln