nicht angemeldet
Elemente springen über Zeilen
0 0 0 0 danke cheatah
0 0 0 
Gunnar Bittersmann
0 0
Elemente springen über Zeilen
Da bin ich noch mals :)
Danke für eure hilfe bis anhin, leider steh ich schon wieder an!
Also bin soweit ganz gut vorwärt gekommen! jedoch hab ich nun das
Probleme, dass es die einzelnen div elemente (wenn ich das browserfenster auf volle breite mache) also wenn genügend plaz vorhanden ist einfach nach oben rutschen! z.B.
Hab <div>element = horizontales menu mit float: right;
Dann <div>element = Lauftext
und zum Schluss <div> element = downloadliste
Der lauftext sollte links sein und die downloadliste rechts!
wenn ich jetzt das browserfenster breit mache dann rutscht zuerst die downloadliste nach links oben neben das menu!
und wenn ichs vollbreit mache dann fügt sich auch noch der text daran!
Hier zwei bilder:
richtig!!!
http://www.deviantart.com/deviation/60499172/
Falsch!!!
http://www.deviantart.com/deviation/60499288/
Der Quelltext folgt!
Irgendwo muss ich das wohl besser strukturieren
Eigentlich möchte ich ein header der fix ist inkl. Logo und Dropdownmenu!
Dann zwei spalten und am schluss eine Fusszeile!
Lediglich der inhalt der beiden spalten wechselt von Seite zu Seite!
Das sollte doch auch ein anfänger hinkriegen xD
Cheeers phil
-
Voila der Quelltext:
<title>Test1</title>
<style type="text/css">
body { font: 78%/1.5 arial, helvetica, serif; background: white url(bgbaba.gif); text-align: center; padding: 0; margin: 2em; }
#container { width: auto; min-width: 898px; background: #3399ff; text-align: left; border: 2px solid #0066cc; margin: 0 auto; }
p { background: center no-repeat; margin: 1em 2em; }
p#smurf { background: transparent; text-align: center; font-weight: bold; color: #ffffff; }
#smurf strong { font-size: 2.0em; color: #ffffff; }
#nav, #nav ul { float: right; width: 72em; list-style: none; line-height: 1; background: #ffffff; font-weight: bold; padding: 0; border: solid #0066cc; border-width: 2px 0 2px 2px; margin: 0 0 1em 0;
}
#nav a { display: block; width: 10em; w\idth: 6em; color: #0066cc; text-decoration: none; padding: 0.25em 2em; }
#nav a:hover { color:#FFFFFF; }
#nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; }
#nav li { float: left; padding: 0; width: 10em; }
#nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: normal; border-width: 0.25em; margin: 0; }
#nav li li { padding-right: 1em; width: 13em }
#nav li ul a { width: 13em; w\idth: 9em; }
#nav li ul ul { margin: -1.75em 0 0 14em; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover { background: #0066cc; }
#content { clear: left; margin: 10em 20em 10em 5em; }
#content a { color: #ffffff; }
#content a:hover { text-decoration:none; }
ul#downl { font-size: 0.91em; float: right; width: 22em; margin: 0; padding: 0; border: 1px dashed silver; } ul#downl li { list-style: none; margin: 0; padding: 0.5em; } ul#downl a { display: block; padding: 0.2em; font-weight: bold; } ul#downl a:link { color: black; background-color: #eee; } ul#downl a:visited { color: #666; background-color: #eee; } ul#downl a:hover { color: black; background-color: white; } ul#downl a:active { color: white; background-color: gray; }
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="container" style="background-image:url(logo.gif); background-repeat:no-repeat; ">
<p id="smurf">Welcome to <strong> ipf-Q</strong></p>
<ul id="nav">
<li><a href="#">Percoidei</a> <ul> <li><a href="#" class="daddy">Remoras</a>
<ul> <li><a href="#" class="daddy">Echeneis</a> <ul> <li><a href="#">Sharksucker</a></li> <li><a href="#">Whitefin Sharksucker</a></li> </ul> </li>
<li><a href="#" class="daddy">Phtheirichthys</a> <ul> <li><a href="#">Slender Suckerfish</a></li> </ul> </li> <li><a href="#" class="daddy">Remora</a> <ul>
<li><a href="#">Whalesucker</a></li> <li><a href="#">Spearfish remora</a></li> <li><a href="#">Marlinsucker</a></li> <li><a href="#">Remora</a></li> <li><a href="#">Ceylonese remora</a></li> </ul>
</li> <li><a href="#" class="daddy">Remorina</a> <ul> <li><a href="#">White suckerfish</a></li> </ul> </li> <li><a href="#" class="daddy">Rhombochirus</a>
<ul> <li><a href="#">R. osteochir</a></li> </ul> </li> </ul> </li> <li><a href="#" class="daddy">Tilefishes</a> <ul>
<li><a href="#">Caulolatilus</a></li> <li><a href="#">Lopholatilus</a></li> <li><a href="#">Malacanthus</a></li> </ul> </li> <li><a href="#" class="daddy">Bluefishes</a> <ul>
<li><a href="#">Pomatomus</a></li> <li><a href="#">Scombrops</a></li> <li><a href="#">Sphyraenops</a></li> </ul> </li> <li><a href="#" class="daddy">Tigerfishes</a> <ul>
<li><a href="#">Amniataba</a></li> <li><a href="#">Bidyanus</a></li> <li><a href="#">Hannia</a></li> <li><a href="#">Hephaestus</a></li> <li><a href="#">Lagusia</a></li> <li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li> <li><a href="#">Pelates</a></li> <li><a href="#">Pelsartia</a></li> <li><a href="#">Pingalla</a></li> <li><a href="#">Rhyncopelates</a></li> <li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li> <li><a href="#">Terapon</a></li> </ul> </li>
</ul> </li>
<li><a href="#">Anabantoidei</a>
<ul> <li><a href="#" class="daddy">Climbing perches</a> <ul> <li><a href="#">Anabas</a></li> <li><a href="#">Ctenopoma</a></li> </ul> </li>
<li><a href="#" class="daddy">Labyrinthfishes</a> <ul> <li><a href="#">Belontia</a></li> <li><a href="#">Betta</a></li> <li><a href="#">Colisa</a></li> <li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li> <li><a href="#">Parosphromenus</a></li> <li><a href="#">Sphaerichthys</a></li> <li><a href="#">Trichogaster</a></li> <li><a href="#">Trichopsis</a></li> </ul>
</li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li>
</ul> </li>
<li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li>
<li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li>
</ul> </li> </ul>
<ul id="downl"> <li><a href="">Download 1</a></li> <li><a href="">Download 2</a></li> <li><a href="">Download 3</a></li> <li><a href="">Download 4</a></li> <li><a href="">Download 5</a></li> </ul>
<div id="content">
<p align= "justify">Dies ist nur ein beispiellink der geht nach <a href="http://www.google.ch">google</a>. und hier noch ein bissel Blindtext Idunt vulputpat, si bla facin ut doloreet, sim zzriureros euis nosto euis augiam, sis nullum nit, sequisis nosto er in vulputatin vel il ut vero digna consequis nos adiam alit nit in vullamc onsecte tat la facillan utat veraess issequis do diat, consent et ea accum ip ea consed enim velis adiatue dolorperos dolobore tet, se feugiam, quam iriliquatio euguer inim diamet aliquis cincips ummodolessim dipisciliqui eum ip et irilisc iduisci liquisi. </p>
</div>
</div>
</body>
-
Hi,
Da bin ich noch mals :)
Danke für eure hilfe bis anhin, leider steh ich schon wieder an!wenn Du Dich auf irgend etwas beziehst, solltest Du dies verlinken.
Hier zwei bilder:
Nein, dort zwei Bilder. Verlinkt wäre es weniger mühsam für potenzielle Helfer.
Der Quelltext folgt!
Ein Link auf die betreffende Seite hätte ohne Weiteres erfolgen können. So kann ich nur mutmaßen, dass ein clear fehlt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Wie jetzt verlinken? die seite ist noch nicht on!!!
sry bin neu hier!
Meinst du ich soll meine seite ins web stellen obwohl die noch nicht fertig ist?
thx
-
hi,
Meinst du ich soll meine seite ins web stellen obwohl die noch nicht fertig ist?
Erscheint es dir nicht offensichtlich, dass dies für alle, die dein Problem nachvollziehen wollen, sehr viel komfortabler wäre, als wenn jeder einzelnen per Copy&Paste aus deinem Posting erst mal selbst einen Testfall erstellen müsste?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
doch klar tut mir leid, weis jetzt wie ich bilder einlinken kann!
dank cheeeta tnx :)
-
-
-
Ja man cheatah, du hattest recht! cool danke :D
Ich hätte wieder Stundenlang lesen müssen *GG*
Kann ich das einfach so als einzelnes Element an der richtigen position einfügen?
Hab ich das richtig gemacht?....
</ul>
<p style="clear:right">
<ul id="downl">
<li><a href="">Download 1</a></li>
<li><a href="">Download 2</a></li>
<li><a href="">Download 3</a></li>
<li><a href="">Download 4</a></li>
<li><a href="">Download 5</a></li>
</ul><div id="content">
<p align= "justify">Dies ist nur ein beispiellink der geht nach <a href="http://www.google.ch">google</a>. und hier noch ein bissel Blindtext Idunt vulputpat, si bla facin ut doloreet, sim zzriureros euis nosto euis augiam, sis nullum nit, sequisis nosto er in vulputatin vel il ut vero digna consequis nos adiam alit nit in vullamc onsecte tat la facillan utat veraess issequis do diat, consent et ea accum ip ea consed enim velis adiatue dolorperos dolobore tet, se feugiam, quam iriliquatio euguer inim diamet aliquis cincips ummodolessim dipisciliqui eum ip et irilisc iduisci liquisi.
</p></div>
</div>
</body>
-
Hi,
Hab ich das richtig gemacht?
<p style="clear:right">nein. Hier ist definitiv kein Textabsatz vorhanden, also lässt sich ein <p>-Element durch nichts rechtfertigen. Genauer gesagt lässt sich *kein* Element rechtfertigen, dessen Notwendigkeit Du nicht schon vorher, unabhängig von irgend einer eventuell gewünschten Darstellung gesehen hättest.
<ul id="downl">
Ei, gugge mal doo, ein passendes Element.
<p align= "justify">
Auch dieses Attribut hat im HTML-Code nichts verloren. Es betrifft die Darstellung.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
hmm cheatah
<p style="clear:right">
nein. Hier ist definitiv kein Textabsatz vorhanden, also lässt sich ein <p>-Element durch nichts rechtfertigen. Genauer gesagt lässt sich *kein* Element rechtfertigen, dessen Notwendigkeit Du nicht schon vorher, unabhängig von irgend einer eventuell gewünschten Darstellung gesehen hättest.Aber es klappt trotzdem!!
wie jetzt? das ganze webcoding macht mich noch ganz durcheinander :( ich kann nicht mal mehr 1 und o addieren.<ul id="downl">
Ei, gugge mal doo, ein passendes Element.hab ich gut gemacht nicht wahr :D (bei SELFHTML geklaut ;)
<p align= "justify">
Auch dieses Attribut hat im HTML-Code nichts verloren. Es betrifft die Darstellung.ja dessen bin ich mir bewusst, war ne Notlösung!
werd ich ändern sobald ich weiss wo ich das im CSS einsetzten muss!!phil
-
Hello out there!
ich kann nicht mal mehr 1 und o addieren.
Error: type mismatch.
Das eine ist ein numerischer Wert, das andere nicht.
SCNR,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
na,
da siehst du wie durcheinander ich bin ;)
-
-
Hi,
Aber es klappt trotzdem!!
das war noch nie von Belang. Relevant sind:
a) es klappt _nicht_ (Ausschlusskriterium), und
b) es ist richtig.<ul id="downl">
Ei, gugge mal doo, ein passendes Element.
hab ich gut gemacht nicht wahr :D (bei SELFHTML geklaut ;)Ja. Vor allem hast Du da etwas, auf das Du die gewünschte Eigenschaft anwenden kannst. Gelle?
<p align= "justify">
Auch dieses Attribut hat im HTML-Code nichts verloren. Es betrifft die Darstellung.
ja dessen bin ich mir bewusst, war ne Notlösung!In dem Begriff "Notlösung" ist die erste Silbe englischsprachigen Ursprungs.
werd ich ändern sobald ich weiss wo ich das im CSS einsetzten muss!!
Auf welche Probleme bist Du dabei gestoßen?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
<ul id="downl">
ach so? dann muss ich clear noch mals genauer unter die lupe nehmen! ich dachte das ist für textelemente?
ist eine liste ein textelement? dann gehts ja vielleicht doch so wie ich mir das wünschte :)<p align= "justify">
hab ich jetzt bei den css spezifikationen!
in der html steht nur noch <p>blabliblu</p>
-
ach clear steht im zusammenhang mit float!
immer wenn ich ein element floate dann kann ichs auch clearen?
hab ich das richtig verstanden? floate ich right dann cleare ich auch right
und das selbe mit left, both geht immer!?-
hi,
ach clear steht im zusammenhang mit float!
immer wenn ich ein element floate dann kann ichs auch clearen?
Im allgemeinen cleart man ein nachfolgendes Element, um eben die Auswirkungen, die das Floating des/der Vorgänger auf dieses hätte, abzustellen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
Hello out there!
ach so? dann muss ich clear noch mals genauer unter die lupe nehmen! ich dachte das ist für textelemente?
Ach so? Dann musst du dir CSS nochmals genauer unter die Lupe nehmen!
Du kannst jede CSS-Eigenschaft für jedes Element* angeben. (Ob diese auch wirkt, efährst du in der CSS-Spec [CSS2] bei der Beschreibung der jeweiligen Eigenschaft unter „Angewendet auf:“.)
hab ich jetzt bei den css spezifikationen!
Du meinst: bei den CSS-Regeln. [CSS2 §4.1.7]
Die CSS-Spezifikationen macht das W3C, nicht du.
in der html steht nur noch <p>blabliblu</p>
So is’ gut.
See ya up the road,
Gunnar* eigentlich: für jeden Selektor
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
-
-
-