Frage Abstand bestimmen ...

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

faith

Mitglied
12 Juli 2018
44
0
6
51
#1
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
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#3
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äß.
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#5
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 ....
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#7
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>
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#9
... nein, aber ich bin noch nicht weiter! :confused:

Es sollen noch mehrere Links eingebunden werden und dann auch noch Text ....
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#10
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?
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#11
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?
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#12
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?
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#14
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!
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#15
Ja ,da werden jetzt wohl mehrere Antworten kommen.
Es kommt drauf 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.
https://codepen.io/basti1012/pen/XBdaQV?editors=0110

Die Abstände kann man auch beim img geben. Das macht wohl auch jeder anders.
Vieleicht sagt da noch wer anders was zu ,fals meine Antwort nicht Optimal ist.
Soll jedes Bild einen anderen Abstand haben mußt du es wohl mit Klassen machen oder id`s vergeben.
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#16
@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:

Aaron3219

Aktives Mitglied
6 Oktober 2015
936
185
43
17
#17

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#18
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
 

faith

Mitglied
12 Juli 2018
44
0
6
51
#19
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?
 

basti1012

Aktives Mitglied
26 November 2017
736
69
28
37
Minden
chat.sebastian1012.bplaced.net
#20
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: