Bilder nebeneinander?Erster Tag HTML und CSS und nichts geht

Dino

Hallo,
ich verzweifle grade. Ich habe mir diese ganzen HTML und CSS Geschichten durchgelesen und mit HTML komm ich einigermaßen klar.
Jetzt versuche ich schon die ganze Zeit zwei unterschiedliche Bilder nahtlos nebeneinander zu bekommen.
Sie sind zur Zeit so:
Bild
Bild

Ich will sie so: BildBild

Ich weiss, dass das irgendwie mit diesem Float gehen muss, nur hab ich null Peilung wo ich das hinschreiben muss
Ich hab das da im Moment so stehen:

Tja...die beiden Bilder sollten untereinander und am besten möchte ich das Menü nahtlos anschließen, aber wie man ein Menü/Navi macht, ist mir noch total unklar...:-(

Ich hoffe, ihr könnt mir helfen.

Liebe Grüße,
Eure Dino

lauras

Hey, deine Bilder kannst du so stehen lassen, jedenfalls prinzipiell.

Ich verwende jetzt einfach mal deine schon gegebene Klasse img150
:
HTML:

Code

<img class="img150" src="http://www.repage7.de/xxxx.JPG" width="800" height="100" />




<img class="img150" src="http://www.repage7.de/xxxx.gif" width="200" height="200" />

CSS:

Code

.img150 {
float: left;
}

Wichtig ist dann dabei, dass du dem ersten Element, dass nicht mehr in diese Reihe soll, auf jedenfall ein clear: left; mitgibst, da das mit dem Layout sonst schwierig wird.

Zur Navigation: Möchtest du die direkt danaben oder direkt drunter anschließen?
Ich habe eine Beispiel-Navigation in diesem Thread gepostet. Das ganze ist mit hover-Effekt und durch Auskommentierung des CSS weitesgehenst selbsterklärend. Schaus dir mal an und guck ob du danach schlauer bist.

Gutes Gelingen!
Laura

Dino

Hallo,
danke für die Antwort
Ich glaube, ich habe das generell nicht verstanden. Wo füge ich denn den css code ein?

Danke schön

Sarkkan

Kommt darauf an, wo du deine CSS Eigenschaften angibst^^
Wenn du diese in einer extra Datei angibst, dort einfach einfügen, wenn du es in der HTML Datei machst dort

Oder verwendest du soetwas überhaupt?
Wenn nicht, dann mach folgendes:

Code

<head>
<title></title>
<meta-Tags />
<style>
.img150 {
float: left;
}
</style>
</head>
<body>

Auch wenn ich mich dann fragen würde, aus welchem Grund du überhaupt, eine class verwendest...

sejuma

CSS-Code einbinden:
http://www.ohne-css.gehts-gar.net/0053.php

Bilder nebeneinander anordnen:
http://www.ohne-css.gehts-gar.net/0004.php

Dino

Okay, ich raffs nicht

Ich habe mich jetzt bei ner Seite angemeldet, wo man Homepages erstelleb kann und benutze da jetzt eine Vorlage, wo man, wenn man html kann, drin herum ändern kann.

Ich habe mir diese Vorlage ausgewählt <a class="postlink" href="http://www.repage.de/vorschau.php?nr=76">http://www.repage.de/vorschau.php?nr=76</a>

Ich würde jetzt gerne den oberen Teil (der ja aus dem durchgehenden roten Streifen und den drei Teilen darunter besteht) gegen mein Banner ersetzen.
Ich habe schon an eingen Stellen was geändert, aber mein Banner erscheint dann da oben immer nur stückchenweise. Also nur rechts und in dem dünnen roten Streifen usw.

Kann mir einer sagen, was ich bei diesem Code wegmachen muss und wo ich den Code für mein Banner einsetzen muss?

Code:


<html>
<head>
<title>%%TITLE%%</title>
<style type=text/css>
body,.content {font-size:13px;font-family:Arial;color:FFFFFF}
.menue {color:FFFFFF;font-size:13px;font-family:Arial;text-decoration:none}
.menue:hover {color:FFFFFF;font-size:13px;font-family:Arial;text-decoration:underline}
a {text-decoration:underline}
a:hover {text-decoration:none}
</style>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#BD6D6D" vlink=FFFFFF alink=FFFFFF link=FFFFFF>

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="http://images.repage.de/images/templates/jr/topbkg.gif">
<tr>
<td width="50%" background="http://images.repage.de/images/templates/jr/topleft.gif" width=418 height=75>
<p style="margin-left:20px;color:FFFFFF;font-family:Arial;font-size:26px">%%TITLE%%</p>
</td>
<td width="50%">
<p align="right"><img border="0" src="http://images.repage.de/images/templates/jr/logoblank.gif" width="219" height="75"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="http://images.repage.de/images/templates/jr/linebkg.gif">
<tr>
<td width="1%"><img border="0" src="http://images.repage.de/images/templates/jr/lineleft.gif" width="17" height="18"></td>
<td width="98%">
<p align="center">

:MENUSTART:
<a class=menue href="%%LINK_URL%%" target="%%TARGET%%"><b>%%LINK_TEXT%%</B></a><font color=white size=2 face=arial> |</font>
:MENUEND:

</td>
<td width="1%">
<p align="right"><img border="0" src="http://images.repage.de/images/templates/jr/lineright.gif" width="18" height="18"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan=2 width="1%" background="http://images.repage.de/images/templates/jr/leftside.gif">

<center><TABLE border=0 width=95%><tR><tD>
<font class="content"> %%CONTENT%% </font>
</TD></TR></TABLE></center>

</td>

</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="http://images.repage.de/images/templates/jr/botbkg.gif">
<tr>
<td width="100%"><img border="0" src="http://images.repage.de/images/templates/jr/botbkg.gif" width="27" height="12"></td>
</tr>
</table>

Ich hätte gerne, dass das so aussieht. <a class="postlink" href="http://www.flickr.com/photos/stanna777/4523173416/">http://www.flickr.com/photos/stanna777/4523173416/</a>
Ist das mit der Vorlage überhaupt möglich?

Wenn nicht, dann lass ich die Seite einfach so, ohne Banner, aber wenns gehen würde, wärs cool.

Ich hoffe, ich raube euch nicht den letzten Nerv!

Danke!

Sarkkan

(Erste Tabelle)

Code

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="http://images.repage.de/images/templates/jr/topbkg.gif">
<tr>
<td width="100%" background="HTTP://WWW.MEIN-BANNER.DE" width=418 height=75>
<p style="margin-left:20px;color:FFFFFF;font-family:Arial;font-size:26px">%%TITLE%%</p>
</td>
</tr>
</table>

so müsste das aussehen
(<a class="postlink" href="HTTP://WWW.MEIN-BANNER.DE">HTTP://WWW.MEIN-BANNER.DE</a> nicht vergessen durch deinen Link zu dem Banner zu ersetzen^^ )

Jetzt mitmachen!