dieselross: Logischer Fehler in der Verschachtelung?

SELF-Forum

Logischer Fehler in der Verschachtelung?

dieselross
– Informationen zu den Bewertungsregeln

Moin!

Ich habe eine Seite mit validem html (getestet).
Leider will meine Contentarea nicht mit meinem Text mitwachsen.
Kann mir jemand einen Schubs geben, wo mein Denkfehler liegt?

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  
<html lang="de">  
  
	<head>  
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">  
		<title>Home</title>  
		<link href="css/re-ality_main.css" rel="stylesheet" type="text/css" media="screen">  
		<!--[if IE]>  
		    <style type="text/css">@import url(css/re-ality_ie.css);</style>  
		  <![endif]-->  
	</head>  
  
	<body bgcolor="#ffffff">  
		<div id="maincontainer">  
			<div id="mainheader">  
				<ul id="mainnav">  
					<li id="homeSpace">  
						<a id="homeCurrent">  
						<span class="invisible">Home</span></a>  
					</li>  
					<li id="galerieSpace">  
						<a id="galerie" href="galerie.html">  
						<span class="invisible">Galerie</span></a>  
					</li>  
					<li id="forumSpace">  
						<a id="forum" href="forum.html">  
						<span class="invisible">Forum</span></a>  
					</li>  
					<li id="linksSpace">  
						<a id="links" href="links.html">  
						<span class="invisible">Links</span></a>  
					</li>  
					<li id="kontaktSpace">  
						<a id="kontakt" href="kontakt.html">  
						<span class="invisible">Kontakt</span></a>  
					</li>  
					<li id="portfolioSpace">  
						<a id="portfolio" href="portfolio.html">  
						<span class="invisible">Portfolio</span></a>  
					</li>  
				</ul>  
			</div>  
			<div id="contentarea">  
				<h1>Headline</h1>  
				<div id="contentleft">  
						<span id="picleft"><img src="media/Info-Button.jpg" alt="Testbild"></span>  
						<p>Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.  
						Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.</p>  
						<p>Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.  
						Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.</p>  
						  
				</div>  
				<div id="contentright">  
						<p>Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.  
						Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.</p>  
						<span id="picright">  
						<img src="media/testbild.jpg" alt="Testbild">  
						<small>Bildzuschrift mehrzeilig oder so</small>  
						</span>  
						<p>Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.  
						Dies ist ein Testtext, auch Blindtext genannt.  
						Wobei die Bezeichnung Blindtext hier nichts mit der  
						Sehfähigkeit des Textes zu tun hat. Dies ist ein Testtext,  
						auch Blindtext genannt. Wobei die Bezeichnung Blindtext  
						hier nichts mit der Sehfähigkeit des Textes zu tun hat.</p>  
				</div>  
			</div>  
			<div id="mainfooter">  
			</div>  
		</div>  
	</body>  
</html>

Gruß
dieselross

--
- life's for learning -
Ceterum censeo IE esse delendam
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Logischer Fehler in der Verschachtelung?

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich habe eine Seite mit validem html (getestet).
    Leider will meine Contentarea nicht mit meinem Text mitwachsen.
    Kann mir jemand einen Schubs geben, wo mein Denkfehler liegt?

    Dein Denkfehler besteht darin, daß Du glaubst, wir könnten erraten, was in Deinen CSS-Ressourcen steht.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Logischer Fehler in der Verschachtelung?

      dieselross
      – Informationen zu den Bewertungsregeln

      Ihr habt ja völlig Recht.
      Hier das css:

        
body {  
	font-family: Arial, Verdana, sans-serif;  
	color: #555555;  
	font-size: 101.5%;  
	text-align: center;  
	margin: 0;  
	padding: 0;  
}  
p {  
	text-align: left;  
	font-weight: 700;  
	font-size: 0.8em;  
	font-stretch: condensed;  
}  
h1{  
	text-align: left;  
	font-size: 1.2em;  
	font-weight: 900;  
	font-stretch: narrower;  
}  
#maincontainer {  
	background-image: url("../media/main.jpg");  
	background-repeat: repeat-y;  
	display: block;  
	margin-left: auto;  
	margin-right: auto;  
	clear: both;  
	width: 720px;  
}  
#mainheader {  
	text-align: center;  
	display: block;  
	width: 720px;  
	height: 120px;  
	position: relative;  
	background-image: url("../media/header.jpg");  
	background-repeat: no-repeat;  
}  
  
#mainfooter {  
	background-image: url("../media/footer.jpg");  
	background-repeat: no-repeat;  
	display: block;  
	position: relative;  
	width: 720px;  
	height: 60px;  
}  
#mainnav {  
	text-align: left;  
	display: block;  
	width: 620px;  
	height: 40px;  
	background-image: url("../media/nav.jpg");  
	background-repeat: no-repeat;  
	position:relative;  
	margin-left: 50px;  
	margin-right: 50px;  
	top: 80px;  
	left: -20px;  
}  
  
#contentarea {  
	display: block;  
	position:relative;  
	width: 660px;  
	min-height: 120px;  
	margin-left: 30px;  
	margin-right: 30px;  
	background-image: url("../media/content.jpg");  
	background-repeat:no-repeat;  
	padding-top: 20px;  
}  
#contentarea h1 {  
	margin-left: 30px;  
	margin-right: 30px;  
	margin-bottom: 10px;  
}  
#contentleft {  
	display: block;  
	width: 290px;  
	margin-left: 15px;  
	min-height: 200px;  
	float: left;  
	position: relative;  
	left: 18px;  
}  
#contentright {  
	display: block;  
	width: 290px;  
	margin-right: 15px;  
	float: right;  
	position: relative;  
	right: 18px;  
}  
#picleft {  
	display: block;  
	width: 100px;  
	min-height: 100px;  
	text-align: left;  
	margin-right: 10px;  
	margin-top: 3px;  
	float: left;  
	clear: both;  
}  
#picright {  
	display: block;  
	width: 100px;  
	min-height: 100px;  
	text-align: left;  
	margin-left: 10px;  
	margin-top: 3px;  
	float: right;  
	clear: both;  
}  
small {  
	font-size: 0.6em;  
	font-style: italic;  
	margin-top: 5px;  
}  
.invisible {  
	display: none;  
}  
  
