nicht angemeldet
Text geht über div hinaus
Hallo,
habe noch einige Probs mit CSS. Ich habe ein nettes Design auf meiner Homepage (http://obirap.homeunix.org/~annalein/), aber der Text geht über das Outline Element hinaus. Habe schon alles mögliche versucht mit % oder mit margin-buttom oder padding-bottom in den verschiedenen div-elementen.
Ich wäre euch super dankbar für Hilfe. Auf meiner Testseite
http://obirap.homeunix.org/~annalein/index.php?doc=todo
findet ihr einen extra langen Text. (Sorry habe gerade nicht finden können wie man einen Link postet)
Also hier die wichtigsten Auszüge aus dem Code:
CSS:
#outline {
position: relative;
width: 90%;
min-height: 800pt;
margin: 16pt auto 0pt;
overflow: visible; }
#title {
width: 90%;
top: 1pt;
position: absolute;
visibility: visible;}
#main-navigation {
width: 100pt;
left: 10pt;
top: 150pt;
height: 150pt;
position: absolute;
visibility: visible;
padding: 0px;}
#text {
left: 160pt;
top: 163pt;
position: absolute;
right: 10pt;
visibility: visible;
overflow: hidden; }
index.php:
<body>
<div id="outline">
<img src="images/gradient.jpg" alt="" height="400pt" width="100%" border="0" />
<div id="title"></div>
<ul id="main-navigation"></ul>
<div id="text"></div>
</div>
</body>
-
Hallo Anna,
keine vollständige Lösung, aber evtl. ein Hinweis:
Du positionierst div#outline als {relative} und div#text als {absolut}.
Da würde ich als Brauser auch nicht so genau wissen, wie ich jetzt was darstellen soll...
Grüße,
Claus-
Also nun ist auch outline absolute positioniert. Ich habe dann noch eine left angabe gemacht, damit es nicht am linken Rand klebt.
Das ändert allerdings nichts am Problem.
Trotzdem schonmal danke.
Gruß, Anna.
-
Huhu -
Das ist, denke ich, die falsche Richtung. Du musst keines von beiden divs absolut positionieren. Versuch´es mal mit reinem margin/padding und positioniere, wenn überhaupt, nur das äußere div. Ich habe vorher mal die Seite runtergeladen, das äußere div positioniert gelassen und die positionierung aus dem inneren rausgenommen und es funzte.
Du kannst #text und den gesamtcontainer in der breite (witdh) angeben, dann Abstände angeben und das müsste es eigentlich tun.
Eigentlich ...
Grüße,
Claus-
Versuch´es mal mit reinem margin/padding und positioniere, wenn überhaupt, nur das äußere div.
Hi Claus,
so habe ich es nun gemacht. Klasse, es klappt. Nun beginnt aber der Text erst relativ weit unten, immer auf der gleichen Höhe, die sich meiner Meinung nach durch nichts auszeichnet. Ich weiß nicht warum er nicht früher beginnt. Hättest du da noch einen Tipp.
Da ich nicht weiß, was falsch ist, poste ich mal den kompletten CSS Code:
#outline {
position: absolute;
left: 5%;
width: 90%;
margin: 16pt auto 0pt;
padding-bottom: 16pt;
border: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #999;
border-bottom: solid 1px #999;
overflow: visible; }#title {
width: 90%;
top: 1pt;
margin: 0px;
position: absolute;
visibility: visible;}#main-navigation {
width: 110pt;
left: 20pt;
top: 150pt;
position: absolute;
visibility: visible;
padding: 0px;
line-height: 26pt;
list-style: none;
font-size: 16pt;}#text {
left: 0pt;
top: 0pt;
right: 0pt;
margin-top:0pt;
margin-left: 160pt;
margin-right: 10pt;
visibility: visible;
overflow: hidden; }p {
color: #666;
font-size: 12pt;
font-family: "Lucida Grande", Arial, sans-serif;
font-weight: normal;
margin-top: 0px; }h4 { color: #666;
font-size: 40pt;
font-family: "Lucida Grande", Arial, sans-serif;
font-weight: bold;
text-align: left;
letter-spacing: -1px;
width: auto;
margin-left: 50pt;
margin-top: 50pt;}Zur Übersicht habeich die divs mal umrandet, um deren Ausmaße leicht zu erkennen.
Gruß Anna.
-
Das hat nix mit dem CSS zu tun, es ist das Hintergrundbild, das du in den Vordergrund gepackt hast:
<body>
<div id="outline">
<img src="images/gradient.jpg" alt="" height="400pt" width="100%" border="0" />...............
wenn du das Hintergrund-Bild in dein erstes <div> packst, dann kann dein #text ja nur unterhalb beginnen, hm?
Mach ein Hintergrund-Bild daraus:
#outline {
....
background-image: url (images/gradient.jpg) top left;
background-repeat: no-repeat;
}
.........................
<div id="impressum"><a href="index.php?doc=impressum">Impressum</a></div>
<div id="title">
<h4>Annalein - To Do</h4></div>
<!-- Navigation -->
<ul id="main-navigation">
...etc...
</ul>
<!-- Content -->
<div id="text">
<h1>ToDo:</h1>
<ul>
<li> zweite Naviebene: Ãœberschrift anpassen </li>grüße,
claus-
Wow danke!!!
Das würde alles erklären, sorry war den ganzen Tag weg. Werde es gleich mal versuchen.
Gruß Anna.
-
-
-
-
-