Zwei verschiedene Bilder aber andere Farben

gul_men · 13.10.2013

Also jetzt muss ich etwas fragen, sonst verzweifle ich... :rolleyes:

Wie kann ich jetzt z.b. für die untere Bild eine andere background-color bzw. border color geben ?? (also bei einem Bild sollte es rot und bei anderem violett sein)

Ein ausschint aus einem HTML Datei.

HTML:

<img src="website_psd_TEST/images/lebenj.jpg"/>
<p>ein text-lorem ipsum</p>

<img src="website_psd_TEST/images/lebenj.jpg"/>

So habe ich es im CSS geschrieben, dann werden aber beide Bilder angesprochen.

Code:

img{
    background-attachment:scroll;
    border:3px solid blue;
    padding:15px;
    background-color:red;
    }

Ich will aber das die beide Bilder je eine andere Farbe bekommen, also habe ich neben img noch mit img2 versucht. Ohne erfolg.

Code:

img2{
        border: 1px solid green;
        background-color: purple;
        }

Brauche ich tatsächlich eine ID/class, oder kann ich es anders machen, da ich nicht so oft id/class verwenden will.

Danke.

Darfst du das Gummibärenbild benutzen? Zur Sicherheit verlink ich das erstmal nur. mfG, cebito

cythux · 13.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

du kannst dieses normalerweise

mittels

Code:

input[type="radio"] 
input[type="radio"]:checked
{ deine Deklaration ;  } /** Ansprechen **

http://css-tricks.com/almanac/selectors/c/checked/

gul_men · 13.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

Sorry, input type ist jetzt unwichtig....

Meine frage richtet sich für:

HTML:

<img src="website_psd_TEST/images/lebenj.jpg"/>
<p>ein text-lorem ipsum</p>

<img src="website_psd_TEST/images/lebenj.jpg"/>

Habe meine HTML Code oben ^auch bearbeitet.

cythux · 13.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

Dann poste mal ein wenig mehr von deinem Code HTML/CSS

sehe nur dies

ansonsten empfehle ich Dir classes zu nutzen, die kann mehrfach gebraucht werden

gul_men · 14.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Titel2 Test</title>

<link href="css/style.css" rel="stylesheet" />
</head>

<body>

<div id="menu">
	<ul>
    	<li><a href="index.html">Startseite</a></li>
        <li><a href="ueber.html">Über Uns</a></li>
        <li><a href="portofolio.html">Portofolio</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</div>

<a href="http://www.blablabla.cm"target="_self">ein_texttttt</a> <hr />
	<table border="1">
		<tr>
        	<td>A</td>
            <td rowspan="2"> B </td>
            <td>C</td>
            </tr>
            <tr>
            	<td> 1 </td>
                <td> 3 </td>
            </tr>   
   
    </table>
    
<ul>
	<li>ccccc</li>
    <li>gfgf</li>
</ul>

<ol>
	<li>sss</li>
    <li>fdsfd</li>
</ol>
       
       
<dl>
	<dt>fddf</dt>
    <dd>fdsfsdffdsfdfsdf</dd>
    <dt>gfdgf</dt>
</dl>
      
<hr />

<a href="http://www.psd-tutorials.de/forum/website_psd_TEST/images/ajde2.gif">Anzeigee</a>

<input type="hidden"
name="sss"
value=""
size="150px"
maxlength="600px" />

<textarea
name="sss"
cols="10"
rows="5"></textarea>

<input type="radio"
name="sss"
value="v"
checked="checked" />

<select name="imee" size="8" multiple="multiple">
<option value="1" >broj1</option>
<option value="2" >broj2</option>
<option value="3" >broj3</option>
<option value="1" >broj1</option>
<option value="2" selected="selected">bdr2</option>
<option value="3" selected="selected">br3</option>
<option value="1" selected="selected">bm1</option>
<option value="2" selected="selected">bb2</option>
<option value="3" selected="selected">b43</option>
<option value="1" selected="selected">bddd</option>
<option value="2" selected="selected">bdd2</option>
<option value="3" selected="selected">brffj3</option>
</select>

<img src="http://www.psd-tutorials.de/forum/website_psd_TEST/images/lebenj.jpg"/>

<p>ein text-lorem ipsum</p>
<img src="http://www.psd-tutorials.de/forum/website_psd_TEST/images/lebenj.jpg"/>


</body>
</html>

anstatt

kommt:

<OHNE CODE img src DA AUTOMATISCH psd-tutorials link HINZUFIGT"../website_psd_TEST/images/lebenj.jpg"/>

Code:

@charset "UTF-8";
/* CSS Document */
	
#menu li{list-style-type: none;
         background-color: yellow;
         border: solid 1px purple;
         width: 10em;
         padding: 5px;
         text-align: center;
		 display:inline;}
#menu li a {color:red;
			text-decoration:none;
            font-weight: bold;}
			
#menu li:hover {background-color: navy;}
#menu li a:hover {color: silver;}
#menu {text-align: center;}

/*das oben unwichtig*/

img{
	background-attachment:scroll;
	border:3px solid blue;
	padding:15px;
	background-color:red;
	}

Myhar · 14.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

Um Elemente (Trifft nicht nur auf Bilder, sondern auch auf Überschriften, Paragraphen, etc. zu) unterschiedlich zu stylen hast du zwei Möglichkeiten: Entweder, du vergibst unterschiedliche Klassen, dann kannst du im CSS auch unterschiedliche Styles vergeben

HTML:

<img class="img1" .... />
<img class="img2" .... />

.img1{border: 4px solid red;}
.img2{border: 4px solid blue;}

Eine andere Möglichkeit ist, wenn du anhand deines HTML Codes deine Elemente eindeutig ansprechen kannst (Diese Möglichkeit wird eher selten vorkommen).

HTML:

<p> <img .... /> </p>
<img ... />


p img{border: 4px solid red;} /* Bilder innerhalb von Paragraphen */
img{border: 4px solid blue;}  /* Bilder nicht innerhalb von Paragraphen */

Kommentar 2 ist nicht zu 100% korrekt, die Anweisung gilt natürlich auch für Bilder innerhalb von Kommentaren, wird jedoch von der vorherigen Regel überschrieben. Aber das sind CSS Grundlagen die hoffentlich klar sind ;-)

layoutbraut · 14.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

Eine dritte und sehr komfortable Variante wäre in deinem fall folgende:

sprich die Elemente über ihre Position und Umgebung an.
Sprich: Über Eltern-, Kind- oder Nachbarelemente.

In deinem Fall würde die css-Struktur so aussehen:

Code:

#für alle img, die einem p folgen
p + img {css-anweisung}

oder aber:

Code:

img:nth-child(2) {css-anweisung}

Korrigiert mich, wenn ich mich irre

Myhar · 14.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

Das ist keine dritte, das ist die zweite Lösung mit anderen Selektoren. Ich schrieb, dass er anhand seiner HTML-Struktur die Elemente gezielt selektieren muss und ich denke nicht, dass der von ihm gepostete Aufbau der endgültige ist.
Für weitere Selektoren gibt es hier eine gute Übersicht.

layoutbraut · 14.10.2013

AW: Zwei verschiedene Bilder aber andere Farben

Ich schrieb ja: Korrigiert mich, wenn ich mich irre.

Ich war bis eben der Meinung, dass es simpler ist, das Bild konkret anzusprechen, also über die Position, welche es besitzt....

Dann hab ich die Ausgangsfrage scheinbar falsch verstanden. :schmoll: