Menu schließen

HTML Tabellen mit Div

Frage: HTML Tabellen mit Div
(5 Antworten)


Autor
Beiträge 0
13
Hey Leute,
ich hab ein Problem und komme nicht mehr weiter.
Ich mache gerade eine Website für die Schule und es hackt ein bisschen. Undzwar habe ich 2 Tabellen nebeneinander gemacht schon mit div. So, jetzt soll eine 3. Tabelle, recht unter der anderen eingebaut, sodas sie, auch nur die hälfte einnimmt. Die Linke Tabelle ist so groß, wie die beiden rechten, aber 3. die ich rechts einbauen will. schiebt sich immer so weit runter, das sie unter der linken erst beginnt. Wie Löse ich das
Frage von AndresIpod (ehem. Mitglied) | am 07.01.2013 - 16:46


Autor
Beiträge 6489
9		 Antwort von Peter | 07.01.2013 - 16:55
du müsstest dem div-bereich, der links sein soll ein "float: left;" mit auf den weg geben.


hier was zum nachlesen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
________________________
 e-Hausaufgaben.de - Team


Autor
Beiträge 0
13		 Antwort von AndresIpod (ehem. Mitglied) | 07.01.2013 - 17:02
Ich hab hier mal den Code mitreingeschrieben. Die Date, sind ja unwichtig.. kannst dir es ja mal anschauen
Die CSS sachen kommen gleich



<div class="tabelle" style="float: right; width: 45%;">
<table width="100%" border="1" cellpadding="0" cellspacing="2">
<tr>
<td><h6>Vergangende Tourdaten</h6></td> </tr> <tr> <td>
<p>Tour 2012 Deutschland</p>
<p>11.10.2012 München, Zenith<br>
12.10.2012 Hamburg, Sporthalle<br>
14.10.2012 Düsseldorf, Mitsubishi Electric Halle<br>
15.10.2012 Frankfurt, Jahrhunderthalle</p>
</td>
</tr>
</table>
</div>

<div class="tabelle2" style="width: 45%;">
<table width="100%" border="1" cellpadding="0" cellspacing="2">
<tr>
<td><h6>Aktuelle Tourdaten</h6> </td> </tr> <tr> <td>
<p>Tour 2013 USA</p>
<p>28.02.2013 - Atlantic City<br>
02.03.2013 - Boston<br>
05.03.2013 - Pittsburgh<br>
06.03.2013 - Columbus<br>
08.03.2013 - Raleigh<br>
11.03.2013 - Orlando<br>
12.03.2013 - Miami Beach</p>
<p>Europa Tour-Daten kommen bald!</p>
<p>Europa Tour-Daten kommen bald!</p>
<p>Europa Tour-Daten kommen bald!</p>
</td>
</tr>
</table>
</div>
<div class="clear"></div>
<div class="tabelle" style="float: right; width: 45%;">
<table width="100%" border="1" cellpadding="0" cellspacing="2">
<tr>
<td></td> </tr> <tr> <td>
<p>Tour 2012 Deutschland</p>
<p>11.10.2012 München, Zenith<br>
12.10.2012 Hamburg, Sporthalle<br>
14.10.2012 Düsseldorf, Mitsubishi Electric Halle<br>
15.10.2012 Frankfurt, Jahrhunderthalle</p>
</td>
</tr>
</table>
</div>


Autor
Beiträge 0
13		 Antwort von AndresIpod (ehem. Mitglied) | 07.01.2013 - 17:03
Hier noch die CSS dateien...


div.imagePhotos img {
width: 230px; /* skalieren das orginal bild auf die kleine größe */
height: 150px; /* um verpixelung beim vergößern zu verhindern */
}
div.imagePhotos img:hover {
position: absolute;
margin-left: -200px; /* die hälfte des größenunterschiedes der bilder (Verschiebung links/rechts) */
margin-top: -65px; /* hier genau so bloß nach oben und unten */
width: 400px; /* die weite beim vergrößern */
height: 260px; /* die höhe beim vergrößern */
}

div.imageStore {
padding: 30px; /* Entfernung zur Navigationsleiste */
}
div.imageStore div {
float: left;
width: 300px;
height: 150px;
/* ab hier kann man die abstände
und sonstiges der bilder eintragen */
margin-left: 50px; /*Verschiebung nach rechts */
}
div.imageStore img {
width: 230px; /* wir skalieren das orginal bild auf die kleine größe */
height: 150px; /* um verpixelung beim vergößern zu verhindern */
}
div.imageStore img:hover {
position: absolute;
margin-left: -100px; /* die hälfte des größenunterschiedes der bilder */
margin-top: -65px; /* hier genau so */
width: 310px; /* die weite beim vergrößern */
height: 160px; /* die höhe beim vergrößern */
}

div.tabelle { margin-right:4%; }
div.tabelle2 { margin-left:5%; }


Autor
Beiträge 0
13		 Antwort von AndresIpod (ehem. Mitglied) | 07.01.2013 - 17:04
Sorry, da hatte er zu viel kopiert. Ist natürlich nur das hier


div.tabelle { margin-right:4%; }
div.tabelle2 { margin-left:5%; }


Autor
Beiträge 6489
9		 Antwort von Peter | 07.01.2013 - 18:12
gib der linken tabelle ein float:left mit, den anderen beiden kein float-attribut und sie erscheinen nebeneinander.

natürlich muss du noch die reihenfolge dann anpassen.
________________________
 e-Hausaufgaben.de - Team

Verstoß melden
Hast Du eine eigene Frage an unsere Informatik-Experten?

> Du befindest dich hier: Support-Forum - Informatik
ÄHNLICHE FRAGEN:
BELIEBTE DOWNLOADS: