Bilder nebeneinander ?

overdev · #1 (**permalink**) 24.10.2010, 15:23

Hallo

Ich bin ganz neu im Forum und auch im Bereich HTML und CSS kenn ich nur die Grundlagen.

Auf einer HTMl Seite (leer) sollen zwei Bilder (beide mit den Maßen 300x120) nebeneinander sein.

Habe mir das so vorgestellt:

http://www.img-teufel.de/uploads/bil...5691dfejpg.jpg

Hab es mal mit Margin versucht aber das klappt nicht wie gesagt bin noch recht neu

So sieht es bei mir aus (untereinander Bilder haben per CSS Border mitbekommen):

http://www.img-teufel.de/uploads/bil...11902d1jpg.jpg

HTML Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>GermanGameTipps - Webseite</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="all">
    <div id="forum">
        <a href="forum" ><img src="forum1.jpg" alt="Hier gehts zum Forum" /></a>
    </div>

    <div id="umfrage">
        <a href="umfrage/umfrage.php"><img src="umfrage1.jpg" alt="Hier gehts zur Umfrage" /></a>
    </div>
</div>
</body>
</html>

CSS Code:

Code:

#all
{
/* width: 800px; */
margin: 0px;
padding: 0px;
vertical-align: middle;
text-align: center;
}

img
{
border: solid silver 3px;
}

#umfrage
{

}

#forum
{

}

Ich hoffe ihr könnt mir helfen

philosapiens · #2 (**permalink**) 24.10.2010, 17:05

Hi,

ich würde es mit float versuchen: float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

overdev · #3 (**permalink**) 24.10.2010, 18:11

Danke für die Antwort.

Leider funktioniert es nicht dann sieht es so aus:

http://www.img-teufel.de/uploads/bil...4c973d4jpg.jpg

Habe allerdings jetzt Text dazu gemacht (Text ist in der Mitte).

Manfred62 · #4 (**permalink**) 24.10.2010, 18:38

Hallo

In etwa so wie hier sollte es gehen:
http://xhtmlforum.de/62753-anf-ngerq...tml#post478183

Gruß Manfred

overdev · #5 (**permalink**) 24.10.2010, 19:29

Danke.

Es klappt zwar aber viele haben eine andere Bildschirmauflösung :/

Würde das bei jeden so mittig aussen wie bei mir wenn ich es mit em angeben würde?

philosapiens · #6 (**permalink**) 24.10.2010, 19:36

Hast Du mal einen Link dazu? Ich meine: Ist die Seite schon online?

laborix · #7 (**permalink**) 24.10.2010, 19:51

Schau dir mal das hier an (Beispiel ganz unten):
CSS 1, Cascading Style Sheets 1 Test

Kopiere das CSS Beispiel in dein CSS für id=forum, beziehungsweise für id=umfrage. Ansonsten schau auf der oben genannten Seite in den Quelltext wegen der div Anordnung.

overdev · #8 (**permalink**) 25.10.2010, 15:13

Zitat:

Zitat von philosapiens

Hast Du mal einen Link dazu? Ich meine: Ist die Seite schon online?

Hm hier wenn neimand was dagegen hat:

GermanGameTipps - Webseite

Zitat:

Zitat von laborix

Schau dir mal das hier an (Beispiel ganz unten):
CSS 1, Cascading Style Sheets 1 Test

Kopiere das CSS Beispiel in dein CSS für id=forum, beziehungsweise für id=umfrage. Ansonsten schau auf der oben genannten Seite in den Quelltext wegen der div Anordnung.

Sorry das hilft mir nicht. Da gehts um CSS allgemein und wie du siehst hab ich IDs schon gesetzt etc

/edit

Wenn ich ein Liquid Design machen würde dann würde das in der Mitte bleiben oder?

philosapiens · #9 (**permalink**) 25.10.2010, 17:39

Hi,

floaten brauchst Du nur das erste um das zweite.

Hast Du Dir in etwa so etwas vorgestellt:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>GermanGameTipps - Webseite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<style>
#all{width:700px;margin:0 auto;padding:0;vertical-align: middle;text-align:center;}
p{font-size: 1.1em;padding-bottom: 2.5em;}
img{border:3px solid silver;}
#umfrage{float: left;margin-left:25px;}
#forum{}
</style>
    
</head>
<body>
<div id="all">
<p>Klicke auf das Bild mit "Umfrage" um an der aktuellen Umfrage teilzunehmen. <br />
    Wenn Du ins Forum m&ouml;chtest klicke auf das Bild mit "Forum."</p>
<div id="umfrage"><a title="zur Umrage" href="umfrage/index.php"><img src="http://www.germangametipps.de/umfrage1.jpg" width="300" height="120" alt="Hier gehts zur Umfrage" /></a></div>
<div id="forum"><a title="zum Forum" href="forum" ><img src="http://www.germangametipps.de/forum1.jpg" width="300" height="120" alt="Hier gehts zum Forum" /></a></div>
</div>
</body>
</html>

overdev · #10 (**permalink**) 25.10.2010, 19:10

Danke geht komischerweise jetzt.

Ist das normal das wenn ich Dateien per FTP Client hochlade das es erst nach einigen Minuten aktualisiert wird?
Bei mir ist das so obwohl die Datei schon längst hochgeladen ist.

Ach und macht man CSS heutzutage noch in die HTMl Datei? Ich dachte das sei veraltet.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wie Bilder nebeneinander machen?	hallo2008	CSS	4	24.07.2009 06:51
Bilder nebeneinander ohne Leerraum darstellen?	cyprus	CSS	13	19.10.2007 00:18
Bilder nebeneinander	StarSt0rm	CSS	1	09.09.2007 23:35
2 bilder nebeneinander platzieren	Stressless	CSS	3	25.10.2006 18:11
Bildergalerie mit Bildunterschrift, Bilder nebeneinander	CvH	(X)HTML	5	07.08.2006 20:41