<span>

[Marti95.]

Hallo,

Ich habe ein problem, ich habe ca. 10 <span>, jetzt gibt es aber leider darstellungs fehler.

Was kann ich dagegen tun?

 

[vitus37]

ich habe ca. 10 <span>

Ich sehe da kein <span>.

jetzt gibt es aber leider darstellungs fehler.

Tatsächlich? Was ist denn der Fehler?

Etwas genauer beschreiben und den Quellcode bitte.

 

[Marti95.]

das <span> ist im quellcode und haste den screenshot ned angesehn?

<div class="categories">
<span class="cat">
<a class="catl" href="?alliance_forum&id=6">
This is a very long categorie </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=8">
Test 3 </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=1">
a long categorie name </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=5">
HIHO </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=3">
a long categorie name 2 </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=2">
TEST </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=7">
This is a very long categorie, too xD </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=9">
Categorie 9 </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=10">
Und noch eine Kategorie auf deutsch , diese ist die längste von allen... </a>
</span>


<span class="cat">
<a class="catl" href="?alliance_forum&id=4">
TEST 2 </a>
</span>

</div>

a.catl {
color:#2E2E2E;
font-weight:bold;
text-decoration:none;
}

a.catl:hover {
color:#999999;
}

.cat {
border:1px solid #cccccc;
padding:5px;
background:#f3f3f3;
margin-left:3px;
margin-right:3px;
}

.categories {
text-align:center;
}

 

[vitus37]

das <span> ist im quellcode

Genau da liegt das Problem. Ohne Quellcode können wir hier nur raten..

und haste den screenshot ned angesehn?

Doch, natürlich. Und wie möchtest du es nun haben?

 

[Marti95.]

habe ja den Quellcode nachträglich noch gepostet.

Siehe #3

Also, der ganz rechts ist abgeschnitten, ich will das das alle uf 1 Reihe geht
und die anderen überlappen und ich will das das nicht passiert.

Problem ich knn keine <br> verwenden.

 

[vitus37]

Versuche mal diesen CSS Code dafür:

a.catl {
color:#2E2E2E;
font-weight:bold;
text-decoration:none;
}

a.catl:hover {
color:#999999;
}

.cat {
display: block;
border:1px solid #cccccc;
padding:5px;
background:#f3f3f3;
margin-left:3px;
margin-right:3px;
width: auto;
float: left;
margin-top: 3px;
margin-bottom: 3px;
}

.categories {
text-align:center;
}

Ich habe ein display: block; eingebaut (verhindert den Zeilenumbruch), sowie gefloatet und Aussenabstände gesetzt.

Gruß

 

[Marti95.]

Hallo,

So ist es mit deinem code:

Wie du sehen kannst, der es überlappt den content und ist nicht mehr mittig.

Zur erinnerung, der code von mir:

 

[vitus37]

Gib dem umschließenden DIV noch ein overflow: hidden; damit er sich nicht mit dem content überlappt. Zentrieren müsstest du die Kategorien mit margin.

 

[Marti95.]

jetzt geht alles, bis auf das zentrieren, das kann ich nicht mit margin machen, gibts keine andere möglichkeit?

 

[DrPCox]

position:absolute;
left:50%;
margin-left: - breite/2;

 

[Marti95.]

Das kapier ich jetzt nicht, wo muss ich das jetzt einfügen?

 

[devilseye]

Ich habe ein display: block; eingebaut (verhindert den Zeilenumbruch), sowie gefloatet und Aussenabstände gesetzt.

Gruß

Verhindert <span> nicht schon von sich aus einen Zeilenumbruch?
CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 2 - Stylesheets in HTML einbinden
gruss

 

[Marti95.]

Sali Schwizer

Aber nochmal, wie kann ich jetzt das ganze teil zentrig machen?

 

[devilseye]

schon mal

a:link {vertical-align:middle;}

versucht?

 

[mermshaus]

Ich glaube, es geht hier um "Zentrierung" im Sinne von "text-align: center;", also zeilenweise inline. (So ist es zumindest auf dem Screenshot.)

Es ist aber nicht ersichtlich, ob wirklich das gewollt ist, und der aktuelle Code ist sowieso ein Mysterium.