✔ Css h1 öfters definieren ?

[SebiPuck]

Hallo, ich habe ein "kleines" Problem und suche schon seid Stunden es zu lösen.
Ich bin dabei eine Website zu erstellen.

(http://terados.de/tera/index.html)

Nun möchte ich mehrere kleine Boxen erstellen, in welchen Content dargestellt wird.
Das Problem:
Ich habe h1 so definiert, dass es einen bestimmten Abstand zu den Seitenrändern hat....
Bei der 2. Box ist der Text also in der ersten und überlappt sich mit dem text in der 1. Box.

Gibt es eine Möglichkeit, wie ich h1 und h2 öfters definieren kann ? Oder wie kann ich das Problem sonst lösen ?

LG

 

[holzmensch]

http://www.tizag.com/cssT/class.php

 

[SebiPuck]

http://www.tizag.com/cssT/class.php

Danke, dies habe ich nun gemeistert
Sorry für die blöde frage, aber wie kann ich die Hintergrundgrafik (html) nebeneinander setzen, bei mir sind sie immer automatisch untereinander....
(gemeint: grüner Background der Infoboxen.

Link: http://terados.de/tera/index.html

 

[der_Renner]

hallo, setz das zweite img auch in einen div-tag, dann tust du dir später beim formatieren etwas leichter.
elemente nebeneinander setzen bewirkst du mit float:left;

 

[SebiPuck]

hallo, setz das zweite img auch in einen div-tag, dann tust du dir später beim formatieren etwas leichter.
elemente nebeneinander setzen bewirkst du mit float:left;

Wie ist es gemeint, dass ich die 2. Grafik auch unter einem Tag machen sollte ?

Wo würde float left hin müssen ?

Ausschnitt des CSS-Codes:

/*============================ Span ============================*/

h2 span { 
   font: Arial;
   font-size: 1.3em;
   letter-spacing: -1px;
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}

h3 span {
   font: Arial;
   font-size: 1.1em;
   padding: 10px;
}

h3 span.spacer {
   padding:0 5px;
}

/*============================ [ Box 1 ] LETS PLAY (Beschreibung LETS PLAY [h2] ============================*/

h2.letsplay { 
   position: absolute; 
   top: 0px; 
   left: 15px; 
   width: 220px; 
}


/*============================ [ Box 1 ] LETS PLAY (Beschreibung) [h3] ============================*/

h3.letsplay{ 
   color: #ffffff;
   position: absolute; 
   top: 55px; 
   left: 15px; 
   width: 220px; 
}

/*============================ [ Box 2 ] News (Beschreibung) [h2] ============================*/

h2.news{ 
   color: #ffffff;
   position: absolute; 
   top: 255px; 
   left: 15px; 
   width: 220px; 
}

/*============================ [ Box 2 ] News (Beschreibung) [h3] ============================*/

h3.news{ 
   color: #ffffff;
   top: 255px;
   left: 15px; 
   width: 220px; 
}

/*============================ Links ============================*/

Und das ist der HTML code einer Box:

<img src="http://www.tutorials.de/images/Box1.png" alt="Bild" width="210" height="210" />
      
			<h2 class="letsplay"><span><a href="http://#">Lets Plays</a><span class='spacer'></span></h2>        
			</br>
			<h3 class="letsplay"><span>Unter einem Let's Play ver- <span class='spacer'></span> <br /> 
			<span class='spacer'></span>steht man ein Gameplay.</span> <br /> <span class='spacer'></span>Meistens mit Kommentaren.</span></h3>

Komischer Weise kann ich nun den h3 text nicht auf die 2. Boxengrafik setzen :/

 

[holzmensch]

Setz die Texte nicht mit absoluter Positionierung. Solche Boxen machst du mit einem Listenelement oder einfach mit einem div-Block, dem du ein Hintergrundbild zuweist und in das div-Block schreibst du dann deine Texte rein.