 |
| Hinweise |
Willkommen im TP-Hilfe-Forum!Dies ist ein Forum zu den Themen Photoshop, Dreamweaver, Flash, Selbständigkeit und mehr, in dem Du Hilfe, Anleitung oder eine Lösung zu Deinen Problemen erhältst. Aktuell bist Du in unseren Foren als Gast mit reinen Leserechten unterwegs. Wenn Du Dich registrierst, kannst Du eigene Themen verfassen, Fragen stellen und privat mit anderen TPlern kommunizieren. Weitere Foren werden zugänglich, und Du wirst – falls gewünscht – per Mail über neue Beiträge informiert. Die Registrierung ist schnell und kostenlos. Sollten bei der Registrierung Fragen auftauchen, reicht ein Klick in unsere Hilfe - Häufig gestellte Fragen oder eine kurze Mitteilung an das Support-Team. Viel Spaß bei Traum-Projekt.com |
20.12.2007, 12:23
|
#1
|
|
TP-Member
Registriert seit: Sep 2007
|
container soll mitwachsen...
ich peile es einfach nicht....
ich habe nun mal den container "block7" etwas text eingefügt. der container mit dem text (hier block7) ist nun also der längste container im projekt. das ganze soll nun nicht über dem footer liegen, sondern den footer weiter nach unten verschieben (mitwachsen, richtig?). ich habe gecleart und denke auch richtig, aber es funktioniert nicht. kann sich das mal jemand ansehen. ich bin echt am ende... ich peil`s einfach nicht... so langsam wünsche ich mir meine verschachtelten tabellen zurück...
hier meine css datei und die html datei...
Code:
/*=====================================
Allgemeine Angaben
=====================================*/
* {
margin: 0;
padding: 0;
}
html * {
font-size: 100.01%;
}
body {
font-size: 75.00%;
font-family: Arial;
color: #5A4C2D;
background-color: #ffffff;
}
a {
color: #5A4C2D;
}
#page {
width: 980px;
margin: 0 auto;
}
#links {
width: 220px;
height: 500px;
background-color: red;
float: left;
}
#mitte {
width: 470px;
height: 500px;
background-color: yellow;
float: left;
}
#rechts {
width: 290px;
height: 500px;
background-color: green;
float: left;
}
/*=====================================
Angaben zum Header
=====================================*/
#header {
width: 980px;
height: 220px;
}
#block1 {
width: 220px;
height: 220px;
/*background-color: yellow;*/
float: left;
}
#block1 img {
position: relative;
top: 25px;
}
#block2 {
width: 470px;
height: 220px;
/*background-color: yellow;*/
float: left;
}
#block2 img {
position: relative;
top: 55px;
}
#block3 {
width: 290px;
height: 220px;
/*background-color: yellow;*/
background: url(../images/block3-bg.gif) no-repeat top left #ffffff;
float: left;
}
/*=====================================
linker Bereich
=====================================*/
#block4 {
width: 210px;
height: 50px;
background-color: #cecece;
padding: 5px;
}
.inp2 {
width: 150px;
border: 1px solid #ccc;
}
#block6 {
width: 220px;
height: 50px;
}
/*=====================================
Inhalt/ Mitte
=====================================*/
#block7 {
width: 450px;
height: 50px;
background-color: #fff;
padding: 10px;
}
/*=====================================
rechter Bereich
=====================================*/
#block5 {
padding: 5px;
width: 280px;
height: 90px;
background-color: #ffffff;
line-height: 19px;
}
.inp1 {
width: 170px;
border: 1px solid #ccc;
}
#block8 {
width: 290px;
height: 50px;
background-color: #333333;
}
#block12 {
width: 290px;
height: 50px;
background-color: #666666;
}
/*=====================================
Angaben zum Footer
=====================================*/
#footer {
background: url(../images/footer-bg.gif) no-repeat top left #ffffff;
float: left;
}
#block9 {
width: 220px;
height: 50px;
float: left;
}
#block10 {
width: 470px;
height: 50px;
float: left;
}
#block11 {
width: 290px;
height: 50px;
float: left;
}
/*=====================================
Clearing für Header, Main und Footer
=====================================*/
/*=====================================
Clearing - Einzelaufruf
=====================================*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test123</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">@import url(css/test123.css);</style>
<link rel="stylesheet" media="all" type="text/css" href="flyout.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="flyout_ie.css" />
<![endif]-->
</head>
<body>
<div id="page">
<div id="header">
<div id="block1">
<img src="images/block1.jpg" width="199" height="85" border="0" alt="">
</div>
<div id="block2">
<img src="images/block2.jpg" width="418" height="165" border="0" alt="">
</div>
<div id="block3">
</div>
</div>
<div id="main">
<div id="links">
<div id="block4">
<form action="front_content.php?idcat=86" method="post" name="formsearch">
<input type="text" name="searchterm" value="" class="inp2"> <input type="image" src="images/suche.gif">
</form>
</div>
<div id="block6">
<div class="menu">
<ul>
<li>
<a class="hide" href="#">Navigation 1</a>
<!--[if lte IE 6]>
<a href="#">Navigation 1
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">Navigation 1a</a></li>
<li><a href="#">Navigation 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="#">Navigation 3</a></li>
<li><a href="#">Navigation 4</a></li>
<li><a href="#">Navigation 5</a></li>
<li><a href="#">Navigation 6</a></li>
<li><a href="#">Navigation 7</a></li>
<li><a href="#">Navigation 8</a></li>
<li><a href="#">Navigation 9</a></li>
<li><a href="#">Navigation 10</a></li>
</ul>
</div>
</div>
</div>
<div id="mitte">
<div id="block7">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum suscipit porttitor nunc. Nullam scelerisque tempor sem. Integer sit amet velit ac sapien ultrices pulvinar. Aenean tincidunt, elit eget consequat consectetuer, metus mi faucibus ligula, quis aliquet orci leo id pede. Duis cursus blandit odio. Ut gravida fermentum pede. Proin fringilla nisi vel nisl. Sed elementum, tortor at consequat commodo, quam nisl vehicula augue, nec euismod velit nisi at sem. Proin pede augue, congue id, imperdiet vitae, tempus vitae, mi. Sed sed nisl. Donec vitae nulla vel diam semper viverra. Nulla sodales. Phasellus ac purus quis justo molestie dictum. Pellentesque dictum consequat neque.
<br><br>
Nam lacinia eleifend pede. Ut dolor. Donec aliquet. Nullam sit amet turpis. Praesent eros nisl, iaculis sed, pharetra eu, bibendum a, mi. Donec accumsan. Maecenas libero nisi, semper eu, fermentum quis, auctor sed, dui. Maecenas molestie, risus ut vulputate ornare, dui lorem ultrices elit, tincidunt commodo elit nibh condimentum elit. Aliquam erat volutpat. Etiam erat ante, bibendum sed, imperdiet non, elementum id, sapien. Vestibulum ante. Aenean augue eros, egestas sed, viverra vitae, euismod id, ligula. Aenean malesuada. Curabitur magna.
<br><br>
Aliquam vulputate nisl a dolor. Sed molestie augue in augue. Quisque non mauris. Donec sagittis fermentum turpis. Phasellus eget ipsum. Cras sodales porta dui. In viverra feugiat massa. Praesent porta odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In nec lorem. Nulla vitae metus. Vivamus tristique commodo turpis. Morbi vel nulla ut lorem tempus sagittis. Suspendisse ac risus. Nunc felis. Sed ornare, odio eu consectetuer adipiscing, lectus nisl luctus nisl, sit amet dictum leo erat sed odio.
<br><br>
Sed elementum enim non nisl. Aenean commodo, pede quis pulvinar facilisis, ligula elit tristique libero, a interdum dui augue eu nibh. Nulla ut sapien vitae tellus vestibulum convallis. Sed vitae diam sed massa scelerisque ornare. Curabitur faucibus odio nec quam. In cursus nulla nec nulla. Donec nisi pede, mattis a, aliquet eget, porttitor in, mi. Sed egestas risus eget ligula. Etiam bibendum posuere arcu. Curabitur turpis dolor, dignissim sed, sodales eu, congue in, leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed aliquet neque non est. Integer mauris erat, scelerisque eu, pellentesque vel, rutrum vel, elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse nec nisi. Nam gravida quam eu purus. Ut nunc risus, aliquam at, fermentum ut, egestas vel, neque. Etiam ultricies faucibus turpis.
<br><br>
Donec facilisis nulla quis lacus. Maecenas sem sem, sagittis nec, dapibus vitae, pretium sed, sapien. Maecenas tristique. Morbi erat urna, cursus quis, posuere sit amet, mattis porta, sapien. Pellentesque id urna a tortor volutpat euismod. Aenean tristique. Fusce magna. Nulla fringilla. Nullam sit amet neque. Etiam eu leo.
</div>
</div>
<div id="rechts">
<div id="block5">
<form action="front_content.php?idcatart=98" method="post" name="loginform">
Username:<br>
<input type="text" name="username" class="inp1"><br>
Passwort:<br>
<input type="password" name="password" class="inp1"><br>
<input type="image" src="images/login.gif">
</form>
</div>
<div id="block8">
</div>
<div id="block12">
</div>
</div>
<div class="clearfix"></div>
</div>
<div id="footer">
<div id="block9">
</div>
<div id="block10">
</div>
<div id="block11">
</div>
</div>
</div>
</body>
</html>
|
|
|
|
20.12.2007, 14:06
|
#2
|
|
TP-Member
Registriert seit: Jul 2007
Ort: München
|
Wieso gibst Du denn eine Höhe an, wenn er "mitwachsen" soll?
Streiche height:50px; und gut is.
|
|
|
|
|
20.12.2007, 23:50
|
#3
|
|
TP-Greis
Registriert seit: Mar 2001
Ort: Berlin, Germany
|
<div class="clearfix"></div> ... du hast das Prinzip von dieser Clear-Methode nicht verstanden. Es soll solchen unnützen HTML-Code ersparen!
Du musst die Klasse .clearfix dem Element zuweisen, das die gefloateten Elemente enthalten soll ("mitwachsen"), und nicht irgendeinen leeren. 
__________________
“My software never has bugs. It just develops random features ...” 
» DevShack - die Website des freien Webentwicklers Boris
|
|
|
|
|
21.12.2007, 00:07
|
#4
|
|
TP-Member
Registriert seit: Sep 2007
|
und wie mache ich das? den code aus clearfix noch in #main kopieren oder wie binde ich das ohne leeren div ein? peile es gerade nicht... danke schon mal...
|
|
|
|
|
21.12.2007, 00:36
|
#5
|
|
TP-Greis
Registriert seit: Mar 2001
Ort: Berlin, Germany
|
Und ich peile dein HTML nicht so ganz. Hier ein Minibeispiel:
<div id="alles" class="clearfix">
<div id="links">Dieser wird links gefloatet</div>
<div id="rechts">Dieser ist rechts gefloatet</div>
</div>
Damit das äußere DIV mit der ID "alles" beide DIVs, die gefloatet sind, einbezieht, bzw halt mitwächst, musst man dem die Klasse .clearfix geben.
__________________
“My software never has bugs. It just develops random features ...”
» DevShack - die Website des freien Webentwicklers Boris
|
|
|
|
|
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
|
|
|
| Themen-Optionen |
Thema durchsuchen |
|
|
|
| Thema bewerten |
|
|
Forumregeln
|
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
HTML-Code ist aus.
|
|
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 06:22 Uhr.
|
|
