CSS Text formatierung

[Dustin84]

Hallo,

ich arbeite an den "Info" Bereich meiner Website. Dort sind 4 Rubriken: Leistungen - Skills- Kontakt - Friends. Unter jeder Rubrik steht ein kleiner Text.

Den ersten Bereich "Leistungen" habe ich. Oben steht Leistungen und darunter der Text

HTML Code:

	<div id="kontakt"><!-- /ende kontakt -->
			<div id="headlinebox6"></div> 
			<h3>Leistungen:</h3>
			<h4>
			- Trailer, Teaser <br>
			- Animationen <br>
			- Gestaltung von Printmedien <br>
			- Gestaltung von Websites <br>
			- Realisierung von Microsites <br>
			- Logodesign und Bildbearbeitung <br>
			- Bannerdesign <br>
			- Flashnavigationen <br>
			</h4>
			<h5>Skills:</h5>
		</div><!-- /ende kontakt -->

CSS:

h3 { 
	font: bold 8pt arial; 
	letter-spacing: 0px; 
	position: relative;
	top: 11px;
	left: 30px;
	color: #ffffff;
	}
h4 { 
	font: bold 8pt arial; 
	letter-spacing: 0px; 
	position: relative;
	top: 11px;
	left: 30px;
	color: #ffffff;
	}
h5 { 
	font: bold 8pt arial; 
	letter-spacing: 0px; 
	position: relative;
	top: 11px;
	left: 30px;
	color: #ffffff;
	}

Das Problem ist, dass er den Text "Skills" unten ausrichtet. Der Text soll aber auf die gleiche Höhe, wie "leistungen" und dann noch ca. 70px nach rechts versetzt.

Wo ist der Fehler ?

Gruß
D

 

[GalaxyWarrior]

Hallo,

verstehe ich das richtig, dass es etwa so aussehen soll:

Leistungen:          (70px frei)               Skills:

- Trailer, Teaser
- Animationen
- Gestaltung von Printmedien
- Gestaltung von Websites
- Realisierung von Microsites
- Logodesign und Bildbearbeitung
- Bannerdesign
- Flashnavigationen

Wenn ja, probier es mal mit

h5 {
	font: bold 8pt arial;
	letter-spacing: 0px;
	position:absolute;
	top: 45px;
	left: 170px;
	color: #ffffff;
	height: 9px;
	}

Gruß GalaxyWarrior

 

[Maik]

Hi,

neben der Positionierung der Elemente liessen sich die Überschriften auch mit der float-Eigenschaft nebeneinander ausrichten.

 

[fabse111]

Entweder du machst es wie schon erwöhnt mit einem absoluten div oder aber wie auch schon erwähnt mit float.
Gib dem einen div ein float : left; und dem anderen ein float : right;
Am Ende schreibst du eine Klasse wo du clear : both machst damit das float wieder aufgehoben ist..
Denke das mit dem float ist die elegantere Lösung

 

[Dustin84]

Gib dem einen div ein float : left; und dem anderen ein float : right;
Am Ende schreibst du eine Klasse wo du clear : both machst damit das float wieder aufgehoben ist..
Denke das mit dem float ist die elegantere Lösung

Als in der css dem "leistungen" float : left; zuweisen und "Skills" float : right;

Und wie ist das mit der class ? wo muss das hin ?

versteh ich nicht...

 

[Maik]

Versuch es mal hiermit:

h3 {
        font: bold 8pt arial;
        letter-spacing: 0px;
        position: relative;
        top: 11px;
        left: 30px;
        }
h4 {
        font: bold 8pt arial;
        letter-spacing: 0px;
        position: relative;
        top: 11px;
        left: 30px;
        }
h5 {
        font: bold 8pt arial;
        letter-spacing: 0px;
        position: relative;
        top: 11px;
        /*left: 30px;*/
        }

.leftCol {
    float:left;
}

.rightCol {
    float:right;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="kontakt" class="clearfix"><!-- /ende kontakt -->
     <div id="headlinebox6"></div>
     <div class="leftCol">
          <h3 class="left">Leistungen:</h3>
          <h4>
          - Trailer, Teaser <br>
          - Animationen <br>
          - Gestaltung von Printmedien <br>
          - Gestaltung von Websites <br>
          - Realisierung von Microsites <br>
          - Logodesign und Bildbearbeitung <br>
          - Bannerdesign <br>
          - Flashnavigationen <br>
          </h4>
     </div>
     <div class="rightCol">
          <h5>Skills:</h5>
     </div>
</div><!-- /ende kontakt -->

 

[Dustin84]

ok , es geht aber ich hätte nicht gedacht, dass so eine Kleinigkeit so kompliziert ist.

 

[Maik]

ok , es geht aber ich hätte nicht gedacht, dass so eine Kleinigkeit so kompliziert ist.

Was dir da so kompliziert vorkommt, ist vermutlich die Klasse clearfix:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

die die Floatumgebung "cleart".

Siehe hierzu auch Clearing a float container without source markup

 

[Dustin84]

irgendwie klappt das nicht....sobald ich einen neuen Textblock mache, verschiebt sich alles....kann doch net so schwer sein, 4 spalten mitn text zu machen, bin wohl zu blöd


Werds wohl so machen, wie GalaxyWarrior gesagt hat. Das funktioniert ja auch. Es ist nicht so elegant aber das ist wohl egal, oder ?

 

[Maik]

Hi,

kannst du mal den vollständigen Quellcode (HTML + CSS) zeigen?