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

links horizontal anbringen

Status
Für weitere Antworten geschlossen.
C

Corraggiouno

Mitglied
hallo,
das code beispiel gibt die buttons uneinander an:
Code: 
<p class="linkbox"><a href="villa.html" title=


<p class="linkbox"><a href="preise.html" title=


<p class="linkbox"><a href="belegung.html" title=
"Wann
<p class="linkbox"><a href="buchen.html" title=
"</a></p>

<p class="linkbox"><a href

wie bringe ich anhand einer css - datei die link-buttons nebeneinander?
 
Was ist denn das für ein Code? Da fehlen doch zig Klamemrn und so. "title=" ist auch unvollständig. Schau das alles bitte nocheinmal richtig durch, das Problem hat sich auch gelöst wenn du die Tags alle richtig setzt denke ich.

Corvulus
 
so jetzt ist richtig:

Code: 
<p class="linkbox"><a href="test.html" title=
"test">test</a></p>

<p class="linkbox"><a href="test2.html" title=
"test2">test2</a></p>

<p class="linkbox"><a href="test3.html" title=
"test3">test3</a></p>

das ganze möchte ich aber horizontal haben, wie geht das?
Wie oben zu sehen, werden die links ja untereinander ausgegeben
 
Ahoi, so zb.

PHP: 
<p style="float:left" class="linkbox"><a href="test.html" title="test">test</a></p>
<p style="float:left" class="linkbox"><a href="test2.html" title="test2">test2</a></p>
<p style="float:left" class="linkbox"><a href="test3.html" title="test3">test3</a></p>
Bzw eine Styleklasse anlegen und dazupacken, also class="linkbox float_left"

.float_left {
float:left;
}
 
habe mich wirklich mißverständlich ausgedrückt!
habe einen großen div - container
in diesem sollen nun 4 links nebeneinander angebracht werden. Wie würdet ihr die Position dieser link-leiste(4 links) positionieren, wenn ich diese z. B links oben oder rechts oben haben möchte?
Könntet ihr mir da einen TIpp geben?

<p style="float:left" class="linkbox"><a href="test.html" title="test">test</a></p>
<p style="float:left" class="linkbox"><a href="test2.html" title="test2">test2</a></p>
<p style="float:left" class="linkbox"><a href="test3.html" title="test3">test3</a></p>
Zum Vergrößern anklicken....
aber mit float:left kann ich die link-buttons nicht genau positionieren!

MOD EDIT: Beiträge Zusammengeführt. Bitte keien Doppelposts. (Corvulus)
 
Zuletzt bearbeitet von einem Moderator:
dann bau doch einfach ne tabelle draus:

HTML: 
<table id="navigation">
<tr>
<td><a href="test.html" title="test">test</a></td>
<td><a href="test2.html" title="test">test2</a></td>
<td><a href="test3.html" title="test">test3</a></td>
</tr>
</table>

und das kannst du dann mit css formatieren wie du willst, z.B.:

Code: 
#navigation a:link
{
 color: red;
text-decoration: underline;
border: 2px outset silver;
}
#navigation a:hover
{
text-decoration:none;
border: 2px inset grey;
}

oder wie auch immer, das hier ergibt nur nen schönen hoover effekt;)

also so hab ichs auf jeden fall schonmal gemacht,unds geht eig. ganz gut
 
ein tabelle anlegen, wo keine vorgesehen ist, ist schlecht.
du kannst erstmal mit margin und padding rumexperimentieren oder mit css positionieren. dürfte, wenn jeder link eine eigene id hat, kein problem sein.
natürlich klappt die lösung nur, wenn es nicht irgendwann mehr links werden. dann musst du die werte anpassen.
 
BlaBlaBla.....

  • Liste erstellen
  • Links reinpacken
  • Listenelemente floaten
  • Liste entsprechend mit CSS positionieren
  • feddisch....
 
Wie kommst du denn jetzt auf eine Liste? Liste = Aufzählen einzelner Abschnitte, genau das, was in deinem Post der Fall war abe rnet um Links zu positionieren..
 
Klar, du kannst auch die ganze Seite in eine Tabelle einteilen, und die Border auf 0 stellen, ob das den Zweck des table-tags erfüllt ist fraglich
 
@ganymed:

was spricht denn dagegen einfach eine tabelle einzuplanen? is doch gehopst wie gesprungen würd ich sagen, is dann vieleicht stil-technisch nich so schön, aber es erfüllt den zweck!

außerdem, wie meinst du das "wo keine tabelle vorgesehen ist"? ich mein, ich betsimm doch was wo vorgesehen ist??
 
kingair_six schrieb:
okey, aber wenns doch funktioniert?
Zum Vergrößern anklicken....

sicher funktioniert es doch, wenn man sein Design mit Tabellen macht, aber diese sind dann Zweckentfremdet, außerdem haben Tabellendesigns noch andere Nachteile (längere Ladezeiten etc.) Tabellen sind nur dazu gedacht, Inhalte in die Seiten einzufügen, die tabellarisch dargestellt werden müssen, nicht aber zum designen.
 
Wieso macht ihr so eine Brühe daraus, wenn es so einfach ist? Nimm doch einfach einen div-Container.
Schreib in die HTML-Datei im Bodybereich:
Code: 
<div id="menu">
<a class="navi" href="DeineHTMLDatei.htm">Home</a>
<a class="navi" href="DeineHTMLDatei.htm">Feedback</a>
</div>
Füge einfach die Links ein die du benötigst, und wenn sie nicht direkt nebeneinander sein sollen sondern mit einem Trennstrich getrennt sein sollen dann machst du einfach ein | .
Dann schreibst du in deine CSS-Datei:
Code: 
#menu {
position: absolute;
top: 100px;
left: 100px;
border: 1px solid;
border-color: black;
}
.navi {
font-family: sans-serif;
font-style: italic;
font-size: 20px;
color: orange;
}
.navi:hover {
color: red;
}
Den Style passt du natürlich nach deinen Wünschen an. Bei dem Menü bedeutet top und left, wieviel pixel der abstand von oben(top) und von links(left) haben soll. Stelle also den "top" Abstand auf den Abstand den du von oben haben willst, dazu speicherst du dann einfach immer ab und guckst es dir im Browser an. Wenn du den richtigen Abstand erreicht hast, machst du das gleiche mit left. Verändere den Abstand solange bis er nach deinem Geschmack richtiog steht. Wenn um die Links kein Rahmen soll, dann schreibst du bei border einfach statt "1px solid" stattdessen "none" rein. Dem entsprechend kannst du dann auch border-color weglassen. Wenn du einen HTML-Editor benutzt, ist die warscheinlichkeit groß das er div.layer unterstützt und die sie auch von da aus verschieben kannst. In dem Fall schreibst du dann in das Menü-Style einfach "position: absolute" und lässt das andere mit top und left weg. dann kannst du bei den meisten html-editoen unten auf normal gehen und vielleicht kannst du dann den div-layer verschieben. wenn nicht benutzt die die oben genannte methode. :mrgreen:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben