HTML Farbe und Ausrichtung von Text

[Black Evil]

Hi !

Konkret habe ich grad das Problem, dass ich auf einer sehr schlichten Homepage mehrere Fotos anordnen will, die einen Link enthalten und eine farbige Unterschrift. (Hintergrund ist komplett schwarz)

Mit meinem eigenen knowhow und etwas herumgesuche bin ich bisher mit den Fotos soweit gekommen :

<div class="img150">
<div style="position:absolute; top:200px; left:400px">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1"</a>
<p style="clear:left">Portrais<"/p>
<font color="white"> Weiße Schrift </font>
</div>

Es kann natürlich sein, dass das ein oder andere falsch oder überflüssig ist, aber so habe ich es mir jetzt zusammengepuzzelt.

Was ich nicht hinbekomme, ist den Untertext "Portrais" farbig zu gestalten.
Momentan ist es so, dass dieser Text schwarz ist (schwarzer Hintergrund) und "Weiße Schrift" in weiß. Ich hätte aber gern "Portrais" in weiß. Wie geht das ??

 

[@ndi]

Bei portraits noch bei style="color:#ffffff;" hinzufügen!

 

[Black Evil]

So ?

<div class="img150">
<div style="position:absolute; top:200px; left:400px">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1"</a>
<p style="clear:left"<Portrais>";style= color:#ffffff;</p>
</div>

Haut aber nicht hin. Kann es ein, dass ich da was mit den Pfeilen und Anführungszeichen falsch mache ?

 

[@ndi]

nicht ganz

<div class="img150">
<div style="position:absolute; top:200px; left:400px">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1"</a>
<p style="clear:left; color:#ffffff;">Portraits</p>
</div>

 

[fx:flow]

<div class="img150">
<div style="position:absolute; top:200px; left:400px[B][COLOR="Red"];[/COLOR][/B]">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1" [B][COLOR="Blue"]/[/COLOR][COLOR="Red"]>[/COLOR][/B]</a>
<p style="clear:left; color:#ffffff;">Portraits</p>
</div>

img-tags werden für gewöhnlich, da sie keinen abschluss-tag in dem sinne haben, so gehandhabt/beendet:

<img src="" alt="" />

am ende von solchen sachen wie style="" immer ein ; setzen, also

style="jajaja; blablabla; ende;"

sonst hast du ja auf alles geachtet. wenn sich dieser code für das bild wiederholt (bspw. 20 bilder nach obigem muster), würde ich statt die farbe (von portrait) direkt anzugeben mittels color:#ffffff; lieber eine klasse erstellen und das einmalig über css definieren (wenn du was änderst, geht das schneller):

<p class="bildbeschr">Portraits</p>

in der css-file (die du zu haben scheinst, ich sehe da schon im größten div-tag eine klasse) dann bspw:

.bildbeschr
{
clear:left;
color:#ffffff;
}

 

[Black Evil]

AHA ! Vielen Dank für eure Hilfe !

Und wie kann ich den Text nun mittig unter die Fotos bekommen ? Jetzt steht er nämlich linksbündig unter dem Foto.

 

[fx:flow]

da gibt es viele varianten. wenn du von anfang an ein wenig interesse daran hast, dass dein code fein konform ist, schau immer mal im html validator von w3c.org

aber das nur nebenbei (ab und an nervt das teil auch mit lächerlichen fehlermeldungen).

deinen text kannst du auf viele weisen zentrieren. hier passend wäre text-align. passt, wie es schon verrät, hier natürlich eher nur auf text:

<div class="img150">
<div style="position:absolute; top:200px; left:400px;">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1" /></a>
<p style="clear:left; color:#ffffff; text-align:center;">Portraits</p>
</div>

wenn dir der abstand von diesem text zum bild nach oben nicht passt (bei mir setzt er ca. eine zeile abstand zw. bild und text), kannst du den auch noch festsetzen (ebenfalls per css - margin -> außenabstand eines elements; margin: ...):