/* @group Nav-Elemente */  
  
#homeSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	left: 30px;  
}  
#homeCurrent {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/homeActive.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#home:link {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/home3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#home:visited {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/home3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#home:hover {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/home3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#home:active{  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/home3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#galerieSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	left: 130px;  
}  
#galerieCurrent {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/galerieActive.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#galerie:link {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/galerie3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#galerie:visited {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/galerie3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#galerie:hover {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/galerie3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#galerie:active{  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/galerie3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#forumSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	left: 230px;  
}  
#forumCurrent {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/forumActive.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#forum:link {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/forum3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#forum:visited {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/forum3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#forum:hover {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/forum3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#forum:active{  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/forum3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#linksSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	left: 330px;  
}  
#linksCurrent {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/linksActive.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#links:link {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/links3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#links:visited {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/links3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#links:hover {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/links3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#links:active{  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/links3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#kontaktSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	left: 430px;  
}  
#kontaktCurrent {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/kontaktActive.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#kontakt:link {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/kontakt3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#kontakt:visited {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/kontakt3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#kontakt:hover {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/kontakt3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#kontakt:active{  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/kontakt3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#portfolioSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	left: 530px;  
}  
#portfolioCurrent {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/portfolioActive.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#portfolio:link {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/portfolio3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#portfolio:visited {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/portfolio3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#portfolio:hover {  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/portfolio3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#portfolio:active{  
	display: block;  
	width: 100px;  
	height: 40px;  
	background-image: url(../media/portfolio3state.jpg);  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
  
  
  
/* @end */

      Gruß
      dieselross

      --
      - life's for learning -
      Ceterum censeo IE esse delendam
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Logischer Fehler in der Verschachtelung?

    Wizard
    – Informationen zu den Bewertungsregeln

    Hi,
    da ich die Css jetzt nicht einsehen kann, denke ich mal das contentleft und contentright einen float haben. Hört sich so an als hättest du danach das float nicht http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=gecleart

    Gruß
    Wizard

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Logischer Fehler in der Verschachtelung?

      dieselross
      – Informationen zu den Bewertungsregeln

      Hi,
      da ich die Css jetzt nicht einsehen kann, denke ich mal das contentleft und contentright einen float haben. Hört sich so an als hättest du danach das float nicht http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=gecleart

      Gruß
      Wizard

      Ok, ich habe versucht, ein "clear" zu setzen (alle Möglichkeiten [left, right, both] bei allen offenen "floats", nacheinander, kombiniert etc...), dann rutscht mir aber die jeweils andere Spalte weg. Wie kann ich hier vorgehen?

      Gruß
      dieselross

      --
      - life's for learning -
      Ceterum censeo IE esse delendam
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Logischer Fehler in der Verschachtelung?

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        »» da ich die Css jetzt nicht einsehen kann, denke ich mal das contentleft und contentright einen float haben. Hört sich so an als hättest du danach das float nicht http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=gecleart

        Ok, ich habe versucht, ein "clear" zu setzen (alle Möglichkeiten [left, right, both] bei allen offenen "floats", nacheinander, kombiniert etc...), dann rutscht mir aber die jeweils andere Spalte weg. Wie kann ich hier vorgehen?

        Wo hast Du das clear gesetzt?
        Das darf natürlich nicht in einem der gefloateten Elemente sein.

        Es muß innerhalb des Containers, aber nach den gefloateten Elementen sein
        (das :after des letzten float-Elements wäre geeignet, aber das geht dem IE am :after vorbei, daher ist ein zusätzl. Element angesagt)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Logischer Fehler in der Verschachtelung?

          dieselross
          – Informationen zu den Bewertungsregeln

          Wo hast Du das clear gesetzt?
          Das darf natürlich nicht in einem der gefloateten Elemente sein.

          Es muß innerhalb des Containers, aber nach den gefloateten Elementen sein
          (das :after des letzten float-Elements wäre geeignet, aber das geht dem IE am :after vorbei, daher ist ein zusätzl. Element angesagt)

          Also ein neues <div>, das beispielsweise links gefloated und dann mit both gecleard wird? So in etwa?

          Gruß
          dieselross

          --
          - life's for learning -
          Ceterum censeo IE esse delendam
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Logischer Fehler in der Verschachtelung?

            MudGuard Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            »» Es muß innerhalb des Containers, aber nach den gefloateten Elementen sein
            »» (das :after des letzten float-Elements wäre geeignet, aber das geht dem IE am :after vorbei, daher ist ein zusätzl. Element angesagt)
            Also ein neues <div>, das beispielsweise links gefloated und dann mit both gecleard wird? So in etwa?

            float ist nicht unbedingt notwendig, clear:both dagegen schon.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Logischer Fehler in der Verschachtelung?

              dieselross
              – Informationen zu den Bewertungsregeln

              float ist nicht unbedingt notwendig, clear:both dagegen schon.

              That did the trick. Dankeschön!

              Gruß
              dieselross

              --
              - life's for learning -
              Ceterum censeo IE esse delendam
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln