kostenloser Webspace werbefrei: lima-city


Verschiebung einer Tabelle

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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>&#149 </td>
    <td><a href="news.php">News</a></td>
    <td>&#149 </td>
    <td ><a href="playlist.php">Playlisten</a></td>
    <td>&#149 </td>
    <td><a href="contest.php">Contests</a></td>
    <td>&#149 </td>
    <td><a href="download.php">Downloads</a></td>
    <td>&#149 </td>
    <td><a href="gaestebuch.php">Gästebuch</a></td>
    <td>&#149 </td>
    <td><a href="vorschlag.php">Vorschläge</a></td>
    <td>&#149 </td>
    <td><a href="chat.php">Chatbox</a></td>
    </tr>
    </table>



    LG

    Beitrag zuletzt geändert: 10.4.2013 18:04:10 von marvinkleinmusic
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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 ;)


  5. mmm. Kannst du das ganze schnell in ner Testpage online stellen?



    ich meinte eig so align, border etc. :D
  6. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    Klar hier bitte:

    http://marvinkleinmusic.de/design/test.html

    LG
  7. 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
  8. 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>
  9. f******s

    Meinst du so? http://www.wir-brauchen-naturstrom.de/test2.html

    Ich muss aber pcw voll zustimmen. Tabellen sind out
  10. 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
  11. f******s

    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/
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!