• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Buttons unter nebeneinander liegende Bilder

N

Nadine9

Neues Mitglied
Hi..

Ich brauch unbedingt hilfe. ich versuch schon seit freitag eine Webseite fertig zu machen und bin jetzt am Sonntag genau soweit wie am freitag. Also webseite ist leer weil ich an einer sache festhänge. Ich arbeite mit wordpress als CMS.

Und zwar versuch ich seit freitag (fast ununterbrochen) unter 2 nebeneinander liegende bilder jeweils 2 klickbare buttons (links und rechts) zu setzen. Ist etwas schwer zu erklären also hab ich mal ne skizze gemacht wie ichs mein.

Hier der link zum Bild: http://www.fotos-hochladen.net/uploads/websitebeispie0yem631pzj.jpg

Ja ich weis das sieht total kinderleicht aus, aber ich schaffs einfach nicht .
Hab mich jetzt schon durch sämliche internet foren gelesen, habs schon mit diversen Tabellen probiert, hab auch schon ziemlich viel drüber gelesen bei selfhtml.org ums eventuell echt selber hinzukriegen aber ich schaffs eingach net :(

Vielleicht bin ich zu blöd. Ich denk mit ner Tabelle bin ich eigentlich schon richtig oder ?
Aber ich kriegs einfach überhaupt nicht hin dass alles an seinem platz ist. Einmal sind die bilder dann nicht genau nebeneinander, einmal sieht man den tabellenrand, und die buttons unten sind einfach irgendwo nur nicht da wo sie ein solln.

Könnt ihr mir bitte n paar tips geben?

Danke ^^
 
Werbung:
Tabelle ist falsch für diesen Anwendungsfall. Das geht z.B. mit einer Liste oder auch <div> wenn es sein muss. Beispiel HTML-Code für Liste:

HTML: 
<ul class="meineliste">
<li><img src="bild.jpg" alt="" /></li>
<li>
 <a href="#" class="buttonrechts">Button rechts</a>
 <a href="#" class="buttonlinks">Button links</a>
</li>
</ul>

Die kann dann per CSS gestylet werden. Da Du nur die Buttons nebeneinander haben willst, reicht sowas:

Code: 
ul.meineliste .buttonrechts {
 float: right;
 width: 70px;
}

ul.meineliste .buttonlinks {
 float: left;
 width: 70px;
}

Die Breitenangaben bitte an deine Werte anpassen. Dann kannst Du den Link bei dem Button natürlich auch mit einem Hintergrundbild versehen oder auch ein Bild anstelle des Textes einsetzen, ist dir überlassen.

Wenn Du 2 solche Listen nebeneinander haben willst, ergänze den o.g. HTML-Code für die zweite Liste und setze noch

Code: 
ul.meineliste { float: left; }

Clearen nicht vergessen.
 
Oh daaaanke, danke danke :)

Ach man hätt ich doch nur schon früher gefragt dann hätt ich mir 30 stunden arbeit gespart.
Wär ich nie drauf gekommen :) Ich war die ganze zeit auf dem tabellen trip ^^

Hat zwar ne weile gedauert bis ichs jetzt angepasst hab, aber jetz passts.. Fast :oops:
Da haben sich jetzt noch 2 probleme aufgetan mit der liste. Ich hab mal nen snapshot gemacht.

Hier: http://img4.fotos-hochladen.net/uploads/webseite1xf1zulq2kv.jpg

So weit so gut :)
Aber bei mir sind da jetzt diese punkte von der liste sichtbar. Kann ich die irgendwie wegmachen ?
Und wie kann ich das ganze zusammen noch centern ?
Also habs schon probiert mit center und so sachen aber klappt nicht. Is dann alles sofort wieder komplett durcheinander.

Is bestimmt wieder kinderleicht per css zu machen oder ?

Wär nett wenns einer weiss^^ Dann weiss ichs beim nächsten mal auch :)

Dankee
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben