✔ Css Grafiken wie hier die Boxen ?

[polygnom]

Kann man das in der Höhe auch so flexible gestalten,

dass es sich dem Text anpasst bzw. der Länge des Textes?

EDIT: Sorry hatte keine Zeit vorher das zu testen werd es aber gleich machen
Danke für Antwort!

 

[Maik]

@polygnom: Das angehängte Beispiel ist in der Höhe flexibel.

 

[polygnom]

eine Frage hätte ich noch
und zwar kann ich das Aufrufen der Dateien also der Bilder nicht auslagern?
d.h in eine externe css Datei

hab jetzt schon einige Zeit rum probiert
der Rand wurde nur gezeichnet wenn ich das

<style type="text/css">
div.links {
	background: url(bilder/randlinks.gif) repeat-y;
}
div.rechts {
	background: url(bilder/randlinks.gif) repeat-y right;
}
div.oben {
	background: url(bilder/randoben.gif) repeat-x;
}
div.unten {
	background: url(bilder/randoben.gif) bottom repeat-x;
}
div.linkeObereEcke {
	background: url(bilder/eckelinksoben.gif) left top no-repeat;
}
div.rechteObereEcke {
	background: url(bilder/eckerechtsoben.gif) right top no-repeat;
}
div.linkeUntereEcke {
	background: url(bilder/eckelinksunten.gif) left bottom no-repeat;
}
div.rechteUntereEcke {
	background: url(bilder/eckerechtsunten.gif) right bottom no-repeat;
}
div.inhalt {
	padding: 10px 10px 15px 10px;
}
</style>

in der html hatte und an der externen css Datei sonst nichts verändere
wo ich die Zeilen oben aurufe in der externen css Datei wird ja egal sein
imo ist es am Anfang
natürlich ohne das <style>

 

[Maik]

Dann wird wohl der Verzeichnispfad in der externen CSS-Datei nicht stimmen.

Wenn das beispielsweise die Datei- / Verzeichnisstruktur ist:

• html-doc
• bilder
  • randlinks.gif
• css
  • layout.css

lautet der Pfad in der layout.css "../bilder/randlinks.gif".

 

[polygnom]

Danke für die schnelle Antwort!

Du hattest recht und schon geht es!
Man so ein dummer Fehler einfach übersehen

könntest mir noch nen Tip geben wie der Code aussähe wenn oben und unten fixe Breite mit Grafikrand

da ich in Header ein Banner drin hab sieht es dann nicht so gut aus wenn der Rand unter das Banner rutscht

div.oben {
	background: url(../bilder/rand2.gif);
	width:907px;
	height:7px;
}
div.unten {
	background: url(../bilder/rand2.gif);
	width:907px;
	height:7px;

hab das so probiert haut aber nicht so ganz hin

IE6 hab ich rechts und links aber Ecken passen nicht
Firefox passt gar nichts

 

[Maik]

Kannst du mal dein Modell als ZIP-Datei hochladen?

 

[polygnom]

du kannst es dir auch Online anschauen

css Datei dazu kann ich Posten

@charset "utf-8";
div.links {
	background: url(../bilder/randlinks.gif) repeat-y;
}
div.rechts {
	background: url(../bilder/randlinks.gif) repeat-y right;
}
div.oben {
	background: url(../bilder/rand2.gif);
	background-position:center top;
	width:907px;
	height:7px;
}
div.unten {
	background: url(../bilder/rand2.gif);
	background-position:center bottom;
	width:907px;
	height:7px;
}
div.linkeObereEcke {
	background: url(../bilder/eckelinksoben.gif) left top no-repeat;
}
div.rechteObereEcke {
	background: url(../bilder/eckerechtsoben.gif) right top no-repeat;
}
div.linkeUntereEcke {
	background: url(../bilder/eckelinksunten.gif) left bottom no-repeat;
}
div.rechteUntereEcke {
	background: url(../bilder/eckerechtsunten.gif) right bottom no-repeat;
}
div.inhalt {
	padding: 10px

}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	background-position: center top; 
	/*background-repeat: no-repeat;*/
	text-decoration:none;
}
#content {
	background-repeat: no-repeat;
	background-position: center;
	text-align:left;
}
#header {
	background-image: url(../bilder/entwurfwell3.jpg);
	background-repeat: no-repeat;
	background-position: center;
	margin: 7px auto;
	height: 183px;
}
#header p {
	visibility: hidden;
}
#rand {
	background-image: url(../bilder/rand2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 7px;
}
#rechts {
	width: 830px;
	background-position:center;
	padding: 30px;
	text-align: left;
	float: left;
	margin: 10px 0 0 20px;
	height: 670px;
}
#footer {
/*background-image: url(../bilder/rand3.jpg);
	height: 40px;
	background-repeat: no-repeat;
	background-position: 2px 0px;*/
}
#footer a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: italic;
	color: #999999;
	text-decoration: none;
	margin: 0 0 0 700px;
	line-height: 30px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
	margin: 0px;
	padding: 0px;
}

http://www.simi-onlineshop.de/home.html

ich ändere alles immer Online also auf dem Webspace

irgendwie zentriert er es mir nicht mehr
das ist mir aufgefallen wobei ich über center drin hab

EDIT: ein wenig weiter bin ich shcon gekommen
Rand links und rechts hab ich jetzt mit den Ecken
fehlt nur noch oben und unten und zentriert

<body>
<div class="oben">
  <div class="unten">
    <div class="links">
      <div class="rechts">

nur die Reihenfolge oben geändert

 

[Maik]

Wie sich die Box mit einer fixen Breite einrichten lässt, wurde in diesem Thema aber schon besprochen.

Dass die Grafik "rand2.gif" nicht angezeigt wird, liegt einfach daran, dass sie nicht auf dem Server liegt.

Zudem solltest du die vorgegebene Reihenfolge der DIVs einhalten.

 

[polygnom]

wegen der Grafik rand2 die war schon oben
sonst wäre sie unter header nicht angezeigt worden aber egal

hab es jetzt hin bekommen
hattest recht einfach das davor lesen

nur beim ersten Versuch eine id statt ne class genommen

das mit min-height wird ja fast nicht untersützt naja
wäre schon gut gewesen das schaff ich jetzt aber allein auch

ein fettes DANKE
für deine Hilfe!!

 

[Maik]

Hi,

wenn du das DIV .content im Fenster horizontal zentrieren möchtest, ist background-position:center die falsche Wahl, da sich diese Angabe auf die Hintergrundposition bezieht. Stattdessen solltest du hier margin:0 auto deklarieren.

Eine Mindesthöhe richtest du für die Box folgendermaßen ein:

div.inhalt {
	padding: 10px;
        min-height: 600px; /* Mindesthöhe in modernen Browsern */
        height:auto !important; /* !important-Regel für moderne Browser */
        height: 600px; /* Mindesthöhe in IE <7 */
}