XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Richtig zusammenstellen (http://xhtmlforum.de/showthread.php?t=68055)

greatjack 01.09.2012 16:44

Richtig zusammenstellen
 
Ich habe 2 HTm.Dateien und 2 Css-Dateinen, die zu 1 HTM.Datei und 1 Css-Datei werden sollen.
Wenn ich die Inhalte beider Dateien zusammentue (die 2 <div>), dann ist alles verzerrt. Bei der Menueleiste (der, die oben sein soll) ist alles zusammengequetscht.


HTML-Teil-1:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Teil1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="style1.css" type="text/css" rel="stylesheet">
<link href="pictures.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<div id="Menueleiste">
<ul>
<li>Home</li>
<li>News</li>
<li>Kontakt</li>
<li>HTML</li>
<li>Css</li>
<li>Weitere Infos</li>
<li>XXX-Bereich</li>
</ul>
</div>
</body>
</html>

HTML-Teil-2:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Teil2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="pictures.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<div id="Linkliste">
<ul>
<li><a href="HTML-lernen.htm">HTML</a>
<ul>
<li>
<ul>
<li><a href="aaa.htm">TextAAA</a></li>
<li><a href="bbb.htm">TextBBB</a></li>
<li><a href="ccc.htm">TextCCC</a>
<ul>
<li><a href="ccc-1.htm">TextCCC-1</a></li>
<li><a href="ccc-2.htm">TextCCC-2</a></li>
<li><a href="ccc-3.htm">TextCCC-3</a></li>
</ul>
</li>
<li><a href="xxx.htm">TextXXX</a></li>
<li><a href="yyy.htm">TextYYY</a></li>
<li><a href="zzz.htm">TextZZZ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Css-Datei1:

Code:


body {
background-color : #bfbfbf;
}
#Menueleiste {
border-color : gray;
border-width : 0.5em;
border-style : groove;
width : 850px;
background-color : #dcdcdc;
padding : 0;
}
#Menueleiste ul {
background-color : #dcdcdc;
}
#Menueleiste li {
background-color : #c2c2c2;
display : inline;
margin : 0.2em;
border-color : black;
border-width : 0.1em;
border-style : groove;
list-style-type : none;
font-size : 150%;
}

Css-Datei-2:

Code:


* {
margin : 0;
padding : 0;
}
#Linkliste {
width : 15em;
padding : 0;
background-color : #dbdbdb;
border : black solid 0.05em;
border-style : groove;
margin-left : 10px;
float : left;
}
#Linkliste a {
display : block;
color : black;
text-decoration : none;
}
#Linkliste a:hover {
color : #f00000;
text-decoration : none;
background-color : #cfcfdb;
}
#Linkliste a:active {
color : #000080;
text-decoration : none;
}
#Linkliste a:visited {
color : #000080;
}
#Linkliste ul {
font-size : 1em;
font-weight : bold;
}
#Linkliste ul li {
list-style-type : none;
font-size : 3em;
padding-left : 1em;
padding-top : 0.3em;
}
#Linkliste ul li li {
padding-left : 4em;
font-size : 0.7em;
list-style-type : none;
padding-top : 0.125em;
padding-left : 0.25em;
padding-bottom : 0.5em;
}
#Linkliste ul li li li {
padding-top : 0.25em;
padding-left : 0.333em;
padding-bottom : 0.333em;
list-style-type : decimal;
}
#Linkliste ul li li li li {
padding-left : 3em;
font-size : 0.65em;
list-style-type : lower-latin;
padding-top : 0.25em;
padding-left : 1em;
padding-bottom : 0.5em;
font-weight : normal;
text-decoration : none;
}


gato 01.09.2012 19:08

Die Angabe
Code:

* {margin: 0; padding: 0;}
überschreibt die Standardwerte für ul und li. Du hast für #Menueleiste ul beides, für #Menueleiste li padding nicht festgelegt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019