Text rutscht

danjo · 21. Juli 2006

Noch eine Frage:

Warum rutscht auch hier der Text im Mozilla runter???

http://www.sb-installationen.de/profil.html

Muss das clear both bei den bildern evtl. weg???

Script:

Code:

*{
 margin:0;
 padding:0;
}

body{
 background:#eee;
 font:.8em "trebuchet ms", arial, sans-serif;
 text-align:center;
}


/* Formatierungen Layout (grob) */
#seite{
 background:#000 url(hintergrund.jpg) repeat-y;
 margin:0 auto;
 padding:10px 10px 5px 13px;
 text-align:left;
 width:715px
}

#oben{
 background:#fff url(header_layer.jpg);
 clear:both;
 height:168px;
 width:713px;
}

#margit{
 background:#fff url(margit.jpg);
 padding:10px 10px 5px 13px;
 margin:130px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 
 }
 #daniel{
 background:#fff url(daniel.jpg);
 padding:10px 10px 5px 13px;
 margin:145px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;



 }
 #book{
 background:#fff url(book.swf);
  margin:80px 25px 20px 20px;
  float:middle;
 clear:both;
 height:600px;
 width:700px;



}
#links{
 float:left;
 margin:0 0 20px 0;
 width:458px;



}
 
 #flash1{
 background:#fff url(flash1.swf);
 /* oben/ rechts/-----/----/ */
 margin:50px 1px 0px 0px;
 float:right;
 height:227px;
 width:227px;



  }
 #teppich{
 background:#fff url(goto_roter_teppich.jpg);
 /* oben/ rechts/-----/----/ */
 margin:70px 1px 0px 0px;
 clear:both;
 float:right;
 height:151px;
 width:227px;
 }
 


#rechts{
 float:left;
 margin:0 0 20px 20px;
 width:235px
}

#unten{
 background:#000000;
 clear:both;
 width:713px
}
.back {
	
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: scroll;
}

/* Formatierungen Navigationsleiste */
#navigation{
 background:#000000;
 float:left;
 width:500px;
 padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
 display:inline;
 margin:0 10px 0 0 
}

#navigation ul li a{   /* Balken - Navi */
 text-decoration:none;
 border-bottom:4px solid #000000;
 color:#ffffff;
 font-size:.9em; 
 font-weight:bold;
}

#navigation ul li a:hover{
 text-decoration:none;
 border-bottom:4px solid #ffffff
}



/* Sonstige Formatierungen */
.titel{
 float:right;
 width:90px;
 padding:0 10px 0 0
}

.titel img{
 border:0
}



/* Schrift-Formatierungen */
h1,h2,h3,h4,h5,h6{
 border-bottom:1px solid #ccc;
 color:#ffffff;
 font-size:1.5em;
 letter-spacing:0.01em;
 margin:25px 0 0 0
}

#links p{
 text-align:justify
}

#unten p{
 color:#eee;
 font:.85em "trebuchet ms", verdana, sans-serif;
 padding:5px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul{
list-style:none;
 margin:0 0 0 0
}

#rechts ul li{
 background:url(liste.jpg) no-repeat;
 display:block;
  margin:0 0px 0 0;
 padding:0 0 0 16px
}

#rechts ul li a{
 text-decoration:none;
  color:#666;
}

#rechts ul li a:hover{
  color:#000;
}



/* Link-Formatierungen */
a:link,a:visited,a:active{
 color:#000;
 text-decoration:underline
}

a:hover{
 text-decoration:none
}


#unten a{
 color:#fff;
 text-decoration:underline
}

#unten a:hover{
 text-decoration:none
}

pit-r · 21. Juli 2006

Moin!

Würdest Du die Güte besitzen, Deine Rattenschwänze in Kästen zu klemmen?

Code:

Rattenschwanz

In einem Deiner anderen Threads hab ich das gemacht und Dich darum gebeten, das in Zukunft selbst zu erledigen.

Ahoi - Pit

danjo · 21. Juli 2006

Ok. Werde demnächst darauf achten!

pit-r · 21. Juli 2006

Sieht doch so auch viel besser aus.

planet4 · 21. Juli 2006

...wahrscheinlich ist es genau der gleiche Fehler wie in deinem anderen Thread,
hab jetzt noch nicht genau hingeschaut, hab aber beim ersten Hingucken gleich
etwas gesehen, was du neu erfunden hast:

