Zur Navigation

Wie muß der Code lauten?

1 Günter (Gast)

Hallo, ich möchte bei meiner Website http://www.guenter-leipfinger.de den Text
Herzlich willkommen
mit einem Rand umgeben, weiß aber nicht, wie der code dazu lautet. Mit Google gibt es viele Vorschläge, doch dann sind meist auch die anderen Texte davon betroffen bzw. auch das Menü links.
Anmerkung: ich bin ein blutiger Anfänger

01.11.2017 16:32

2 Jörg

Den Text hast du zwischenzeitlich durch eine Grafik ersetzt?

Mit Google gibt es viele Vorschläge, doch dann sind meist auch die anderen Texte davon betroffen bzw. auch das Menü links.

Du kannst dem betreffenden Textabschnitt (<p>) im HTML-Code eine eindeutige ID geben, z.B.:

<p id="welcome">Herzlich willkommen</p>

Im CSS-Code kannst du dann nur das Element mit dieser ID definieren, so dass andere Textabschnitte nicht davon betroffen sind, z.B.:

p#welcome {
border: 1px solid black;
}

01.11.2017 18:46 | geändert: 01.11.2017 18:48

3 Günter Leipfinger

Ja, es ist richtig, ich habe den Text durch
eine Grafik ersetzt, weil ich ungeduldig bin. Inzwischen habe ich die ursprüngliche Version wieder hochgeladen.
Nun bitte ich Dich, mir den code genau zu nennen, da ich wie schon erwähnt ein Anfänger bin.
Hier der Quelltext der Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
a:hover {text-decoration:underline; color:#333333;}
a {text-decoration:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

<!--
body {
	background-color: #9999CC;
}
.Stil1 {
	font-size: large;
	font-weight: bold;
}
.Stil4 {font-size: x-large; font-weight: bold; color: #990033; }
.Stil6 {font-size: xx-large; font-weight: bold; color: #990000; }

-->
</style>



</head>


<body><p>
<div align="center" class="Stil6">Herzlich willkommen </div>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="80%" height="532" border="0" cellpadding="5" cellspacing="5">

}
  <tr>
    <th width="164" scope="col"><table width="171" height="240" border="0" cellpadding="5" cellspacing="5" bgcolor="#FFFF66">
      <tr>
        <th height="33" scope="col"><a href="Malerei/Aquarelle/album/index.html" class="Stil3" >Aquarelle</a></div></div>   
        </tr>
      <tr>
        <th height="33" scope="col"><a href="Malerei/Acrylmalerei/album/index.html" class="Stil3" >Acrylmalerei</a></font></div></th>
      </tr>
      <tr>
        <td height="40" background="photoalben/photoalben.html"><div align="center"><a href="photoalben/photoalben.html" class="Stil3" >Photoalben</a></font></div>
        </div></td>
      </tr>
      <tr>
        <td height="33"><div align="center"><a href="Kontakt.html" class="Stil3" >Kontakt</a></div></td>
      </tr>
      <tr>
        <td height="33"><div align="center"><a href="impressum.html" class="Stil3" >Impressum</a></div></td>
      </tr>
      <tr>
        <td height="33"><div align="center"><a href="http://gb.webmart.de/gb.cfm?id=1331502l"http://gb.webmart.de/gb.cfm?id=1331502l" >Gästebuch</a></a></div></td>
      </tr>
    </table></th>
    <th width="541" bgcolor="#99FFCC" scope="col" algn="center"><p class="Stil1">&nbsp;</p>
      <p class="Stil4">Malerei</p>
      <p align="center"><img src="acrylr.jpg" alt="malerei" width="300" height="234" /><br />
        <br />
      <span class="Stil4">Fotografie</span></p>
      <p><img src="bluete-025314r.jpg" alt="foto" width="300" height="200" /><br />
        <br />
    </p></th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
  
</body>
</html>

02.11.2017 12:48

4 Jörg

<div align="center" class="Stil6">Herzlich willkommen </div>

Das Div, welches das "Herzlich willkommen" hat ja schon eine Klasse "Stil6", mit welcher man es im CSS identifizieren kann. Es gibt hierzu auch bereits einen entsprechenden Block im CSS-Code:

.Stil6 {
    font-size: xx-large;
    font-weight: bold;
    color: #990000;
}

Den Block kannst du dann um die Definitionen für einen Rahmen erweitern, z.B.:

.Stil6 {
    border: 1px solid black;
    width: 400px;
    margin: auto;
    font-size: xx-large;
    font-weight: bold;
    color: #990000;
}

Die Definitionen gelten dann nur für Elemente, die die Klasse "Stil6" haben, und das ist in deinem HTML-Code bislang nur dieses eine Div.

Meine erste Empfehlung zielte darauf ab, eine ID zu verwenden. IDs können im Gegensatz zu Klassen nur einmal verwendet werden, siehe auch diesen Thread:

https://joergs-forum.de/css-unterschied-zwischen-ids-und-klassen-t-4025-1

Falls du die Klasse "Stil6" an anderer Stelle nochmal verwenden möchtest, aber ohne Rahmen, solltest du zusätzlich eine ID einbauen:

<div id="welcome" class="Stil6">Herzlich willkommen </div>

... dann kannst du das im CSS getrennt definieren:

.Stil6 {
    font-size: xx-large;
    font-weight: bold;
    color: #990000;
}
#welcome {
    border: 1px solid black;
    width: 400px;
    margin: auto;
}

02.11.2017 14:29 | geändert: 02.11.2017 14:31

Beitrag schreiben (als Gast)





[BBCode-Hilfe]