nicht angemeldet
Hallo beisammen,
ich habe drei Fragen zur Positionierung mit Boxen und leide wohl unter einem Verständnisproblem...
Ziel:
Ich möchte innerhalb einer Box auf der linken Seite etwas Text und rechts ein kleines Navigationsmenü unterbringen. Dabei stiess ich auf drei Probleme, die ich einfach nicht lösen kann (Quelltext unten):
1. Beide inneren Boxen ("textline" und "tabmenu" sind zu gross, d.h. sie reichen auf der Unterseite über den Inhalt hinaus. Wie kann ich die Boxgrösse automatisch auf die Höhe des Inhalts beschränken?
2. Linke Box ("textline"): Wie erreiche ich einen linksbündigen Textinhalt?
3. Rechte Box ("tabmenu"): Wie kann ich die Grafiken direkt an den unteren Rand der "Mutterbox" (pagehead) anstossen lassen?
Habe schon alles mögliche versucht, konnte aber keine Lösung finden. Wo liegt der Denkfehler?
Danke für eure Hilfe!
Gerhard
Und hier mein Code (ohne Grafiken natürlich)...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>CSS-Test</title>
<style type="text/css">
<!--
body { background:#f5f5f5 url(images/lines.gif); color:#000000;
font:12px Verdana,Arial,Helvetica,sans-serif;
height:100%; margin:0px; padding:10px }
#pagehead { background:#FBD9B6; border-top:0px; border-right:0px;
border-left:0px; border-bottom:1px solid #333333;
color:#000000; margin:0px auto; padding:0px; width:100% }
#textline { background:transparent; border:1px solid Blue; float:left;
margin:0px; padding:0px 10px; text-align:left }
#textline ul { list-style:none }
#textline ul li { display:inline }
#tabmenu { background:transparent; border:1px dotted Red; float:right;
margin:0px; padding:0px 10px; vertical-align:text-bottom; }
#tabmenu ul { border:1px solid Green; list-style:none; padding:0px }
#tabmenu ul li { display:inline }
#tabmenu ul li img { padding:0px }
-->
</style>
</head>
<body>
<div id="pagehead">
<div id="textline">
<ul>
<li>Text1</li>
<li>Text2</li>
</ul>
</div><!-- END textline -->
<div id="tabmenu">
<ul>
<li><img src="tab.gif" width="80" height="20" alt="Nr.1" title="Nr.1" /></li>
<li><img src="tab.gif" width="80" height="20" alt="Nr.2" title="Nr.2" /></li>
<li><img src="tab.gif" width="80" height="20" alt="Nr.3" title="Nr.3" /></li>
<li><img src="tab.gif" width="30" height="16" alt="Nr.4" title="Nr.4" /></li>
<li><img src="tab.gif" width="30" height="16" alt="Nr.5" title="Nr.5" /></li>
<li><img src="tab.gif" width="30" height="16" alt="Nr.6" title="Nr.6" /></li>
</ul>
</div><!-- END tabmenu -->
</div><!-- END pagehead -->
</body>
</html>