zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden display: table-cell - Spalten haben nicht die angegebene Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.05.2012, 00:17
Lehrling
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2012
Beiträge: 13
Doublerainbow befindet sich auf einem aufstrebenden Ast
Unglücklich display: table-cell - Spalten haben nicht die angegebene Breite

Hallo ihr,

ich wollte gerade eine neues Layout anfangen und habe dabei folgendes Problem:

Ich möchte ein Layout mit 3 Spalten erstellen und habe dafür die Eigenschaft display: table-cell angwandt - allerdings haben die Spalten nicht die Breite die ich angebe (1. und 2. Spalte zu schmal, 3. zu breit und insgesamt zu schmal, sodass der Footer überragt) und ich weiß nicht wieso.

HTML-Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>Title</title>
<link href='http://fonts.googleapis.com/css?family=Jura:600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>	
<header></header>

<div id="content">
	
	<section></section>
	<nav></nav>

	<aside></aside>

</div>

<footer></footer>

</body>
</html>
Code:
body {
	margin: 0;
	color: #333333;
	background: #171111;
	background: -moz-linear-gradient(top, #171111, #62524F);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#171111), to(#62524F));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#171111', endColorstr='#62524F');
	background-attachment: fixed;
}  

header {}

nav {  
	background: teal;
	padding-top: 10px;
	display: table-cell;  
	width: 175px;  
	padding-right: 25px;  
}  
       
#content {
	display: table; 
	background: #ffffff;
	width: 1015px;
	padding: 0;
	margin-left: 100px;
}  
      
section {  
	background: hotpink;
	padding-top: 10px;
	display: table-cell; 
	width: 565px;  
	padding-right: 25px;
	padding-left: 25px;
}  
      
aside {  
	background: yellow;
	padding-top: 10px;
	display: table-cell;  
	width: 275px;  
	padding-right: 25px;  
}  

footer {
	background: #396D85;
	width: 1015px;
	margin-left: 100px;
	margin-bottom: 40px;
	padding: 15px;
	color: #ffffff;
}

Für eure Hilfe wäre ich sehr dankbar!

Liebe Grüße
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.05.2012, 01:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Als erstes mal Boxmodell: footer hat width plus padding.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.05.2012, 11:28
Lehrling
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2012
Beiträge: 13
Doublerainbow befindet sich auf einem aufstrebenden Ast
Standard

Okay, ich dachte Padding ist immer der Innenabstand, aber das hat nichts mit meinen anderen DIVs zu tun, die einfach nicht so breit sein wollen wie ich es ihnen sage oder?
Mit Zitat antworten
  #4 (permalink)  
Alt 22.05.2012, 11:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Auch bei den anderen divs machst Du den gleichen Fehler wie bei footer. Informiere Dich also über das genannte Stichwort "Boxmodell".
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.05.2012, 02:06
Lehrling
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2012
Beiträge: 13
Doublerainbow befindet sich auf einem aufstrebenden Ast
Standard

Ja, ich hatte da einen Denkfehler! Danke Dir!

PS: Das Ergebnis habe ich im Layoutforum gepostet!
Mit Zitat antworten
Antwort

Stichwörter
css, display: table-cell, div, stylesheet

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
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
Myspace Fehler zwischen FF und IE? soren.designs (X)HTML 1 05.09.2009 17:02
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 10:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:58 Uhr.