Text neben Buttons?

PC-Süchtiger · 18. Februar 2011

Hallo!
Ich habe auf meiner Website Buttons mit dem <p>-Tag links untereinander gesetzt.
Mein Problem ist jetzt, dass ich einen Text neben diese Buttons bringen will (mittig,von der ganzen site her gesehen, später sollen es auch Flash-Games werden die neben den Buttons mittig sein sollen), mit <center> bringe ich den Text ja nur mittig UNTER diese Buttons, das ist genau das was ich nicht will. :roll:
Kann mir jemand bei der Lösung meines Problems helfen?
LG

Sarkkan · 18. Februar 2011

<center> ist ein veraltetet Tag, das nicht mehr verwendet werden sollte.

Da ich leider keinen Code von dir bekommen habe, kann ich nur auf gut Glück versuchen
Naja.. der Text kommt selbst verständlich in die <p>-Tags, gib dem Button zusätzlich noch ein float: left;.

Hoffe konnte dir helfen, andernfalls hätte ich gerne ein wenig Code von dir :wink:

PC-Süchtiger · 18. Februar 2011

Hy!

Code

<p><a href="http://irgendwas.com"><img border="0" src="Buttons/Startseite.gif" alt="Startseite" /></a></p
<p><a href="http://irgendwas.com/adventures.html"><img border="0" src="Buttons/Adventures.gif" alt="Adventures" /></a></p>
<p><a href="http://irgendwas.com/ballerspiele.html"><img border="0" src="Buttons/Ballerspiele.gif" alt="Ballerspiele" /></a></p>
<p><a href="http://irgendwas.com/denkspiele.html"><img border="0" src="Buttons/Denkspiele.gif" alt="Denkspiele" /></a></p>
<p><a href="http://irgendwas.com/geschick.html"><img border="0" src="Buttons/Geschick.gif" alt="Geschick" /></a></p>
<p><a href="http://irgendwas.com/jumpnrun.html"><img border="0" src="Buttons/Jump'n'Run.gif" alt="Jump'n'Run" /></a></p>
<p><a href="http://irgendwas.com/kampfspiele.html"><img border="0" src="Buttons/Kampfspiele.gif" alt="Kampfspiele" /></a></p>
<p><a href="http://irgendwas.com/simulation.html"><img border="0" src="Buttons/Simulation.gif" alt="Simulation" /></a></p>




<center><h1><font face="Comic Sans MS, cursive">blablablablabla</font></h1></center>
<center><font face="Comic Sans MS, cursive">blabla</font></p></center>
<center><p><font face="Comic Sans MS, cursive">lalalalalalala</font></p></center>
<center><p><font face="Comic Sans MS, cursive">dumdidum</font></p></center>
<center><p><font face="Comic Sans MS, cursive">blablablubber</font></p></center>

Alles anzeigen

Also wie gesagt, der Text steht dann zwar zentriert, aber UNTER den Buttons :?
Und der Sollte eigentlich NEBEN den Buttons zentriert stehen
LG

Sarkkan · 18. Februar 2011

Huhu,

eine wichtige Regel: Man verwendet heutzutage Class und Id um Elemente zu stylen.
solche inline-styles, sind veraltet und sollten nicht mehr verwendet werden.

Versuch es mal bitte folgendermaßen:

Code

/* Dieser Kram kommt in die Stlye-Datei, ggf kannst du es dir umbenennen */
#buttonNav {
    list-style: none;
}




#buttonNav li {
    font-family: "Comic Sans MS";
    font-style: italic;
    text-align: center;
}







<!-- Der HTML-Code -->
<ul id="buttonNav">
    <li><a href="#"><img border="0" src="Buttons/Startseite.gif" alt="Startseite" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Adventures.gif" alt="Adventures" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Ballerspiele.gif" alt="Ballerspiele" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Denkspiele.gif" alt="Denkspiele" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Geschick.gif" alt="Geschick" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Jump'n'Run.gif" alt="Jump'n'Run" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Kampfspiele.gif" alt="Kampfspiele" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Simulation.gif" alt="Simulation" /></a> Blablalba </li>
</ul>

Alles anzeigen

Es ist sinnvoller wenn wir die Buttons mit einer Liste auflisten

PC-Süchtiger · 18. Februar 2011

hy!
irgendwie blicke ich da nicht ganz durch :?
wie bringe ich den text jetzt daneben?
LG

Sarkkan · 18. Februar 2011

Wieso blickst du den da nicht durch?

Der Text sollte theoretisch neben den Buttons sein^^
Übernimm einfach meinen Code, oder du schreibst in deinen Code noch in den <p>-Tag die Beschriftung

PC-Süchtiger · 18. Februar 2011

muss ich den text jetzt auch in li schreiben oder wie? :?
sry aber ich kenn mich grad gar nicht aus^^
kannst du mir dass anhand von meinem code zeigen? (also auch mit etwas text, nicht nur den button-code )
LG

PC-Süchtiger · 18. Februar 2011

Danke ich weiß jetzt schon wie du es meinst und es klappt
aber kannst du mir noch sagen wie ich die spiegelstriche wieder wegbekomm?
LG

Sören · 18. Februar 2011

Eigentlich sollten durch das list-style: none; keine Spiegelstriche mehr zu sehen sein.
Zeig mal deinen Code.

PC-Süchtiger · 18. Februar 2011

