nicht angemeldet
Problem mit Boxen
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>
-
Hallo.
Lösche die inneren <div> und formatiere die Listen direkt, insbesondere mit passenden Werten für "margin" und "padding".
MfG, at-
Lösche die inneren <div>...
Sieht schon besser aus!
Ich hatte die <div> u.a. gesetzt weil in SELFHTML (allerdings zu "position") folgendes steht:"Weder Netscape noch der MS Internet Explorer interpretieren Angaben zur absoluten Positionierung in allen HTML-Elementen. Um eine maximale Abwärtskompatibilität zu erreichen, ist es am besten, Angaben zur Positionierung auf das div-Element zu beschränken. Schließen Sie andere Elemente, etwa Textabsätze, Grafiken, Tabellen, Formulare usw. einfach in entsprechende div-Elemente ein."
...und formatiere die Listen direkt, insbesondere mit passenden Werten für "margin" und "padding".
Den Text habe ich ja hinbekommen, aber bei den Grafiken habe ich unten und an beiden Seiten 2px transparenten "Rand". Woher kommt der denn? Mit border, margin und padding bekomme ich ihn jedenfalls nicht weg...
Der Code (mit farbigen "border" zum checken) sieht jetzt so aus:
<!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:0px 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% }
#text { background:transparent; float:left; border:1px dotted Blue;
list-style:none; margin:4px 0px 0px 10px; padding:0px; vertical-align:bottom }
#text li { display:inline }
#tabs { background:transparent; float:right; list-style:none;
margin:0px; padding:0px; border:1px dotted Red }
#tabs li { display:inline }
-->
</style>
</head>
<body>
<div id="pagehead">
<ul id="text">
<li>Text1</li>
<li>Text2</li>
</ul>
<ul id="tabs">
<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="30" height="16" alt="Nr.3" title="Nr.3" /></li>
<li><img src="tab.gif" width="30" height="16" alt="Nr.4" title="Nr.4" /></li>
</ul>
</div><!-- END pagehead -->
</body>
</html>-
Hallo.
Den Text habe ich ja hinbekommen, aber bei den Grafiken habe ich unten und an beiden Seiten 2px transparenten "Rand". Woher kommt der denn? Mit border, margin und padding bekomme ich ihn jedenfalls nicht weg...
Das Archiv hätte dir längst verraten können, dass "display: block;" Abhilfe schafft.
MfG, at-
Hallo at
Das Archiv hätte dir längst verraten können, dass "display: block;" Abhilfe schafft.
Danke für den Hinweis, aber jetzt weiss ich wirklich nicht, wo ich das unterbringen soll: bei <ul> hat's keine Wirkung und bei <li> musste ich ja schon "display: inline" angeben, damit die Grafiken nebeneinander erscheinen...
P.S. Das Archiv wollte ich als erstes "befragen", aber wo um Himmels willen ist denn die Suchfunktion versteckt? 8-(
Gerhard
-
Hallo.
P.S. Das Archiv wollte ich als erstes "befragen", aber wo um Himmels willen ist denn die Suchfunktion versteckt? 8-(
Betätige die Tabulator-Taste auf der Hauptseite des Forums und beachte, wohin der Cursor springt.
MfG, at-
P.S. Das Archiv wollte ich als erstes "befragen", aber wo um Himmels willen ist denn die Suchfunktion versteckt? 8-(
Betätige die Tabulator-Taste auf der Hauptseite des Forums und beachte, wohin der Cursor springt.
Also bei mir springt er auf's Archive aber nicht auf die suche (die auch meiner Meinung nach sehr versteckt ist)
Struppi.
-
-
-
-
-