Verschiebung einer Tabelle
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
bevorzugen
bild
brauchen
code
download
erreichen
http
index
interessiert url
lesestoff
machen
nutzen
position
problem
radius
resultat
tabelle
url
versuchen
-
Hallo Zusammen,
Ähnlich wie in meinen letzten Thread (Wo ich dadrauf aufmerksam gemacht wurde das Tabellen out sind zum Designen),
Möchte ich nun eine ganze Tabelle verschieben, die direkt neben einem Image liegt.
Folgendes möchte ich erreichen:
Die Tabelle soll an der rechten unteren Ecke angezeigt werden nicht Rechte obere.
Desweiteren möchte ich innerhalb des weissen innen Bereichs noch die 4 ecken abgerundet haben.
Hier die Codes:
#navigation_menu { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; -O-border-radius:5px; border:12px #67A5F4 solid; background:#ffffff; height:55px; width:780px; padding-left:10px; }
<img align="left" id="cover" src='../images/cover.jpg' style="width:200px; height:200px;" title="MarvinKleinMusic" alt="MarvinKleinMusic,Youtube,Smule,Magic Piano,Magic Guitar,Piano"> <table align="bottom" id="navigation_menu" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="index.php">Index</a></td> <td>• </td> <td><a href="news.php">News</a></td> <td>• </td> <td ><a href="playlist.php">Playlisten</a></td> <td>• </td> <td><a href="contest.php">Contests</a></td> <td>• </td> <td><a href="download.php">Downloads</a></td> <td>• </td> <td><a href="gaestebuch.php">Gästebuch</a></td> <td>• </td> <td><a href="vorschlag.php">Vorschläge</a></td> <td>• </td> <td><a href="chat.php">Chatbox</a></td> </tr> </table>
LG
Beitrag zuletzt geändert: 10.4.2013 18:04:10 von marvinkleinmusic -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi,
ganz spontan würde ich es mal mit
position:relative; bottom:0px; right:0px;
versuchen.
LG
Ah und bitte, keine inTag Attribute für Styles. Das Alles ins CSS packen, zumal du sowieso schon IDs vergibst. Macht den Code einfach übersichtlicher und strukturierter. Zum temporären Testen / Spezialfällen können einzelne CSS-Werte ja immernoch ins style-Attribut.
Beitrag zuletzt geändert: 10.4.2013 21:50:05 von programtools -
Leider ist nichts passiert die Navi bleibt weiterhin an ihren Platz ..
LG
PS:Du meinst den wert bei dem Bild oder? Dieser ist zurzeit nur vorrüber gehend dort gesetzt ;)
-
mmm. Kannst du das ganze schnell in ner Testpage online stellen?
ich meinte eig so align, border etc. :D
-
Hi,
also ich habs mir angeschaut und es wäre zwar mit position: absolute / relative gelaufen, aber, nicht relativ, d.h. sobald dein Bild höher wird passts nichtmehr. Um das auf die Schnelle zu lösen ist mir (lustig, eigentlich hat man dir ja davon abgeraten und das hätte ich wohl selbst auch getan) nur eine Lösung via Tabelle eingefallen. Denn ja, Tabellen bieten nunmal die Möglichkeit der vertikalen Ausrichtung. Ausserdem kann es sich später auch mal negativ bemerkbar machen, wenn alle Elemente absolut positioniert sind, da sie dadurch ja eigentlich aus dem normalen Fluss ausgehebelt werden und man sollte natürlich versuchen so gut es geht dioesen gegebenen Fluss zu nutzen!
Hier das Resultat: http://programtools.lima-city.de/probleme/jsuw72usjwq282kla/position.html
Ich hoffe das kommt hin?
LG -
Ich würde dennoch eine tabellenfreie Lösung bevorzugen.
<html> <head> <title></title> <style type="text/css"> #webseite { margin: 0 auto; width: 980px; } #header { height: 150px; position: relative; } #cover { float: left; } #navigation_menu { background-color: #67a5f4; bottom: 0; border-radius: 10px; margin-left: 160px; padding: 12px; position: absolute; } #navigation_menu ul { background-color: #fff; border-radius: 5px; margin: 0; padding: 8px; } #navigation_menu li { display: inline; } #navigation_menu a { margin: 0 15px; } </style> </head> <body> <div id="webseite"> <div id="header"> <img id="cover" src='http://placehold.it/150x150' alt=""> <div id="navigation_menu"> <ul> <li><a href="index.php">Index</a></li> <li><a href="news.php">News</a></li> <li><a href="playlist.php">Playlisten</a></li> <li><a href="contest.php">Contests</a></li> <li><a href="download.php">Downloads</a></li> <li><a href="gaestebuch.php">Gästebuch</a></li> <li><a href="vorschlag.php">Vorschläge</a></li> <li><a href="chat.php">Chatbox</a></li> </ul> </div> </div> </div> </body> </html> -
Meinst du so? http://www.wir-brauchen-naturstrom.de/test2.html
Ich muss aber pcw voll zustimmen. Tabellen sind out -
funestus schrieb:
Ich muss aber pcw voll zustimmen. Tabellen sind out
Fast. Tabellen als Layoutmittel sind out. Aber für Tabellen sollten natürlich Tabellen verwendet werden.
Im Menü... hier hat die Liste eben doch gewonnen :)
Also würde ich ebenfalls diese Lösung empfehlen!
LG -
programtools schrieb:
funestus schrieb:
Ich muss aber pcw voll zustimmen. Tabellen sind out
Fast. Tabellen als Layoutmittel sind out. Aber für Tabellen sollten natürlich Tabellen verwendet werden.
LG
Ich bin nur von deinem Vorhaben ausgegangen und damit alle Tabellen schlecht gemacht.
Selbstverständlich werden wir noch Tabellen brauchen.
Ich habe hier auch guten Lesestoff für die Jenigen die es noch interessiert.
http://www.vorsprungdurchwebstandards.de/ein_herz_fuer_tabellen.html
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