<div class="img150">
<div style="position:absolute; top:200px; left:400px;">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1" /></a>
<p style="clear:left; color:#ffffff; text-align:center; [B][I]margin:0px 0px 0px 0px;[/I][/B]">Portraits</p>
</div>

wobei bei margin der erste wert für oben, dann rechts, unten und letztlich links ist.

viel spaß.

 

[Black Evil]

Aaaaaahhhhhh.....! Danke - funktioniert gut !

Und wie kann man nun noch die Schriftart anpassen ? Muß ich dafür irgendeinen Header einfügen, oder kann html das so ?

 

[fx:flow]

html kann mit css zusammen eine menge.

http://www.css4you.de/Schrifteigenschaften/fontproperty.html

der link müsste dir hierzu verhelfen:

<div class="img150">
<div style="position:absolute; top:200px; left:400px;">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1" /></a>
<p style="clear:left; color:#ffffff; text-align:center; [B]font-family: verdana, trebuchet ms;[/B] margin:0px 0px 0px 0px;">Portraits</p>
</div>

die aufzählung dient dazu, dass auf die schriftart trebuchet ms zurückgegriffen wird, sollte verdana nicht beim endbenutzer vorhanden sein. (das geht auch mit mehr als 2 schriftarten)

unter dem link findest du sehr viel, auch sehr gut geordnet nach gebieten.

 

[Black Evil]

Mensch - ich bin richtig stolz ! Mein Homepage-Entwurf nimmt Formen an.

Das mit der Textausrichtung ist ja doch ganz schön kompliziert. Wie bekommt man denn eine Ausrichtung zur Unterseite hin ? Ich will nämlich noch eine eMail-Adresse unter die Fotos setzen. Da ich diese Seite zur Übung erstmal sehr einfach gestalten will und zB gern erstmal .css-klassen weglassen würde, wäre eine möglichst einfach Lösung schön.

So klappt dass jedoch nicht :

<div class="img150">
<div style="position:absolute; top:200px; left:400px;">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1" /></a>
[B]<p style="clear:left; color:#ffffff; text-align:bottom;">Text unter den Fotos</p>[/B]
</div>

 

[fx:flow]

du musst auch bei den verwendeten attributen schauen, welche werte sie unterstützen.

text-align kann bspw. kein top oder bottom annehmen:

http://www.css4you.de/Texteigenschaften/text-align.html (unten)

mal die verständnisfrage: an welcher durchsichtigen linie willst du "Text unter den Fotos" ausrichten? im bild ist deine momentane konstruktion optisch veranschaulicht. (hab mich anfangs vermalt). ein div nimmt, wenn du es nicht anders befiehlst, 100% breite ein. die höhe richtet sich nach dessen inhalt. deine 200px und 400px sind ja einfach der abstand zum fensterrand oben u. links.

vertikale ausrichtungen sind immer etwas schwammig, daher würde ich das anders lösen. statt des p-elements ein weiteres div (da die jeweils immer 100% breite haben, kommen die immer untereinander, also wie zeilen in einer tabelle). vom unteren div kannst du dann bspw wieder den außenabstand (margin - in dem falle aber nur margin-top; alle anderen außenabstände sind hier unnötig) bestimmen und so hast du auch deinen abstand zwischen oberem div (bild) und unterem div (text). vertikales ausrichten ist nun unnötig. veranschaulichung bild unten.

<div class="img150">
<div style="position:absolute; top:200px; left:400px;[B]height:300px;[/B]">
<a href="index.html"><img src= "images/IMG_7777auswahl.jpg" width="150" height="150" border="0" alt="Auswahl1" /></a>
[B]<div[/B] style="clear:left; color:#ffffff; text-align:center;[B]margin-top:20px;[/B]">Text unter den Fotos[B]</div>[/B]
</div>
</div>

 

[Deleted 143651]

Alles anschaulich und sehr schön erklär findest du auch auf:
http://de.selfhtml.org/

Dort ist ein super tutorial, was dir vom ersten bis zum letzten <tag> alles erklärt, was du für eine einfache seite brauchst...

Habe damit auch vor knapp 2 Jahre angefangen
und es hat geholfen.