zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Mittelspalte bei 3-Spalten Layout mit Boxen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.02.2013, 21:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2013
Beiträge: 3
ToDoWaldi befindet sich auf einem aufstrebenden Ast
Standard Problem mit Mittelspalte bei 3-Spalten Layout mit Boxen

Hallo Jungs.
Habe hier Folgenden Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
  <title>3-Spalten-Layout</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <meta http-equiv="content-language" content="de">
   <meta http-equiv="content-script-type" content="text/javascript">
   <meta http-equiv="content-style-type" content="text/css">
    <link rel="shortcut icon" href="images/favicon.ico">
<style type="text/css">
* { margin: 0; padding: 0; }

body {
	margin-left: 20%;
	margin-right: 20%;
	font-family:  Verdana, Arial, Geneva, Helvetica, sans-serif;
}

.box {
	border-radius: 7px;
	background-color: rgb(250,240,160);
	padding: 10px;
	margin: 10px;
}


.button {
         text-align: left;
         padding: 1px;
         margin-top: 5px;
         display: block;
}

.subbutton {
            text-align: left;
            padding: 1px;
            margin-top: 2px;
            margin-left: 20px;
            font-size: 13px;
}

/*----Überschriften----*/
.menueheading {
	font-variant: small-caps;
	border-bottom: 1px solid black;
	margin-bottom: 5px;
	font-weight: 700;
	text-align: center;
}


.heading {
               font-variant: small-caps;
               border-bottom: 1px solid black;
               font-weight: 700;
}

/*----Die drei Boxen----*/
#links {
	background-color: #CCCCCC;
	float: left;
}

#rechts {
	background-color: #CCCCCC;
	float: right;
}

#inhalt {
	background-color: #8D8D8D;
}

/*----------Linkdarstellungen----------*/
a:link, a:visited, a:active, a:focus {
                                      text-decoration: none;
                                      color: rgb(0,0,0);
}

a:hover {
         text-decoration: none;
         background-color: rgb(70,39,24);
         color: rgb(255,255,255);
}

.helplink {
           cursor: help;
}

 </style>
</head>
<body>
<div id="links">
	<div class="box">
		<div class="menueheading">Test 1</div>

        	<div class="button"><a href="index.html">punkt 1</a></div>
        	<div class="subbutton"><a href="index.html">dfsgdsfgdsfg</a></div>
        	<div class="subbutton"><a href="index.html">Vdsfgsdfg</a></div>
		<div class="subbutton"><a href="index.html">sdgfdfg</a></div>
        	<div class="button"><a href="index.html">punkt 2</a></div>
        	<div class="subbutton"><a href="index.html">dgfsdfg</a></div>
        	<div class="subbutton"><a href="index.html">Vdfgdfgall</a></div>
		<div class="subbutton"><a href="index.html">Fdgfdfgk</a></div>
        	<div class="button"><a href="index.html">dfgsgdfi</a></div>
        	<div class="button"><a href="index.html">gdfdfgk</a></div>
        	<div class="button"><a href="index.html">Qdfgdfgt</a></div>
        	<div class="button"><a href="index.html">Wgdfdfg</a></div>
        	<div class="button"><a href="index.html">Bufdgdfgr</a></div>
        	<div class="button"><a href="index.html">Fagdfsdfg</a></div>
	</div>

	<div class="box">
		<div class="menueheading">Test 2</div>
		<div class="button"><a href="index.html">Adfgdfgs</a></div>
		<div class="button"><a href="index.html">Pdsfggfm</a></div>
		<div class="button"><a href="index.html" class="helplink">Hilfe</a></div>
      </div> 
</div>

<div id="rechts">
	<div class="box">
		<div class="menueheading">Rechts 1</div>
		sdfsdfsdf: 57995<br>
		sdfsdf: 15663<br>
		sdfsdfsdfsdfs: 55<br>
		sdfsdfsdf: 2293<br>
		sdfsdf: 3<br>
		sdfsdfsf: 2<br>
		sdfsdfsdf: 9298<br>
		sdfsdfsdf: 29<br>
		bvxcvxcv: 88<br>
		xcvxcvxcv: 20<br>
		xcvxcv: 111<br>
		xvxcv: 4<br>
		fgdhfgdhfgh: 2
	</div>
</div>

