Verlinktes Bild - Nebeneinander? Wie ?

[cobrastyle]

Hallo,

Ich habe eine fragen , ich habe auf meiner page 5 bilder untereinander doch diese sollen nebeneinander sein wie bekomm ich das hin?

Und noch eine frage trotz dem <a/> Tag ist nicht nur das bild verlinkt sondern auch das umfeld rechts und links neben dem bild. Wie kann ich das ändern?

Hier der Code!

HTML

<a href="play1.html"><img src="img2/1.JPG" width="250" alt="Yetisport 5"></a>
<a href="play2.html"><img src="img2/2.JPG" width="250" alt="Moto Rally"></a>
<a href="play3.html"><img src="img2/3.JPG" width="250" alt="Against the Wall"></a>
<a href="play4.html"><img src="img2/4.JPG" width="250" alt="World Cup"></a>
<a href="play5.html"><img src="img2/5.JPG" width="250" alt="Weitspringen"></a>
<a href="play6.html"><img src="img2/6.JPG" width="250" alt="Seal Ball"></a>

 

[Imbericle]

Hallo,

Ich habe eine fragen , ich habe auf meiner page 5 bilder untereinander doch diese sollen nebeneinander sein wie bekomm ich das hin?

Zeig mal bitte dein CSS her. Das kann eigentlich nicht sein, dass sie sich untereinander sind, da sowohl <a> als auch <img> inline ist.


MfG

 

[cobrastyle]

Zeig mal bitte dein CSS her. Das kann eigentlich nicht sein, dass sie sich untereinander sind, da sowohl <a> als auch <img> inline ist.


MfG

css

a img {
border : 0 none;
}
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px; background-image:url(img/header.jpg);}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:1000px;margin:0 auto}
div#navigation{float:left;width:350px}
div#extra{float:right;width:350px}
div#footer{clear:both;width:100%}
a { 
display:block; }
html{
background-color:#F5F5DC;
}

hier mal der link Spiele und Mehr - Browsergames

 

[Corvulus]

<a href=""><img src="" style="float:left; display:inline;" /></a>
<a href=""><img src="" style="float:left; display:inline;" /></a>
<a href=""><img src="" style="float:left; display:inline;" /></a>
<a href=""><img src="" style="float:left; display:inline;" /></a>
<a href=""><img src="" style="float:right; display:inline;" /></a>
<br style="clear:both;" />

Das sollte eigendlich funktionieren. Nurnoch die richtigen URLs einsetzen.

Gruß Corvulus

 

[cobrastyle]

Danke das funktionert aber nur mangelhaft xD

siehe Spiele und Mehr - Browsergames

Kann ich die ganzen bilder auch in einer tabelle unterbringen oder ist das tabellenmissbrauch?

 

[kruschimappel]

Semantisch korrekt wird es wahrscheinlich mit einer unsortierten Liste <ul>.
Das funktioniert so noch nicht bei dir, weil du dem a-Tag "display:block;" zugewiesen hast (sogar zweimal), nimm das mal heraus bzw. ersetze es durch "display: inline;".
Außerdem stört das "padding: 10px", danach müsste es funktionieren.

 

[cobrastyle]

Semantisch korrekt wird es wahrscheinlich mit einer unsortierten Liste <ul>.
Das funktioniert so noch nicht bei dir, weil du dem a-Tag "display:block;" zugewiesen hast (sogar zweimal), nimm das mal heraus bzw. ersetze es durch "display: inline;".
Außerdem stört das "padding: 10px", danach müsste es funktionieren.

Danke es funtioniert xD eine frage noch zur Navi.

Geht es das die navi gleich lang wie der Header ist ? Problem ist das es eine Javascript navi ist und ich nicht weiß wie ich das hinbekommen !

 

[Corvulus]

Am eifnachsten ist es dafür zu sorgen, dass beide, Navi und Header, gleich breit sind. Also eine feste Breite haben.

Corvulus

 

[cobrastyle]

hmm wie schaff ich das? der header hat eine feste breite aber die navi nicht ?! wie kann ich diese definieren da die navi ja keine style.css hat sondern nur .js

 

[Corvulus]

Man könnte die Navi geschickt in einen festen DIV-Container plazieren, oder man wagt sich daran, die .js Datei ein wenig zu manipulieren. Probieren geht über studieren. Vorher nur eine Sicherungskopie machen. ;-)

Gruß Corvulus

 

[Efchen]

kruschimappel hat die richtige Antwort genannt.
Es ist auch nicht sehr sinnvoll, im Stylesheet aus dem Inline-Element <a> per "display:block" ein Block-Element zu machen und dann per (umständlichen) Inline-Style wieder "display:inline", was im Zusammenhang mit "float" sowieso Unsinn ist, weil "float" automatisch draus ein Block-Element macht.
Einfach alle derartigen Angaben weglassen, und schon ist das Menü horizontal.

Allerdings stimmt ja auch die Semantik nicht, ein Menü wird als Liste ausgezeichnet, da <li> aber ein Block-Element ist, wird dann wieder entweder "display:inline" oder "float" fällig.