01.08.2009, 09:12
|
|||
|
|||
transparenter Rahmen um Bilder
Moin,
ich habe eine Bildergallerie auf meine Seite; die Bilder sind mal im Längs- und mal im Querformat. Sie werden per div gefloatet und damit die Anordnung etwas sortierter aussieht, wollte ich allen Bildern einen gleich großen (transparenten) Rahmen hinzufügen. Bei der Breite klappt das auch, aber bei der Höhe habe ich Probleme. Wen ich dem div .left ein img gebe, werden die Bilder selbst in die Größe gequetscht, sollen aber nicht. Eine der Seiten ist Wolfshunde-Herne , bei den Längsbildern wird der Rahmen hinzugefügt, so das die Breite stimmt, bei den Querbildern (nur die vom 30.7.) fehlt aber ein Stück in der Höhe. Code:
body {
background-image : url('/hintergrund.jpg');
font-family : "Comic Sans MS", Georgia, Arial, sans-serif;
text-align : center;
color : #000000;
height : 100%;
}
#contents {
position : fixed;
top : 12px;
left : 0;
bottom : 30px;
right : 0;
overflow : auto;
}
#footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 30px;
overflow : auto;
text-align : right;
}
#header {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 12px;
overflow : auto;
}
* html body {
padding : 0 0 0 0;
height : 100%;
}
* html #contents {
height : 95%;
width : 100%;
}
* html #footer {
height : 5%;
}
* html #menu {
position : absolute;
}
#menu {
float : left;
width : 17%;
height : 96%;
margin : 0 auto;
min-width : 15%;
position : fixed;
}
#inhalt {
display : inline;
float : left;
margin-left : 15%;
width : 80%;
margin-bottom : 1%;
bottom : 1%;
}
#hgbilder {
display : inline;
float : left;
margin-left : 15%;
width : 80%;
margin-bottom : 1%;
bottom : 1%;
}
div.left{
margin : 1em 1em;
width: 224px;
height: 168px;
}
#steckbrief {
font-size : large;
width : 80%;
float : left;
margin-left : 15%;
}
.center {
text-align : center;
}
.right {
float : right;
}
.left {
float : left;
}
.clear {
clear : both;
}
.style1 {
margin-top : -1px;
margin-bottom : -1px;
}
.style2 {
margin-top : -4px;
text-align : center;
font-size : small;
}
.style3 {
text-align : center;
font-size : small;
}
img a {
border : none;
}
img {
border : none;
}
.box {
margin : auto;
width : 500px;
border : 1px solid #00008b;
background : #edeccd;
margin-bottom : 15px;
}
h4 {
padding : 3px 0 3px 8px;
background : #e2e1c2;
color : #808080;
font-size : 0.9em;
margin : 0;
}
.box p {
font-size : 0.8em;
padding : 8px;
margin : 0;
}
a {
color : #000000;
text-decoration : none;
}
a:hover {
background : none;
color : #666;
}
ul, li {
margin : 0;
padding : 0;
list-style-type : none;
}
ul#menue {
width : 150px;
margin : 3em 0 0 0;
}
ul#menue li a {
margin : 2px 0;
height : 20px;
line-height : 20px;
text-align : center;
border : 1px solid #f2f2f2;
display : block;
color : #000;
text-decoration : none;
}
ul#menue li a + ul.submenue {
display : none;
font-style : italic;
color : #808080;
}
ul#menue li a:focus + ul.submenue {
display : block;
color : #808080;
}
ul#submenue li a {
background : none;
}
.style5 {
color : #808080;
}
.textsmall {font-size: small;margin-top : -1px;
margin-bottom : -1px; }
Was muss ich ändern? Tanja 
|
| Sponsored Links |
|
01.08.2009, 09:42
|
||||
|
||||
|
Was du auf jedenfall ändern musst ist die Schriftart
 Zu dem Rahmen: so ganz hab ich nicht verstanden, wo das Problem ist. Wenn der Rahmen für Hoch- und Querformat gleich groß sein soll, dann gib dem Div um das Bild doch ein Hintergrundbild. Sehr schöne Fotos übrigens.
