DidgeFrank
Mitglied
Hey Leute,
ich komme nicht weiter. Ich will eigentlich nur ein Textfeld erzeugen,
dass unterhalb des Menüs erscheint und sich diesem und dem Inhaltsbereich
anpasst. Ich will da z.B. so was wie das Zitat des Tages unterbringen.
Jedoch schaffe ich es nicht, die Ausrichtung hinzubekommen. Mit float
gehts nicht, absolute Ausrichtung ist nicht geeignet und mehrere Container
erzeugen, bewirkt irgendwie nichts.
Schaut doch mal ins CSS und gebt mir einen Rat.
Eine Beispiel .html Seite habe ich auch beigefügt.
ich komme nicht weiter. Ich will eigentlich nur ein Textfeld erzeugen,
dass unterhalb des Menüs erscheint und sich diesem und dem Inhaltsbereich
anpasst. Ich will da z.B. so was wie das Zitat des Tages unterbringen.
Jedoch schaffe ich es nicht, die Ausrichtung hinzubekommen. Mit float
gehts nicht, absolute Ausrichtung ist nicht geeignet und mehrere Container
erzeugen, bewirkt irgendwie nichts.
Schaut doch mal ins CSS und gebt mir einen Rat.
Eine Beispiel .html Seite habe ich auch beigefügt.
PHP:
body {
background-color: #afe4f4;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
font-family: "Arial", sans-serif;
color: #F3F3F3;
font-size: medium;
}
#container {
max-width: 960px;
margin: 0 auto 0 auto;
}
a {
color: inherit;
font: inherit;
text-decoration: none;
}
#inhalt a {
color: inherit;
font: inherit;
text-decoration: underline;
}
a:link {
color: inherit;
font: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
font: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
font: inherit;
text-decoration: none;
}
a:active {
color: inherit;
font: inherit;
text-decoration: none;
}
h1 {
margin: 0px;
padding: 0px;
}
#kopfleiste {
background-color: #366BF4;
width: inherit;
height: 80px;
margin-bottom: 15px;
padding-left: 20px;
font-size: 1.2em;
line-height: 80px;
box-shadow: 2px 3px 3px 0px #515151;
-webkit-box-shadow: 2px 3px 3px 0px #515151;
}
#kopfleiste h1 {
<!--[if IE]
display: block;
filter: dropshadow(color=#585858,offX=2,offY=3);
<![endif]-->
}
#menu {
width: auto;
height: auto;
float: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-right: 15px;
font-size: 1.0em;
box-shadow: 2px 3px 3px 0px #515151;
-webkit-box-shadow: 2px 3px 3px 0px #515151;
color: #444444;
background-color: #FAF9F8;
}
#menu ul {
list-style-type: none;
padding:0;
}
#menu li {
margin-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
<!--[if IE]
display: block;
filter: dropshadow(color=#585858,offX=1,offY=2);
<![endif]-->
}
#menu li.current {
color: #F3F3F3;
background-color: #366BF4;
}
#inhalt {
background-color: #FAF9F8;
width: auto;
height: auto;
overflow: auto;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
font-size: 100%;
line-height: 1.3;
color: #444444;
box-shadow: 2px 3px 3px 0px #515151;
-webkit-box-shadow: 2px 3px 3px 0px #515151;
}
table
{
border-collapse:collapse;
}
td
{
padding:15px;
}
tr.wechsel
{
background-color: #EEEEEE;
}
tr.zweitezeile{
background-color: #F2F1F0;
}
form.kontaktformular fieldset {
margin-top: 25px;
padding: 10 10 10px;
width: 500px;
//border: none;
}
form.kontaktformular legend {
padding: 0 10px;
font-weight: bold;
}
form.kontaktformular label {
float: left;
width: 130px;
}
.bold {
font-weight: bold;
}
form.kontaktformular input, textarea {
width: 220px;
margin-bottom: 5px;
}
form.kontaktformular textarea {
width: 350px;
height: 150px;
}
#submitbutton {
margin-left: 0px;
margin-top: 25px;
width: 100px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width">
<title>blablaba</title>
<link rel="stylesheet" type="text/css" media="all" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width:630px),
screen and (max-device-width: 630px)" href="mobile.css"/>
</head>
<body>
<div id="container">
<div id="kopfleiste">
<h1>blablabla</h1>
</div>
<img src="blablubb.jpg" alt="bla" width="960" height="330">
<div id="menu">
<ul>
<li class="current">ÜBER MICH</li>
<li><a href="test1.html">test</a></li>
<li><a href="test2.html">test2</a></li>
<li><a href="test3.html">test3</a></li>
<li><a href="impressum.html">IMPRESSUM</a></li>
</ul>
</div>
<div id="hier!">
<p>
Wieso werde ich nicht unter dem Menü angezeigt???
</p>
</div>
<div id="inhalt">
<h2>ÜBER MICH</h2>
<p>
blabla
</p>
<p>
blabla
</p>
<h2>noch ne Überschrift</h2>
<p>
blablablubb
</p>
<p>
blabla
</p>
<p>
so ist das
</p>
<p><a href="kontakt.html">Schickt mir eine E-mail</a> oder <a href="kontakt.html">schreibt mir eine Nachricht</a>.</p>
</div>
</div> <!-- schliesst Container div -->
</body>
</html>