float:middle

das gibt's nich

planet4.

danjo · 21. Juli 2006

Soll ich das ganz weg hauen?
> float middle

planet4 · 21. Juli 2006

... du kannst das natürlich auch stehen lassen und beantragen, dass das in CSS aufgenommen wird

planet4.

danjo · 21. Juli 2006

Schon gut ich machs wech

danjo · 21. Juli 2006

Habe den Code jetzt entsprechend geändert...scheine jedoch irgend etwas übersehen zu haben...

http://www.sb-installationen.de/profil.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Temporär, Hannover, profil, veröffentlichungen, sb, sb-installationen, layer, Margit Schild, Daniel Baum, Installationen, Lichtkunst, Lichtinstallationen, Beamer, Dialog, Events, Flash, Film, Siloplane, 175 Jahrfeier, Baum, Schild, Kunst, Temporäres, ">
<meta name="description" content="temporäre installationen im raum - lichtinstallationen für events">
<meta name="author" content="Baum Daniel">
<meta name="organization" content="sb-installationen">
<meta name="language" content="de">
<META NAME="Robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>.:: sb-installationen ::.</title>
<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
body,td,th {
	font-size: 0.8em;
}
body {
	background-color: #333333;
	background-image: url(bg.gif);
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #00CC33;
}
a:active {
	color: #FFFFFF;
}
.Stil5 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.2em;
}
-->

</style>
</head>
<body>
		
<div id="seite">

<!-- Beginn Navigationsleiste -->
<div id="navigation">
<ul>
<li><a href="index.html" target="_self">home</a></li>
<li><a href="fotos.html" target="_self">fotos</a></li>
<li><a href="aktuelles.html" target="_self">aktuelles</a></li>
<li><a href="profil.html" target="_self">profil</a></li>

<li><a href="kontakt.html" target="_self">kontakt</a></li>
<li><a href="links.html" target="_self">links</a></li>
<li><a href="impressum.html" target="_self">impressum</a></li>
</ul>
</div>
<div class="titel"></div>
<!-- Ende Navigationsleiste -->

<!-- Header -->
<div id="oben"></div>
<!-- Beginn Linke Spalte -->


[COLOR=Blue]
<div id="links">
<h3>profil</h3>
<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p class="Stil5"> Dr. Margit Schild </p>

<p class="Stil1">Freiberufliche Landschafts- und Freiraumplanerin<span 
class="texfett"><br />
    <br />
    <strong>Schwerpunkte:</strong><br />
</span>>> Forschung über und Konzeption/Durchführung von intentional befristeten Projekten. Im Mittelpunkt stehen dabei temporäre Installationen/Interven- tionen in der Landschafts- und Freiraumplanung als eine Möglichkeit des experimentellen Handelns in unbestimmten entwicklungsoffenen Situationen<br />

>> Entwurfslehre basierend auf Gruppenarbeit </p>
<p class="Stil1"> </p>
<h2 class="Stil1"> </h2>
<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p class="Stil5">Daniel Baum </p>
<p class="Stil1">Student  an der Fakultät für Architektur und Landschaft   <span 
class="texfett">der Universität Hannover<br />
      <br />

      <strong>Schwerpunkte:</strong><br />
  </span>>> Kreativer Entwurf, Corporate Identity, Werbefilme, Webdesign, Illustrationen, FlashAnimationen, Temporäre Installationen, </p>
<p class="Stil1"> </p>
<p class="Stil1">- ehem. Art Director des Lifestyle Magazins "Hannover People" </p>
<p class="Stil1"> </p>
<p class="Stil1"><a href="book.html" target="_self">> flip book! </a></p>

<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p class="Stil1"> </p>
<p> </p>
</div>
[/COLOR]



[COLOR=Red]
<!-- Bilder -->
<div id="margit"></div>
<div id="daniel"></div>[/COLOR]

<div id="unten">
<p align="center">.:: Alle Rechte auf Inhalt und Fotos liegen bei " sb-installationen " und unterliegen dem Copyright 2006 <span class="Stil1"><span class="meldungsmall">©</span></span> ::. </p>

</div>
</div>
</body>
</html>

danjo · 21. Juli 2006

Hier die CSS

Code:

*{
 margin:0;
 padding:0;
}

