Hallo zusammen,
ich bin mal wieder ein wenig am basteln und habe ein kleines problem für das es eine lösung zu finden gibt.
Das mittige Menu soll vom inhalt "umflossen" werden. Dabei soll der inhalt rechts UND links fließen.
Hier ist mal das was ich hingebastelt habe. Alles noch in der entstehung.
Eventuell gibt es dafür ja keine Lösung. Dann will ich es aber wenigstens besprochen haben : )
Hier das CSS
Code
/*Allg. Reset der Elemente*/
/*BEGIN*/
html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/*END*/
html {
font-family: Arial, Helvetica;
font-size: 1em;
line-height: 1em;
color: #555;
width: 100%;
min-width: 42em;
height: 100%;
}
body {
}
#menu {
border: 1px solid black;
position: relative;
width: 8em;
height: 8em;
text-align: center;
margin: 10em auto 0 auto;
z-index: 99;
}
ul {
list-style-type: none;
}
#menu ul {
margin: 1.5em 0;
}
#submenu-left {
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
background: #ccc;
min-width: 20em;
width: 49%;
height: 4em;
float: left;
margin: -4em 0 1em 0;
}
#submenu-right {
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
background: #ccc;
min-width: 20em;
width: 49%;
height: 4em;
float: right;
margin: -4em 0 1em 0;
}
#submenu-right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#submenu-left ul li, #submenu-right ul li {
display: inline-block;
}
#content {
background: #abc;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 12em;
padding: 0 0 2em 0;
overflow: auto;
z-index: 10;
}
#extension-left {
border: 3px dotted #ccc;
min-width: 20em;
width: 49%;
min-height: 1em;
max-height: 7em;
float: left;
overflow: auto;
}
#extension-right {
border: 3px dotted #ccc;
min-width: 20em;
width: 49%;
min-height: 1em;
max-height: 7em;
float: right;
overflow: auto;
}
#extension-right:after {
content: ".";
display: block;
line-height: 0;
height: 0;
clear: both;
visibility: hidden;
}Hier das HTML
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="layer3.css" type="text/css" media="screen"><!--für Browser-->
<title>Eine Übersicht an verschiedenen Styles.</title>
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.php?category=start" title="Die Startseite">Startseite</a></li>
<li><a href="index.php?category=css" title="Was ist CSS?">CSS</a></li>
<li><a href="index.php?category=page1" title="Eine Testseite">Page 1</a></li>
<li><a href="index.php?category=page2" title="Eine zweite Testseite">Page 2</a></li>
<li><a href="index.php?category=page3" title="Eine dritte Testseite">Page 3</a></li>
</ul>
</div>
<div id="submenu-left">
<ul>
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
</ul>
</div>
<div id="submenu-right">
<ul>
<li>Vier</li>
<li>Fünf</li>
<li>Sechs</li>
</ul>
</div>
<div id="content">
<p>Dies ist die Startseite der style-umgebung. Ich wünsche allen viel spass beim durchschaun.</p><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="extension-left">Extension - left</div>
<div id="extension-right">Extension - right</div>
</body>
</html>Mein eigener Ansatz war ein dummy-element einzufügen das floatet. Jedoch hatte ich bis jetzt damit leider nicht viel Erfolg : (