nicht angemeldet
Bilder um einen Bereich einfügen wie einen Rahmen
0 0 0 0 0 
MudGuard
0 0 0 1 
Der Martin
Bilder um einen Bereich einfügen wie einen Rahmen
Hallo,
ich würde gerne um einen Bereich, also ein Blockelement (div), Bilder hinzufügen, die dann wie ein Rahmen wirken.
Ich habe versucht einzelne div container in einander zu verschachteln, da ja jedes div ein Blockelement ist, dürfte das gehen, doch es funktioniert nicht.
Würdet ihr bitte schauen ob ich es richtig gemacht habe:
Erstmal meine body css(welcher zu vernachlässigen ist)
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* für neuere Browser */
Jetzt der Versuch die Bilder wie einen Rahmen wirken zu lassen:
Html Code:
[CODE]<div id="headerout">
<div id="links1">
<div id="links2">
<div id="links3">
<div id="mitte1">
<div id="mitte2">
<div id="rechts1">
<div id="rechts2">
<div id="rechts3">
<div id="headerin">
</div><!--close div id="headerin-->
</div><!--close div id="rechts3-->
</div><!--close div id="rechts2-->
</div><!--close div id="rechts1-->
</div><!--close div id="mitte2-->
</div><!--close div id="mitte1-->
</div><!--close div id="links3-->
</div><!--close div id="links2-->
</div><!--close div id="links1-->
</div><!--close div id="headerout"-->
und jetzt die css:
div#headerout {
height:100%;
width:100%;
}
/*Der Container der die Bilder anzeigen soll die dann für den Header-Inhalt dienen*/
div#links1 {
height:10%;
width:10%;
text-align:left;
margin-top:0%;
margin-left:0%;
background-image:url(layout/png/layout-content/oben-links.png);
}
/*Bild für die Ecke oben links*/
div#links2 {
height:80%;
width:10%;
text-align:left;
margin-top:10%;
margin-bottom:10%;
margin-left:0%;
background-image:url(layout/png/layout-content/mitte-links.png);
}
/*Bild für den linken Rand*/
div#links3 {
height:10%;
width:10%;
text-align:left;
margin-left:0%;
margin-bottom:0%;
background-image:url(layout/png/layout-content/unten-links.png);
}
/*Bild für die Ecke unten Links*/
div#mitte1 {
height:10%;
width:80%;
text-align:center;
margin-top:0%;
background-image:url(layout/png/layout-content/oben-mitte.png);
}
/*Bild für den Rand oben in der Mitte*/
div#mitte2 {
height:10%;
width:80%;
text-align:center;
margin-bottom:0%;
background-image:url(layout/png/layout-content/unten-mitte.png);
}
/*Bild für den Rand unten in der Mitte*/
div#rechts1 {
height:10%;
width:10%;
text-align:right;
margin-top:0%;
margin-right:0%;
background-image:url(layout/png/layout-content/oben-rechts.png);
}
/*Bild für die Ecke oben rechts*/
div#rechts2 {
height:80%;
width:10%;
text-align:right;
margin-top:10%;
margin-bottom:10%;
margin-right:0%;
background-image:url(layout/png/layout-content/mitte-rechts.png);
}
/*Bild für den rechten Rand*/
div#rechts3 {
height:10%;
width:10%;
text-align:right;
margin-right:0%;
margin-bottom:0%;
background-image:url(layout/png/layout-content/unten-rechts.png);
}
/*Bild für die Ecke unten rechts*/
div#headerin {
margin:10%;
background-image:url(layout/png/layout-content/mitte-mitte.png);
}
/*Der Inhalt des Header*/
Die Bilder werden überhaupt nicht angezeigt. Würdet ihr mir bitte helfen.
Würdet ihr das auch so machen und die einzelnen div's in einander verschachteln oder doch Inlineelemente in die div's verschachteln wie z.B. span's oder doch etwas ganz anderes?
Danke sehr.
-
Om nah hoo pez nyeetz, carboneum!
Die Bilder werden überhaupt nicht angezeigt. Würdet ihr mir bitte helfen.
Versuch mal, ob du die Seite online bekommst, denn niemand möchte das in seinen Editor kopieren und kann damit dann doch nichts anfangen, weil die Bilder ja nicht auf seiner Festplatte sind.
Warum die Bilder nicht angezeigt werden ... prüfe Pfad, Schreibweise
Würdet ihr das auch so machen und die einzelnen div's in einander verschachteln oder doch Inlineelemente in die div's verschachteln wie z.B. span's oder doch etwas ganz anderes?
Ich würde ein Element verwenden, diesem mehrere Hintergründe geben und den Inhalt per padding ins Innere des Divs schieben.
Matthias
--
1/z ist kein Blatt Papier.
-
Versuch mal, ob du die Seite online bekommst, denn niemand möchte das in seinen Editor kopieren und kann damit dann doch nichts anfangen, weil die Bilder ja nicht auf seiner Festplatte sind.
Hallo Matthias, danke für deine Antwort,
ich habe die Seite mal online gestellt:http://www.internet-stranica.org/test/
Ich würde *ein* Element verwenden, diesem mehrere Hintergründe geben und den Inhalt per padding ins Innere des Divs schieben.
Das ist aber adnn css 3 oder? Ich würde liebe css 2.1 verwenden da es auch von älteren Browsern unterstützt wird. Danke.
-
Om nah hoo pez nyeetz, carboneum!
Versuch mal, ob du die Seite online bekommst, denn niemand möchte das in seinen Editor kopieren und kann damit dann doch nichts anfangen, weil die Bilder ja nicht auf seiner Festplatte sind.
Hallo Matthias, danke für deine Antwort, ich habe die Seite mal online gestellt:
http://www.internet-stranica.org/test/
Die Bilder werden nicht angezeigt, weil die Elemente leer sind.
Matthias
--
1/z ist kein Blatt Papier.
-
Ich habe es jetzt noch einmal Versucht, den Inhalt eingefügt und ein wenig verändert.
http://www.internet-stranica.org/test/
Der Anfang ist schon einmal gemacht, doch ich bekomme nicht die ganzen Bilder angezeigt und die Bilder sind sehr klein.
Kann ich auch in der Html Datei die geschützen Leerzeichen löschen und den Platz zwschen den Einzelnen div's für die Bilder leer lassen? Wenn ich das mache, werden mir die Bilder nicht angezeigt.Würdet ihr mir bitte helfen, ich würde gerne den header zentriert haben, doch die Einzelnen Teile für Links z.B. Links gerichtet, ich kriege das einfach nicht hin...
-
Hi,
Der Anfang ist schon einmal gemacht, doch ich bekomme nicht die ganzen Bilder angezeigt und die Bilder sind sehr klein.
Du setzt die Elemente auf display:inline, damit sind width/height wirkungslos.
inline-block könnte helfen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
inline-block könnte helfen.
cu,
AndreasDanke Andreas, das hat geholfen, nur wie bekomme ich jetzt den Abstand zwischen den einzelnen inline-(Block) Elementen in den einzelnen Zeilen?
Hier ein Link damit ihr seht was ich meine:
-
Ich meine natürlich wie ich den Abstand weg (kleiner) bekomme.
-
Om nah hoo pez nyeetz, Carboneum!
wahrscheinlich, indem du whitespace vermeidest.
Matthias
--
1/z ist kein Blatt Papier.
-
Vielen Dank für deine Antwort,
welche Angabe für die grösse würdest du mir empfehlen damit es sich um ein fluid Layout handeln kann, ich habe es mit em versucht doch die Angabe sieht in jedem Browser anders aus...Bei % kann ich kein height: angeben, die Bilder werden dann nicht angezeigt.
-
Om nah hoo pez nyeetz, Carboneum!
Bei % kann ich kein height: angeben, die Bilder werden dann nicht angezeigt.
eine Prozentangabe bezieht sich auf die Abmessung des Elternelementes. Wenn dieses keine Höhenangabe hat, wird auch die Höhe des gewünschten Elementes Null sein.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
Hallo,
Ich meine natürlich wie ich den Abstand weg (kleiner) bekomme.
indem du
a) die seitlichen margins (ggf. paddings) der beteiligten Elemente auf 0 setzt
b) darauf verzichtest, zwischen den Elementen Whitespace zu notieren, der als Inline-Inhalt
(in diesem Fall als Leerzeichen) gerendert wirdCiao,
Martin--
Der Professor sitzt beim Essen in der Mensa. Ein Student setzt sich ihm unaufgefordert gegenüber.
Professor: Seit wann essen denn Schwein und Adler an demselben Tisch?
Student: Na gut, dann flieg' ich eben zum nächsten Tisch.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Vielen Dank für die Antworten,
ich habe jetzt die Seite so geändert das die Bilder gut zu einander passen,
doch welche Grössenangabe würdest du mir empfehlen?
Ich habe für die Fonts im body eine em angabe gemacht und dann die einzelnen bilder auch mit em angegeben, doch die Box sieht je nach Browser immer anders aus...welche Grössenangabe kann ich verwenden wenn ich ein fluid Layout will, also das sich auch mit der Resolution des Bilschrims anpasst?
Wenn ich % verwende, kann ich in css kein height: angeben, der Wert wird einfach nicht übernommen... Welche angabe könnte ich noch verwenden?
-
-
-
-
-
-
-
-