body{
 background:#eee;
 font:.8em "trebuchet ms", arial, sans-serif;
 text-align:center;
}


/* Formatierungen Layout (grob) */
#seite{
 background:#000 url(hintergrund.jpg) repeat-y;
 margin:0 auto;
 padding:10px 10px 5px 13px;
 text-align:left;
 width:715px
}

#oben{
 background:#fff url(header_layer.jpg);
 clear:both;
 height:168px;
 width:713px;
[COLOR=Red]}



#margit{
 background:#fff url(margit.jpg);
 padding:10px 10px 5px 13px;
 margin:130px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 [COLOR=Red]



 }[/COLOR]
 #daniel{
 background:#fff url(daniel.jpg);
 padding:10px 10px 5px 13px;
 margin:145px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 }[/COLOR]




 #book{
 background:#fff url(book.swf);
  margin:80px 25px 20px 20px;
  clear:both;
 height:600px;
 width:700px;




[COLOR=Blue]}
#links{
 float:left;
 margin:0 0 20px 0;
 width:458px;
}[/COLOR]




 
 #flash1{
 background:#fff url(flash1.swf);
 /* oben/ rechts/-----/----/ */
 margin:50px 1px 0px 0px;
 float:right;
 height:227px;
 width:227px;
  }
 #teppich{
 background:#fff url(goto_roter_teppich.jpg);
 /* oben/ rechts/-----/----/ */
 margin:70px 1px 0px 0px;
 clear:both;
 float:right;
 height:151px;
 width:227px;
 }
 


#rechts{
 float:left;
 margin:0 0 20px 20px;
 width:235px
}

#unten{
 background:#000000;
 clear:both;
 width:713px
}
.back {
	
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: scroll;
}

/* Formatierungen Navigationsleiste */
#navigation{
 background:#000000;
 float:left;
 width:500px;
 padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
 display:inline;
 margin:0 10px 0 0 
}

#navigation ul li a{   /* Balken - Navi */
 text-decoration:none;
 border-bottom:4px solid #000000;
 color:#ffffff;
 font-size:.9em; 
 font-weight:bold;
}

#navigation ul li a:hover{
 text-decoration:none;
 border-bottom:4px solid #ffffff
}



/* Sonstige Formatierungen */
.titel{
 float:right;
 width:90px;
 padding:0 10px 0 0
}

.titel img{
 border:0
}



/* Schrift-Formatierungen */
h1,h2,h3,h4,h5,h6{
 border-bottom:1px solid #ccc;
 color:#ffffff;
 font-size:1.5em;
 letter-spacing:0.01em;
 margin:25px 0 0 0
}

#links p{
 text-align:justify
}

#unten p{
 color:#eee;
 font:.85em "trebuchet ms", verdana, sans-serif;
 padding:5px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul{
list-style:none;
 margin:0 0 0 0
}

#rechts ul li{
 background:url(liste.jpg) no-repeat;
 display:block;
  margin:0 0px 0 0;
 padding:0 0 0 16px
}

#rechts ul li a{
 text-decoration:none;
  color:#666;
}

#rechts ul li a:hover{
  color:#000;
}



/* Link-Formatierungen */
a:link,a:visited,a:active{
 color:#000;
 text-decoration:underline
}

a:hover{
 text-decoration:none
}


#unten a{
 color:#fff;
 text-decoration:underline
}

#unten a:hover{
 text-decoration:none
}

planet4 · 21. Juli 2006

alles, was du tun musst ist:

das clear:both bei den beiden Containern "margit" und "daniel" weg

und wenn du mal Zeit übrig hast und das Thema dich wirklich interessiert:
hier gibt's ein wunderbares, kleines Buch über all das

planet4.

danjo · 22. Juli 2006

Danke!!! Werde es demnächst verbessern...!

Danke für den Buchtipp....werde ich mir zulegen...! video 2 brain half mir nicht besonders weiter....

Wollte CSS schon in die Tonne treten, weil ich an diesen Problemchen verzweifelte...

Aber nun bin ich wieder hoch motiviert

Text rutscht

danjo

New member

pit-r

Guest

danjo

New member

pit-r

Guest

planet4

New member

danjo

New member

planet4

New member

danjo

New member

danjo

New member

danjo

New member

planet4

New member

danjo

New member