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

[ERLEDIGT] Bilder nebeneinander anzeigen

Status
Für weitere Antworten geschlossen.
M

Munin666

Neues Mitglied
Guten Tag zusammen,
aktuell habe ich leider ein kleines Problem eine einfache Seite zu entwerfen....

Zur Veranschaulichung gebe ich einmal hier den Link zur Website die gerade gemeint ist.
http://legionmg.de/test/Rumpo/

Es soll kein besonders großes Projekt sein, aber es sollen die Bilder der beiden Fahrzeuge nebeneinander angezeigt werden.
Und zwar immer 2 nebeneinander (sofern die Auflösung des anderen dies hergibt) und darunter dann die nächsten 2.
etc.
Außerdem werden die Bilder jeweils noch verlinkt mit dem Download für die jeweilige Datei die mit dem Bild angesprochen werden soll. (es handelt sich hier um Mods für GTA San Andreas^^)

Mein Code wäre aktuell folgender, ich hoffe das ihr helfen könnt.
Code: 
<html>
<head>
<title>GTA SA Legolas-Modpack</title>
</head>
<body>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"><img src="../Grafiken/bg.png" width="100%" height="100%"></div>

<div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll;">

<p>&nbsp;</p> <p>&nbsp;</p>

<div style="margin:30px;">
<a href="../" style="color:white">Zur&uuml;ck zur Startseite</a>
<p>&nbsp;</p> </div>

</tr></p>

<div align="center">
<div style="background-image:url(../Grafiken/trans/trans10.png); width:505px; height:310px; margin:30px; padding:10px">
<img src="HD Rumpo/Bilder/1.png" width="500" height="281" border="0" >
<div align="center">
</P><font color="white">GTA V Bravodo Rumpo<p> </p></front>
</div>
</div>

<div align="center">
<div style="background-image:url(../Grafiken/trans/trans10.png); width:505px; height:310px; margin:30px; padding:10px">
<img src="HD Rumpo/Bilder/1.png" width="500" height="281" border="0" >
<div align="center">
</P><font color="white"><p>HD Rumpo</p></front>

</div>
</div>




</div>        
</body>
</html>

Vielleicht könnt ihr mir ja auch helfen dies ein wenig übersichtlicher zu gestalten.
 
Werbung:
Munin666 schrieb:
Vielleicht könnt ihr mir ja auch helfen dies ein wenig übersichtlicher zu gestalten.
Zum Vergrößern anklicken....
<img> (= Inline-Element) werden von Natur aus nebeneinander ausgerichtet, was ohne das ganze Brimborium außen herum der Fall wäre.

<div> (= Block-Element) hingegen erzeugen Absätze im Textfluß.

Weitere Kommentare zur Qualität des Markups verkneife ich mir an dieser Stelle.
 
Spicelab schrieb:
<img> (= Inline-Element) werden von Natur aus nebeneinander ausgerichtet, was ohne das ganze Brimborium außen herum der Fall wäre.

<div> (= Block-Element) hingegen erzeugen Absätze im Textfluß.

Weitere Kommentare zur Qualität des Markups verkneife ich mir an dieser Stelle.
Zum Vergrößern anklicken....
Korrigier mich bitte falls ich falsch liege...
D.h. so wie ich das vor habe wird das nicht klappen?
 
Werbung:
Mal eine kleine Anregung.
Code: 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>GTA SA Legolas-Modpack</title>
<style>
* {
 margin:0;
 padding:0;
 border:none;
}

html, body {
 height:100%;
}

body {
 background:url(bg.png) no-repeat top center fixed;
 background-size:100% 100%;
}

main {
 width:90%;
 margin:0 auto;
}

figure {
 margin:10px;
 padding:10px;
 background:rgba(100,100,100,.9);
}

figure img {
 width:100%;
 display:block;
}

figcaption {
 padding-top:10px;
 text-align:center;
 color:#fff;
}

.flex {
 display:flex;
}

.spalte_50  { flex-basis:50.000%;padding:10px; }

</style>
</head>
<body>
<main>
<div class="flex">
  <figure class="spalte_50">
  <a href=""><img src="bild1.png" width="500" height="281" alt="bild1"></a>
  <figcaption>GTA V Bravodo Rumpo</figcaption>
  </figure>

  <figure class="spalte_50">
  <a href=""><img src="bild1.png" width="500" height="281" alt="bild1"></a>
  <figcaption>GTA V Bravodo Rumpo</figcaption>
  </figure>
</div>

<div class="flex">
  <figure class="spalte_50">
  <a href=""><img src="bild1.png" width="500" height="281" alt="bild1"></a>
  <figcaption>GTA V Bravodo Rumpo</figcaption>
  </figure>

  <figure class="spalte_50">
  <a href=""><img src="bild1.png" width="500" height="281" alt="bild1"></a>
  <figcaption>GTA V Bravodo Rumpo</figcaption>
  </figure>
</div>

</main>

</body>
</html>
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben