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

Frage Abstand bestimmen ...

faith

Mitglied
Hallo ihr!

Bin neu hier und beschäftige mich seit Kurzem mit HTML und habe schon meine ersten beiden Anfängerfragen:

1) Wie gelingt es mir, z.B. die hier dargestellten Links (HOME, FOREN, NEUIGKEITEN und MITGLIEDER) in der blauen Leiste nach oben oder unten zu verschieben?

2) Kann ich den Abstand zwischen den einzelnen Links einfacher als durch eine Aneinanderkettung von mehreren " " bewerkstelligen?

Vielen Dank schon mal für eure Starthilfe!

LG,
faith
 
Werbung:
2) Kann ich den Abstand zwischen den einzelnen Links einfacher als durch eine Aneinanderkettung von mehreren " " bewerkstellige

Nee ,dafür gibt es margin und padding wie @djheke schon sagt ,auserdem sieht das doch doof aus wenn man mit " " 100 Pixel verschieben will.Dann hast du nur 2 Zeilen den Quatsch. Auch wenn man sowas noch auf älteren Seiten sieht ist das heute nicht mehr Zeitgemäß.
 
Werbung:
Abend Zusammen!

Ich hänge schon wieder; beispielsweise binde ich eine Grafik als Link ein - in etwa so:

<a href="http://www.google.de"><img src="img\bild.jpg"></a>

1) Wie kann ich jetzt diese Grafik horizontal und vertikal verschieben; könnte mir da jemand bitte einen Code posten?

2) Warum erhalte ich bei der Grafik ein Rechteck (siehe Bild), nachdem ich von der verlinkten Google-Seite wieder auf meine Seite zurückkomme?

Link.JPG

Der Rahmen geht wieder weg, wenn ich mit der Maus irgendwo anders hinklicke ...

Vielen Dank ....
 
Verschieben kann man mit position oder margin. Aber besser wäre wenn du mal deinen Code zeigst damit wir sehen was du bis jetzt gemacht hast und wir auch deine anderen Fragen genauer erklären können
 
Werbung:
Nunja, viel mehr Code ist es noch nicht ... mein Problem ist halt noch immer, dass ich die Grafik nicht verschoben bekomme; z.B. nach rechts. Und dann eben auch das gestrichelte Rechteck; wie in Post #5 beschrieben.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<title>Robotic</title>
</head>

<body>
<a href="http://www.google.de"><img src="img\bild.jpg"></a>
</body>
</html>
 
Soll auf der Seite nur das eine Bild zu sehen sein?
 
... nein, aber ich bin noch nicht weiter! :confused:

Es sollen noch mehrere Links eingebunden werden und dann auch noch Text ....
 
Werbung:
da du ja nur das hast kannst du das Bild so verschieben
CSS:
img{
  position:absolute;
  top:100px;
  left:100px;
}

Oder mit margin. Aber da jetzt schon dran rumfummeln ist auch blödsinn weil die Seite ja bestimmt noch mehr Inhalt bekommen soll.
Jenachdem was du vor hast solltest du dir mal Flexbox anschaun.
Was soll das den genau werden da?
 
Danke basti,

aber das geht auch nur dann, wenn ausschließlich EIN Bild auf der Seite vorhanden ist, richtig?

Das Ziel ist, dass mehrere Grafik-Links nebeneinander stehen und ich den Abstand eines jeden einzelnen Bildes einstellen kann ... welcher Befehl wäre hierfür am Besten?
 
Nee das geht auch bei 1000 Bildern.
Aber das hat bei dir wohl kein sinn.
Du willst jetzt mehrere Bilder nebeneinander haben mit Abstand dazwischen.
Ohne den Code zu kennen würde ich da schon auf flexbox tendieren.Damit kannst du ohne großartig mit positionsangaben rumzufummeln deinen Bildern Abstand geben und so weiter.

Weist du schon wie vile Bilder es werden sollen ?
Wie groß die Bilder sind?
Wie groß der Abstand sein soll?
 
Werbung:
Ja genau, ich möchte gerne fünf Grafiken nebeneinander einbinden, die mit je einem Link versehen werden. Der Abstand der Grafiken zueinander und vom oberen Bildrand soll einstellbar sein. Die Größe der Bilder ist ca. 20x20px.

Danke!
 
Ja ,da werden jetzt wohl mehrere Antworten kommen.
Es kommt darauf an, soll jedes Bild einen anderen Abstand haben?
Sollen es gleiche Abstände sein?
Wie weit verteilt, auf der gesamten Bildschirmbreite oder nur 200px?

Bei einen gleichmäßigen Abstand würde ich es so machen.


Die Abstände kann man auch beim img geben. Das macht wohl auch jeder anders.
Vielleicht sagt da noch wer anders was zu ,falls meine Antwort nicht optimal ist.
Soll jedes Bild einen anderen Abstand haben, musst du es wohl mit Klassen machen oder id`s vergeben.
 
Zuletzt bearbeitet:
Werbung:
@basti1012: Also die Bilder sollten weiter rechts anfangen und einen größeren Abstand zueinander haben. Auch von oben sollte der Abstand größer sein.

Ansonsten wäre es schon recht gut ...
 
Zuletzt bearbeitet:
@basti1012
Der Abstand der Grafiken zueinander und vom oberen Bildrand soll einstellbar sein.

Dann wirst du wohl mit JS arbeiten müssen. Das ist keine allzu schwere Sache.
HTML:
<input type="range" min="0" max="200" step="1" oninput="document.getElementById('range').text = this.value;">
<a id="range"></a>
Das mal als kleiner Denkanstoß.
 
Wenn er das mit einstellbar meint dann hast du recht.Ich habe habe gedacht das er jedes Bild einzelnt im Code einstellen will.
@faith
Denk dran das mein Bild rechteckig ist und ich da nur width:20px eingeben muß.
Wahrscheinlich hat dein Bild andere maße und du mußt da noch height:20px eingeben.
Zeig mal dein Code mit Original Bildlink.Oder ist das Bild nicht Online
 
Werbung:
HTML:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<title>Robotic</title>
</head>

<body>
<a href="http://www.google.de"><img src="img\bild.jpg"></a>
<a href="http://www.google.de"><img src="img\bild.jpg"></a>
<a href="http://www.google.de"><img src="img\bild.jpg"></a>
<a href="http://www.google.de"><img src="img\bild.jpg"></a>
<a href="http://www.google.de"><img src="img\bild.jpg"></a>
</body>
</html>

CSS:

img{
width:20px;
}

.conti{
width:20px;
margin-top:50px;
display: flex;
justify-content: space-between;
}

Das Problem:

1) Ich kann die Bilder nicht vom oberen Bildrand nach unten verschieben
2) Ich kann den Abstand zwischen den Bildern nicht verändern

Stimmt mein Code nicht?
 
Nee.Du hast den ersten Code mit den Zweiten vermischt.
Wenn du genau hinkuckst siehst du ja keine Container der "conti" heißt.

Selbst wenn wäre der Container mit 20px etwas klein.
Halte dich mal mehr an den 2ten Code den ich gepostet habe
 
Zuletzt bearbeitet:
Zurück
Oben