<div id="inhalt">
		<div class="box">
        		<div class="heading">Punkt 1 Übersicht:</div>
			test
		</div>
</div>

</body>

</html>
Mein Problem ist, dass der Mittelteil anscheinend die gesamte Breite einnimmt und von den Spalten rechts und links überlappt wird. Dadurch hat die mittlere Box nicht die richtigen Abstände.
Ich möchte, dass sich die mittlere Box so stark wie möglich ausdehnt, sodass sie noch zwischen die Boxen links und rechts passt.
Ich hoffe, mir kann jemand weiterhelfen.

Viele Grüße
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.02.2013, 21:41
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Du hast keine Breiten angegeben. Du hast nur die Seitenbereiche gefloatet. Warum sind ausserdem die Bereiche nicht in logischer Reihenfolge angeordnet? Wäre einfacher.
Du hast die divititis --> die ist aber heilbar
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.02.2013, 21:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2013
Beiträge: 3
ToDoWaldi befindet sich auf einem aufstrebenden Ast
Standard

Ich habe keine Breiten angegeben, weil ich eigentlich möchte, dass sich die Boxen an die Größe des Inhalts anpassen. Die Mittelbox soll dann den Rest ausfüllen.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.02.2013, 21:53
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Sofern ist dann ja alles richtig. Die Seitenspalten bekommen die Breite durch ihren Inhalt. Was willst du anders haben?
Mit Zitat antworten
  #5 (permalink)  
Alt 28.02.2013, 02:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von ToDoWaldi Beitrag anzeigen
Hallo Jungs.
Hinter welchem Mond lebst du, oder ist deine Anrede neudeutsch und umfasst beiderlei Geschlecht?

Zitat:
Zitat von ToDoWaldi Beitrag anzeigen
Habe hier Folgenden Code:
... der aber dein Problem, bzw dein Anliegen nicht gleich erkennen lässt. Ich habe das mal für dich gemacht, und noch ein wenig Blindtext hinzugefügt, dem Inhaltsbereich eine andere Farbe gegeben, und die Außenboxen halbdurchsichtig gemacht.

ToDoWaldi

Zitat:
Zitat von ToDoWaldi Beitrag anzeigen
Mein Problem ist, dass der Mittelteil anscheinend die gesamte Breite einnimmt und von den Spalten rechts und links überlappt wird.
Das ist richtig.
Float-Boxen sind, ähnlich wie position-absolut-Boxen, aus dem Textfluß genommen, d.h., sie überlagern andere Elemente.
Im Gegensatz zu pos-abs-Boxen überlagern sie jedoch nur Block-Elemente und schieben Inline-Content
(hier: den Text) vor sich her.


Zitat:
Zitat von ToDoWaldi Beitrag anzeigen
Ich möchte, dass sich die mittlere Box so stark wie möglich ausdehnt, sodass sie noch zwischen die Boxen links und rechts passt.
Ich hoffe, mir kann jemand weiterhelfen.

Viele Grüße
Gib dem Inhaltsteil ein 'display: table-cell'.

Gruß zurück


Edit:
Hmmm, da fällt mir gerade ein, daß einige ältere Browser 'display: table-cell' nicht verstehen.

andere Möglichkeit:
Mach aus dem Inhaltsteil einen containing-block, indem du ihm 'overflow: auto' gibst.

Geändert von gaby (28.02.2013 um 02:42 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 02.03.2013, 20:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2013
Beiträge: 3
ToDoWaldi befindet sich auf einem aufstrebenden Ast
Standard

Ich meinte natürlich sowohl männliche, als auch weibliche Jungs!

Mit deinen Anpassungen ist es genau so wie ich es haben wollte, danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 02.03.2013, 21:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von ToDoWaldi Beitrag anzeigen
Ich meinte natürlich sowohl männliche, als auch weibliche Jungs!


Zitat:
Mit deinen Anpassungen ist es genau so wie ich es haben wollte, danke!
bitte sehr!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 01:02
problem mit 2 spalten css layout sonnengott CSS 17 11.12.2008 15:21
Einfaches Layout 2 Spalten 2 Zeilen - bloß wie? armagedon CSS 8 02.11.2008 16:54
[CSS | 3 Spalten Layout] Problem dotchen CSS 3 11.04.2006 11:07
Problem mit mehrspaltigem Layout RalfEggert CSS 2 05.04.2004 17:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:00 Uhr.