hallo leute
ich brauche schnell antworten. ich sitze zur zeit bei der arbeit und muss fuer die firma eine neue webseite programieren. probleme hab ich mit dem dropdown menu was ich mit integrieren moechte. sobal ich die css informationen integriere zieht sich die webseite zusammen. ich will aber das die webseite immer vertikal komplett sichtbar ist und das das untere ende der webseite unten am rand klebt. wie gesagt das klappt auch soweit bis zu dem moment wo ich die css informationen in den <head> bereich integriere.
ich stell das grundgeruesst der seite mal hier rein und schaaut einfach mal selber.
das sieht jetzt ein bichen unuebersichtlich aus ist aber ueberwiegend das dropdown menu.
integriert folgende informationen in eine notepad datei und speichert sie als htm/html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0046)Horizontal Drop Down Menus -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down
Menus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<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+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></SCRIPT>
<STYLE type=text/css>BODY {
FONT: 11px verdana
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL LI {
FLOAT: left; WIDTH: 149px; POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: auto
}
LI UL UL {
DISPLAY: none; LEFT: 100%; POSITION: absolute; TOP: -0.1em
}
UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none
}
* HTML UL LI A {
HEIGHT: 1%
}
LI:hover A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI.over A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover LI:hover A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI.over LI.over A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover LI:hover A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover LI:hover LI:hover A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI.over LI.over LI.over A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI.over LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI:hover LI:hover LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI.over LI.over LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI:hover LI:hover LI:hover LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI.over LI.over LI.over LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
UL LI:hover UL UL {
DISPLAY: none
}
UL LI:hover UL UL UL {
DISPLAY: none
}
UL LI.over UL UL {
DISPLAY: none
}
UL LI.over UL UL UL {
DISPLAY: none
}
UL LI:hover UL {
DISPLAY: block
}
UL LI LI:hover UL {
DISPLAY: block
}
UL LI LI LI:hover UL {
DISPLAY: block
}
UL LI.over UL {
DISPLAY: block
}
UL LI LI.over UL {
DISPLAY: block
}
UL LI LI LI.over UL {
DISPLAY: block
}
</STYLE>
<META content="MSHTML 6.00.6000.16735" name=GENERATOR></HEAD>
<body>
<div align="center">
<table border="1" width="876" height="100%">
<tr>
<td height="87" width="866" colspan="2"> </td>
</tr>
<tr>
<td height="31" width="129"> </td>
<td height="31" width="731"><UL id=nav>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Home</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">About</A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">History</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Team</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Offices</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Services</A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Web Design</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Internet
Marketing</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">testing ></A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 1</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 2</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 3</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">testing ></A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 1</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 2</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 3</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 4</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 5</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 4</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 5</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Hosting</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Domain Names</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Broadband</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Contact Us</A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">United Kingdom</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">France</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">USA</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Australia</A>
</LI></UL></LI></UL></td>
</tr>
<tr>
<td height="100%" width="866" colspan="2">
<iframe scrolling=no width=100% height=100% name=1 id=1 frameborder=1 src="1.htm"></iframe></td>
</tr>
<tr>
<td height="61" width="866" colspan="2"> </td>
</tr>
<tr>
<td height="14" width="866" colspan="2"></td>
</tr>
</table>
</div>
</body>
</html>
.
EDIT (autom. Beitragszusammenführung) :
Xarxes schrieb nach 6 Stunden, 44 Minuten und 22 Sekunden:
haha
ich hab das problem gefunden. es lag die ganze zeit ma doctype. tja aber leider hab ich jetzt ein anderes roblem. wie kann ich denn jetzt die schriftgroesse variiren. weil das doctype jetzt weg ist kann mann nicht mehr einfluss auf die groesse der schrift nehmen.
bitte helft mir und schreibt mir was ich jetzt tun kann
ich brauche schnell antworten. ich sitze zur zeit bei der arbeit und muss fuer die firma eine neue webseite programieren. probleme hab ich mit dem dropdown menu was ich mit integrieren moechte. sobal ich die css informationen integriere zieht sich die webseite zusammen. ich will aber das die webseite immer vertikal komplett sichtbar ist und das das untere ende der webseite unten am rand klebt. wie gesagt das klappt auch soweit bis zu dem moment wo ich die css informationen in den <head> bereich integriere.
ich stell das grundgeruesst der seite mal hier rein und schaaut einfach mal selber.
das sieht jetzt ein bichen unuebersichtlich aus ist aber ueberwiegend das dropdown menu.
integriert folgende informationen in eine notepad datei und speichert sie als htm/html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0046)Horizontal Drop Down Menus -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down
Menus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<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+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></SCRIPT>
<STYLE type=text/css>BODY {
FONT: 11px verdana
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL LI {
FLOAT: left; WIDTH: 149px; POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: auto
}
LI UL UL {
DISPLAY: none; LEFT: 100%; POSITION: absolute; TOP: -0.1em
}
UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none
}
* HTML UL LI A {
HEIGHT: 1%
}
LI:hover A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI.over A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover LI:hover A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI.over LI.over A {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover LI:hover A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI:hover LI:hover LI:hover A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI.over LI.over LI.over LI.over A:hover {
COLOR: #fff; BACKGROUND-COLOR: red
}
LI:hover LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI.over LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI:hover LI:hover LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI.over LI.over LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI:hover LI:hover LI:hover LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI.over LI.over LI.over LI A {
COLOR: #777; BACKGROUND-COLOR: #fff
}
LI UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
UL LI:hover UL UL {
DISPLAY: none
}
UL LI:hover UL UL UL {
DISPLAY: none
}
UL LI.over UL UL {
DISPLAY: none
}
UL LI.over UL UL UL {
DISPLAY: none
}
UL LI:hover UL {
DISPLAY: block
}
UL LI LI:hover UL {
DISPLAY: block
}
UL LI LI LI:hover UL {
DISPLAY: block
}
UL LI.over UL {
DISPLAY: block
}
UL LI LI.over UL {
DISPLAY: block
}
UL LI LI LI.over UL {
DISPLAY: block
}
</STYLE>
<META content="MSHTML 6.00.6000.16735" name=GENERATOR></HEAD>
<body>
<div align="center">
<table border="1" width="876" height="100%">
<tr>
<td height="87" width="866" colspan="2"> </td>
</tr>
<tr>
<td height="31" width="129"> </td>
<td height="31" width="731"><UL id=nav>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Home</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">About</A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">History</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Team</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Offices</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Services</A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Web Design</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Internet
Marketing</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">testing ></A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 1</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 2</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 3</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">testing ></A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 1</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 2</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 3</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 4</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 5</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 4</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">test 5</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Hosting</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Domain Names</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Broadband</A>
</LI></UL></LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Contact Us</A>
<UL>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">United Kingdom</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">France</A>
</LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">USA</A> </LI>
<LI><A href="http://www.pmob.co.uk/temp/drop-down-multi.htm#">Australia</A>
</LI></UL></LI></UL></td>
</tr>
<tr>
<td height="100%" width="866" colspan="2">
<iframe scrolling=no width=100% height=100% name=1 id=1 frameborder=1 src="1.htm"></iframe></td>
</tr>
<tr>
<td height="61" width="866" colspan="2"> </td>
</tr>
<tr>
<td height="14" width="866" colspan="2"></td>
</tr>
</table>
</div>
</body>
</html>
.
EDIT (autom. Beitragszusammenführung) :
Xarxes schrieb nach 6 Stunden, 44 Minuten und 22 Sekunden:
haha
ich hab das problem gefunden. es lag die ganze zeit ma doctype. tja aber leider hab ich jetzt ein anderes roblem. wie kann ich denn jetzt die schriftgroesse variiren. weil das doctype jetzt weg ist kann mann nicht mehr einfluss auf die groesse der schrift nehmen.
bitte helft mir und schreibt mir was ich jetzt tun kann
Kommentar