nicht angemeldet
Div Ausrichtung klappt einfach nicht
Tach,
neues Problem zurzeit:
Ich habe nach dem Prinzip das auch hier:
http://www.css-technik.de/css-examples/20_9/menu1.html
verwendet wird ein Menü mit Popup Infos gebastelt.
Funktioniert auch, nur, dass die Positionierung des Popup-Fesnters nicht mehr stimmt, sobald man die Fenstergröße verändert.
Mit position:absolute klappts nicht, und mit relative auch nicht.
Ich will einfach nur eine Feste Position ( kann auch im Bezug auf Hauptdiv oder so sein ) festlegen, die Proportionen sollen einfach stimmen.
Hier CSS Definitionen:
-----------------------------------------------
div#maindiv
{
position:relative;
display:block;
align:center;
margin:5% 10%;
width:100%;
height:90%;
border-color:#000000;
border-width:2px;
border-style:solid;
background:#AA0000;
}
div#bannerdiv
{
display:block;
align:center;
}
div#topdiv
{
position:relative;
width:100%;
align:center;
display:block;
background-color:AA7777;
}
div#menudiv a
{
border:#000000 1px solid;
background:#770000;
color:#FFFFFF;
text-align:center;
width:10%;
font-weight:normal;
font-size:8pt;
margin:5px 7px 5px;
float:top;
display:inline-table;
}
div#menudiv a:hover
{
border:#FFFFFF 1px dotted;
background:#BB0000;
padding-bottom:5px;
margin:5px 7px 5px;
color:#FFFFFF;
padding-top:3px;
text-align:center;
top:100px;
width:10%;
display:inline-table;
}
a .infotext
{
display:none;
text-decoration:underline overline;
white-space:nowrap;
}
a:hover .infotext
{
position:absolute;
top:40px;
left:180px;
display:block;
width:450px;
font-size:8pt;
font-weight:normal;
background:#BB0000;
border:1px dashed #000000;
color:#FFFFFF;
padding:5px;
text-align:center;
}
--------------------------------------------------
Quelltext der HTML Seite:
..................................................
<html>
<head>
<title>geht net</title>
<link rel="stylesheet" type="text/css" href="nfd.css">
</head>
<body>
<div id="maindiv" align="center">
<div id="bannerdiv"><img src="banner.jpg" width="565" height="147"></div>
<br>
<br>
<div id="topdiv">
<div id="menudiv"><a href="#">Link 1<span class="infotext">lala</span></a><a href="#">Link 2<span class="infotext">lala</span></a><a href="#">Link 3<span class="infotext">lala</span></a><a href="#">Link 4<span class="infotext">lala</span></a><a href="#">Link5<span class="infotext">lala</span></a>
</div>
</div>
</div>
</body>
</html>
.........................................................
Ich versteh vor allem nicht, warums bei denen ( http://www.css-technik.de/css-examples/20_9/menu1.html ) funktioniert und bei mir nicht.
Bin für Hilfe sehr dankbar,
MfG,
Tille.
-
Hallo,
Ich versteh vor allem nicht, warums bei denen ( http://www.css-technik.de/css-examples/20_9/menu1.html ) funktioniert und bei mir nicht.
Ich verstehe vor allem nicht, was dein Problem ist. Es _funktioniert_ nämlich, und zwar _genau so_ wie du es im Quelltext angegeben hast.
Wie sollte es denn sein?Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[-
Na wenn man im Vollbild ( im IE ) kuckt gehts auch, aber mach das Fenster dann mal Halb so groß, dass schwirrt die Infobox irgendwo in der Landschaft rum, aber nicht mittig über der Navigationsleiste.
Mfg,
Tille-
Hallo,
Na wenn man im Vollbild ( im IE ) kuckt gehts auch, aber mach das Fenster dann mal Halb so groß, dass schwirrt die Infobox irgendwo in der Landschaft rum, aber nicht mittig über der Navigationsleiste.
Die Infobox ist in genau _einem_ Fall _mittig_ unter (über sowieso nicht) der Navigationsleiste. Das ist dann aber reiner Zufall, dass die Größe des Anzeigebereichs genau die richtige Breite hat.
Generell ist die infobox _immer_ 180px vom linken Rand des menudiv's entfernt. Wenn das Fenster kleiner wird sind es immer noch 180px und damit ragt es evtl über den Fensterrand hinaus.Du möchtest evtl. relative Größen (em, %) angeben?
Ausserdem solltest du deine Navigation logisch auszeichnen -> kein div, sondern eine Liste.
Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[-
@MuDGard:
"»» margin:5% 10%;
width:100%;
height:90%;
border-width:2px;das Ding soll 20% + 4Pixel breiter sein als Platz vorhanden ist?
das Ding soll 4 Pixel höher sein als Platz vorhanden ist?"Unlogisch, hast du recht, aber es geht.
Zum Quelltext: ich mach den nicht schön solang das was ich will eh nciht funktioniert. Hilf mir doch bitte erstmal bei meinem aktuellen Problem.
@ShiNtoKu: Bei der Positionsangabe kann man doch keine Relativen Größen angeben oder seh ich das falsch? ( top, left usw )
Gibt es keine möglichkeit, dass sich das div der Infobox am Body, am maindiv oder am topdiv orientiert? Ist meine Vorstellung garnicht mit Divs realisierbar?
-
Hallo,
Unlogisch, hast du recht, aber es geht.
Ja, es geht, aber höchstwahrscheinlich nicht so, wie du es gerne hättest.
Zum Quelltext: ich mach den nicht schön solang das was ich will eh nciht funktioniert. Hilf mir doch bitte erstmal bei meinem aktuellen Problem.
Es geht hier nicht um schön machen, sondern um validen Code - wenn der voller Fehler ist, wie bitte soll dann funktionieren, was du erreichen willst?
Wär ich nicht so faul gewesen und hätt ich den Code genauer angeschaut hättst das von mir auch zu hören gekriegt.@ShiNtoKu: Bei der Positionsangabe kann man doch keine Relativen Größen angeben oder seh ich das falsch? ( top, left usw )
Du siehst das definitiv falsch. Wenn dem so wäre, wäre absolute Positionierung (in den meisten Fällen) absolut unbrauchbar.
Gibt es keine möglichkeit, dass sich das div der Infobox am Body, am maindiv oder am topdiv orientiert?
Doch, ein absolut positioniertes Element richtet sich nach dem nächsten Elternelement das nicht static ist. Da dies aber bereits auf maindiv zutrifft richtet es sich eben nach dem aus.
Ist meine Vorstellung garnicht mit Divs realisierbar?
Es ist zwar realisierbar, aber semantischer Unfug.
<leier type="alt">
HTML ist eine Sprache zur Strukturierung von Inhalt
und sollte demnach diesen auch _strukturieren_.
Div-Suppe hingegen liefert gar keine Struktur
</leier>Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
-
-
-
-
-
Hi,
div#maindiv
{
position:relative;
display:block;
align:center;es gibt in CSS keine align-Eigenschaft.
margin:5% 10%;
width:100%;
height:90%;
border-width:2px;das Ding soll 20% + 4Pixel breiter sein als Platz vorhanden ist?
das Ding soll 4 Pixel höher sein als Platz vorhanden ist?div#bannerdiv
{
align:center;s.o.
div#topdiv
{
align:center;gibt's immer noch nicht ...
display:block;
background-color:AA7777;sinnlose Farbangabe
div#menudiv a
{
float:top;
display:inline-table;display ist sinnlos, da float nicht auf none steht.
}
div#menudiv a:hover
{
top:100px;top ohne position ist sinnlos.
width:10%;
display:inline-table;s.o.
Quelltext der HTML Seite:
<html>doctype fehlt.
<div id="maindiv" align="center">
<div id="bannerdiv"><img src="banner.jpg" width="565" height="147"></div>alt Attribut fehlt.
<br>
<br>Für Abstände gibt es margin
Erstmal korrekten Code bauen, dann kann man weitersehen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.