3 Spalten Layout: Schrift läuft in andere Boxen

nauen · #1 (**permalink**) 05.12.2011, 12:01

Hallo zusammen,

hier mein Problem:

ich möchte das die Boxen sich automatisch dem Text vertikal anpassen aber nicht horizontal.

Hier ist das Problem, dass von der Box Inhalt der Text in die rechts und Fuss reinläuft.

ich habe gefühlte 100 Seiten zum Thema floating und Layout gelesen und etwa 10 verschiedene Beispiele verwendet, verstehe aber offensichtlich die Thematik nicht so, dass ich es richtig umsetzen kann.

Eigentlich möchte ich das die Box mit dem Inhalt einfach zwischen links und rechts ist, aber soweit ich das verstanden habe, ist das nicht möglich, weil man dann ja eine feste Breite angeben müsste und die ja variabel sein soll.

Wäre super wenn ihr mir erklären könntet sie ich den Text im Inhalt in die Schranken weisen kann

hier mein code:

layout.css:

HTML-Code:

body {
   background-image: url(../csspics/test.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   font-family:Verdana,Arial,Helvetica,sans-serif;
   text-align: center;
   padding: 0px;
   margin: 0px;

}

#kopf {
  height:100px;
  margin:0px;
}

#mitte {
  float:left;
  width:100%;
  background:#0F85f9;
}



#inhalt {

  margin-left: 200px;
  margin-right: 200px;
  background:#aF85f9;}

#links {
  float:left;
  width:200px;
  margin-left:200px;
  margin: 0; padding: 0;
  background:#fF05f9;
}

#rechts {
  float:right;
  width:200px;
  margin: 0;
  padding: 0;
  background:#fF85f9;
}

#fuss {
  height:50px;
  margin:10px;
  background:#aF85c9;
}

index.php

HTML-Code:

...
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico" />
<link href="css/layout.css" type="text/css" rel="stylesheet" /> 
<link href="css/ground.css" type="text/css" rel="stylesheet" /> 
<meta charset="utf-8">
<script src="js/toggle.js"></script>
<script src="js/formmailer.js"></script>

<title>test</title> 
</head> 
<body>
    
<div id="kopf">
    <div style="float: left; width: 300px; height=: 100px">
            <a href="#" onClick="hide()"><img src="csspics/logo.gif" width="300" height="100"></a>
    </div>
    <div style="float: right;">
        <table border="0">
            <tr>
                <td class="mittig"><b><h2><a href="#" onClick="toggle('Kontakt')">Kontakt</a></h2></b></td>
            </tr>
        </table>
    </div>
</div>

<div id="mitte" >
	<div id="links">
		<?php include "login.php"; ?>
	</div>
	<div id="rechts">
		test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
	</div>
    <div id="inhalt">
        <div>
        <?php
        activateUser();
        ?>
        </div>
        <div id="Hallo" class="unsichtbar">
            <?php include('hello.php'); ?>
        </div>
        <div id="Kontakt" class="unsichtbar">
            <div style="text-align:center">
                <p align="center">
                    <center>
                        <!-- Start Code dw-Formgenerator -->
                            <?php include('formmailer.html'); ?>
                        <!-- End Code dw-Formgenerator -->
                    </center>
                </p>
            </div>
        </div>
    
    <div id="ueber" class="unsichtbar">
        <table><tr><td>
            ueber
        </td></tr></table>
    </div>
    <div id="myLayer1" class="unsichtbar">
        <table><tr><td>
            myLayer1
        </td></tr></table>
    </div>
    <div id="login" class="unsichtbar">
        blabla
    </DIV>

    <div id="registrieren" class="unsichtbar">
        <?php include "registrierung.php"; ?>
    </DIV>

    <div id="passwort" class="unsichtbar">
        <?php include "passwort.php"; ?>
    </DIV>
        
	</div>
		<script type="text/javascript">
			toggle('Hallo');
		</script>
</div>
<div id="fuss"> 
	Fuss
</div>
...

hubspe · #2 (**permalink**) 05.12.2011, 12:48

mit dem geposteten Code kann man kaum etwas anfangen, da z.B. der Doctype fehlt.
Uns interessiert auch nur was an den Browser ausgeliefert wird, d.h. Link zum Problem ist notwendig!!

Mögliche Ursachen (wild geraten):
du hast gefloatet aber nicht gecleart
du hast feste Höhen vergeben

Praktikant · #3 (**permalink**) 05.12.2011, 13:03

Zitat:

Zitat von hubspe

du hast gefloatet aber nicht gecleart

Darauf tippe ich auch.

nauen · #4 (**permalink**) 05.12.2011, 13:56

hey ho,

Link ist der hier:
test

gecleared hab ich nicht, dass ist richtig, ich schau mir nochmal die funktionsweise an.

Danke schonmal für den Hinweis!

fricca · #5 (**permalink**) 05.12.2011, 14:06

Die per JavaScript sichtbar gemachten Blabla-Texte sind absolut positioniert. Da kann nichts mitwachsen.

Mir ist völlig unklar, was das mal werden soll.

nauen · #6 (**permalink**) 05.12.2011, 14:20

die Seite ist ja auch in keinsterweise fertig, da ich ja auch immernoch das Problem mit dem Layout habe, komme ich da nicht wirklich weiter.

Wo setze ich denn die Texte absolut?
Ich setze von den Seiten doch nur die Breite und vom Fuss und Höhe die Höhe?

fricca · #7 (**permalink**) 05.12.2011, 14:22

Zitat:

Code:

.unsichtbar {
    position: absolute;
    text-align: center;
    visibility: hidden;


}

Firebug oder die Developer-Werkzeuge deines Browser zeigen sowas.

nauen · #8 (**permalink**) 05.12.2011, 14:39

Hallo Corina,

danke das wars!
Jetzt muss ich nur noch schauen wie ich die Texte an die selbe Stelle positioniere und die nicht alle untereinander sind...

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
3 Spalten Layout	eketrix	CSS	5	01.12.2009 11:47
Layout mit bis zu 7 Spalten (DIV)	michael-r	CSS	3	23.06.2009 18:26
3 Spalten Layout - mittlere Spalte dynamisch	stefan133	CSS	6	18.06.2009 08:13
Dreispaltiges Layout, fix/flexibel, mit gleichlangen Spalten	wischmopp	CSS	6	16.05.2009 14:33
2 Spalten Layout ohne Tabellen	creativ	(X)HTML	2	12.01.2004 20:14