|
| Sponsored Links |
|
01.08.2009, 09:56
|
|||
|
|||
|
Die Schriftart mach ich später, erst mal war mir wichtig, das die Anzeige in den IE´s fast gleich ist.
Mein Problem: Meine Querbilder sind 224x168, die entsprechenden Längsbilder sind 126x168: die Höhe ist bei beiden ok, dem Längsbild soll aber ein Rahmen zugefügt werden, so das es auch 224 breit ist. Das klappt ja auch. Wenn aber das Bild keine 168 hoch ist (wie z.B. direkt das erste Bild, ist 149 hoch), soll es auch einen "Rahmen" bekommen, das klappt nicht. Zugewiesen habe ich Code:
div.left{
margin : 1em 1em;
width: 224px;
height: 168px;
}
Tanja
|
|
01.08.2009, 10:09
|
||||
|
||||
|
Natürlich werden die Bilder verzerrt. Der Selector div.class img spricht ja genau alle Bilddatein an, und setzt deren Breite/Höhe auf die entsprechenden Werte, egal, ob Hoch- oder Querformat.
Einen Rahmen seh ich aber immer noch nicht. Was Spricht denn dagegen, wenn du div.left ein Hintergrundbild gibst, um z.B. einen Schlagschatten zu simulieren: A List Apart: Articles: CSS Drop Shadows
|
|
01.08.2009, 10:15
|
|||
|
|||
|
Der "Rahmen" hat auch keinen Hintergrund zugewiesen, er macht ein Hochkantbild aber trotzdem breiter, so das es mittig unter einem Längsbild angezeigt wird. Ein Hintergrundbild für den Rahmen hatte ich bereits per Hand gemacht, das beisst sich aber mit dem eigentlichen Hintergrund.Wolfshunde-Herne direkt das erste Bild...
Ich möchte also, das Bilder, die nicht die entsprechende Breite oder Höhe haben automatisch den Rest als transparenten "Rahmen" bekommen. Tanja
|
|
01.08.2009, 10:59
|
||||
|
||||
|
Hi,
sorry wenn ich mich einmische, aber die Lösung mit den Bildern ist imho ausgesprochen suboptimal: Die Bildergalerie ist eine Aufzählung von Bildern und semantisch somit eine ungeordnete Liste. Wenn man unterschiedlich hohe Bilder mit float "auf die Reihe bringt", sieht das je nach Unterschied so aus, als würden sie an einer Wäscheleine hängen. Optisch ist es da oft günstiger, erstmal für jede Reihe eine ul zu machen und für li display:inline zu definieren. Dann ist die unterschiedliche Höhe oben. Man kann dann den img's über eine Klasse einen transparenten Rahmen zuweisen und für img a:hover dann einen andersfarbigen Rahmen. Dann springt da beim hovern nix und man hat einen sichtbaren Effekt. Horizontale Abstände zwischen den Bildern kann man auch mit margin erzeugen.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus
|
|
01.08.2009, 11:08
|
||||
|
||||
|
Zitat:
Oder mit CSS: http://www.quirksmode.org/css/opacity.html
|
|
01.08.2009, 12:05
|
|||
|
|||
|
Die Bilder sollen einfach nur gleich angeordnet werden. Der Standart ist bei mir 224x168, ist es nicht breit genug, soll ein "Rahmen" dazu, so das es wie ein Standartbild angeordnet wird (das klappt ja auch). Ist es nicht hoch genug, soll auch ein "Rahmen" dazugefügt werden (das klappt nicht).
Die Galerien jetzt noch anders als bisher zu gestalten (mit li) fällt flach, es sind so insgesamt 150 Galerien, die alle gleich aufgebaut sind. Mit Hover brauche ich nichts, einfach nur das Bild, das optisch immer gleich in der Reihe angeornet ist. Zitat:
Tanja
|
|
01.08.2009, 15:16
|
||||
|
||||
|
Wie man Hintergrundfarben definiert, findest du hier:
background: Hintergrundbilder: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets The Styleworks ist auch zu Empfehlen, wenn man was nachschlagen will: The StyleWorks { Herzlich Willkommen } Ich würde es folgendermaßen versuchen: HTML-Code:
<div class="frame"> <img /> </div> Code:
CSS:
* {
margin:0;
padding:0;
}
div.frame {
widht:224px;
height:168px;
background: #000; // hier die gewünschte Farbe
}
div.frame img {
display:block;
margin:0 auto;
}
|
| Sponsored Links |
|
01.08.2009, 17:29
|
|||
|
|||
|
Hi,
ich vermute, die Bildunterschrift, die mit im div plaziert ist, mach mir einen Strich durch die Rechnung, habe jetzt schon vieles probiert (auch das obige geht nicht). Ein Bild zentriert in einem Rahmen ... aber die Bildunterschrift ... ich denke, ich werde die einzelnen Bilder (sind ja nur sehr wenige, die ein völlig anderes Format haben) per Hand auf die richtige Grösse bringen müssen ... Tanja
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Bilder als Rahmen verwenden | guwapo | CSS | 6 | 28.01.2007 03:21 |
| Bilder als Link haben einen Rahmen | o_anonym | CSS | 3 | 11.05.2006 11:18 |
| Rahmen um Bilder im IE | mab | CSS | 3 | 09.03.2006 20:23 |
| Links bekommen Rahmen, verlinkte Bilder nicht? | heiko_rs | CSS | 1 | 06.03.2006 23:12 |
| automatischen rahmen mit schatten um bilder | newbie2004 | CSS | 2 | 20.10.2005 16:19 |
Linear-Darstellung