Hallo!
Hier der Code:

Code

#buttonNav {
    list-style: none;




#buttonNav li {
    font-family: "Comic Sans MS";
    font-style: italic;
    text-align: center;




<ul id="buttonNav">
    <li><a href="#"><img border="0" src="Buttons/Startseite.gif" alt="Startseite" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Adventures.gif" alt="Adventures" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Ballerspiele.gif" alt="Ballerspiele" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Denkspiele.gif" alt="Denkspiele" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Geschick.gif" alt="Geschick" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Jump'n'Run.gif" alt="Jump'n'Run" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Kampfspiele.gif" alt="Kampfspiele" /></a> Blablalba </li>
    <li><a href="#"><img border="0" src="Buttons/Simulation.gif" alt="Simulation" /></a> Blablalba </li>
</ul>

Alles anzeigen

Sorry für die Umständlichkeiten mit mir, hab bis jetzt nur rein mit HTML gearbeitet, werde jetzt aber das Seminar fertig machen und CSS lernen
das sollte nur für den anfang gedacht sein dass meine website nicht so hässlich ist
ich hoffe ihr kommt drauf was ich falsch mach :roll:
LG

Sarkkan · 18. Februar 2011

1. musst du jede { nach dem du Sachen definiert hast auch wieder mit einem } schließen
2. Ich hoffe das steht nicht so 1:1 in deiner Datei drin, oder? Der obere (CSS/Style-)Kram gehört in eine css-Datei, die du über <link> einbindest

PC-Süchtiger · 18. Februar 2011

edit:
ich habs jetzt endlich geschafft, indem ich ne ausgelagerte css datei gemacht hab :roll:
nur leider ist jetzt zwischen rand und button so viel abstand
weiß jemand wie man den beseitigen kann?
ansonsten schonmal ein großes DANKE an euch, ihr macht das echt toll :mrgreen:
LG

PC-Süchtiger · 18. Februar 2011

Zitat von "Sarkkan"

1. musst du jede { nach dem du Sachen definiert hast auch wieder mit einem } schließen
2. Ich hoffe das steht nicht so 1:1 in deiner Datei drin, oder? Der obere (CSS/Style-)Kram gehört in eine css-Datei, die du über <link> einbindest

jap hab ich zuerst nicht gemacht :mrgreen:
jetzt klappts, danke
aber nun ist so viel abstand zwischen rand und button, der spiegelstrich ist aber weg
weiß noch jemand wie ich den abstand auch beseitigen kann?
LG

Sarkkan · 18. Februar 2011

gib dem #buttonNav ein margin: 0;, damit setzt man den Außenabstand auf 0px.

PC-Süchtiger · 18. Februar 2011

Hallo!
wenn ich das jetzt mach (geschwungene klammer zu) dann sind die buttons auf einmal auch in der mitte :?
wenn ich die klammer aber offen lass dann passt alles, nur halt der abstand nicht ...
und das mit dem abstand bring ich nicht hin :cry:

Code

#buttonNav {
    list-style: none;




}




#buttonNav li {
    font-family: "Comic Sans MS";
    font-style: italic;
    text-align: center;

}

Alles anzeigen

so sieht mein css file aus
wenn ich die geschwungenen klamemrn weglass passt alles nur halt nicht der abstand
LG

Sarkkan · 18. Februar 2011

Ach stimmt, tschuldigung Das hatte ich vergessen^^'
du musst noch bitte folgendes Ergänzen:

Code

#buttonNav img {
    float: left;
}

Damit sollte es theoretisch funktionieren.

Mit diesem kleinem Code weisen wir dem Browser an jedem Bild in unserer Liste nach Links zu setzten, damit Text drum herum fließen kann.

PC-Süchtiger · 18. Februar 2011

Hy!
code sieht jetzt so aus:

Code

#buttonNav {
    list-style: none;




}




#buttonNav li {
    font-family: "Comic Sans MS";
    font-style: italic;
    text-align: center;

}




#buttonNav img {
    float: left;
}




#buttonNav {
    margin: 0;
}

Alles anzeigen

und hier ein screen von dem ganzen:

[Blockierte Grafik: http://www.bilderhoster.at/upload/hjztx1298055234.jpg]

irgendwas mach ich noch imemr falsch :oops:
denn das verläuft jetzt wie ne stufe
LG

Sarkkan · 18. Februar 2011

Nene, liegt sicher nicht an dir^^
oder vielleicht doch? Neeein Nur an dem Browser, den du verwendest :wink:
Aber auch für den können wir alles bestens machen^^

einfach dem #buttonNav li noch ein clear: left; geben

PC-Süchtiger · 18. Februar 2011

danke sehr , mir firefox klappts jetzt einwandfrei

nur das margin bring ich nich nicht so recht zusammen

Code

#buttonNav {
    list-style: none;




}




#buttonNav li {
    font-family: "Comic Sans MS";
    font-style: italic;
    text-align: center;
    clear: left;
}   




#buttonNav img {
    float: left;
}




#buttonNav {
    margin: 0;
}

Alles anzeigen

also der letzte "absatz" im file
son st klappt alles perfekt
LG

Sarkkan · 18. Februar 2011

Ach, Mensch mensch mensch <.<'
Öhm, geb dem #buttonNav zusätzlich nun auch noch ein padding: 0;

Text neben Buttons?

Jetzt mitmachen!

Teilen