zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Merkwürdigkeiten bei fixed/fluid Layout und table-cell

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.08.2014, 16:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2012
Beiträge: 10
SimoneW befindet sich auf einem aufstrebenden Ast
Standard Merkwürdigkeiten bei fixed/fluid Layout und table-cell

Hallo,

ich habe mir zu Übungszwecken ein Layout einmal im fixed und dann das Gleiche einmal im Fluid Layout gebastelt.

Im Div .main_wrapper sind die nav, article class="main" und aside. Alle drei gefloatet und mit display:table-cell ausgezeichnet.

Hier ein Ausschnitt aus der CSS Fixed Layout

nav {
text-align:left;
display:table-cell;
padding:20px;
width:140px;
background-color:LightBlue;
}

.gap {
display:table-cell;
width:20px;
}

#main_wrapper > article {
display:table-cell;
padding:20px;
width:460px;
background-color:LemonChiffon;
}


aside {
display:table-cell;
padding:20px;
width:140px;
background-color:LightBlue;
}



Also die nav ist 140 plus jeweils 20 padding, der main ist 460 plus jeweils 20 padding und die aside ist wie die nav. Zwischen den Containern gibt es das div .gap um einen Abstand von 20 px hinzubekommen.

Im FLuid muß ich jedoch die Gesamtbreite als width eingeben, was ja nach Box-Modell unlogisch ist, um dann ein korrektes Ergebnis zu bekommen. Woran liegt das ?

Hier die Fluid

nav {
display:table-cell;
padding: 2.22222222222222%;
width:20%;
background-color:LightBlue;
}

.gap {
display:table-cell;
width:2.22222222222222%;
}

.main {
display:table-cell;
width:55.555555555556%;
background-color:LemonChiffon;
}


aside {
display:table-cell;
padding: 2.22222222222222%;
width:20%;
background-color:LightBlue;
}


Vielen Dank für Eure Hilfe.
Herzlichen Gruß,
Simone
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2014, 17:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

CSS ist ohne das dazugehörige HTML nutzlos.
Auch verstehe ich nicht, warum du display:table-cell benötigst? Das kannst du aus beiden Versionen rauslöschen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.08.2014, 18:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2012
Beiträge: 10
SimoneW befindet sich auf einem aufstrebenden Ast
Standard

Ich habe table-cell genommen, um alle Spalten auf die gleiche Höhe zu bekommen.

Anbei der Code jeweils für fixed und fluid

<!doctype html>
<html>
<head>
<title>Responsive Design</title>
<meta charset="utf-8">
<meta name="description" content="responsive design">
<meta name="keywords" content="responsive, webdesign, layout">
<meta name="author" content="SW">

<style>
* {
padding:0;
margin:0;
}

a {
display:block;
text-decoration:none;
color:black;
}

li {
list-style-type:none;

}

body {
width:960px;
margin:0 auto;
background-color:SeaShell;
}

#wrapper {
width:900px;
padding:30px;
background-color: PapayaWhip;

}

header {
width:860px;
padding:20px;
background-color:salmon;
margin-bottom:20px;
}



#main_wrapper {

display:table;
}

nav {
text-align:left;
display:table-cell;
padding:20px;
width:140px;
background-color:LightBlue;
}

.gap {
display:table-cell;
width:20px;
}

#main_wrapper > article {
display:table-cell;
padding:20px;
width:460px;
background-color:LemonChiffon;
}


aside {
display:table-cell;
padding:20px;
width:140px;
background-color:LightBlue;
}

aside > section > article {
margin-bottom:10px;
}

aside > section > article h3 {
padding-bottom:5px;
}

footer {
clear:both;
width:860px;
padding:20px;
background-color:salmon;
margin-top:20px;
}

</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Responsive Design
</h1>
</header>
<div id="main_wrapper">
<nav>
<ul>
<li><a href="">Produkte</a></li>
<li><a href="">Herstellung</a></li>
<li><a href="">Anlieferung</a></li>
<li><a href="">Kontakt</a></li>
</ul>

</nav>
<div class="gap"></div>
<article>
<section>
<h2>
Lorem Ipsum
</h2>
<p>
Gleiche Schuld treffe Die, welche aus geistiger Schwäche, d.h. um der Arbeit und dem Schmerze zu entgehen, ihre Pflichten verabsäumen. Man kann hier leicht und schnell den richtigen Unterschied treffen; zu einer ruhigen Zeit, wo die Wahl der Entscheidung völlig frei ist und nichts hindert, das zu thun, was den Meisten gefällt, hat man jede Lust zu erfassen und jeden Schmerz abzuhalten; aber zu Zeiten trifft es sich in Folge von schuldigen Pflichten oder von sachlicher Noth, dass man die Lust zurückweisen und Beschwerden nicht von sich weisen darf.
</p>
</section>
</article>
<div class="gap"></div>
<aside>
<section>
<article>
<h3>
Neu eingetroffen
</h3>
<p>
Zeiten trifft es sich in Folge von schuldigen Pflichten oder von sachlicher Noth. </p>
</article>

<article>
<h3>
Aktuelles
</h3>
<p>
Die, welche aus geistiger Schwäche, d.h. um der Arbeit und dem Schmerze zu entgehen. </p>
</article>
</section>
</aside>

</div> <!-- ende content -->
<footer>
<p>
(c) by friendlybit
</p>
</footer>
</div> <!-- ende wrapper -->
</body>
</html>




Hier das CSS für fluid

* {
padding:0;
margin:0;

}

a {
display:block;
text-decoration:none;
color:black;
}

li {
list-style-type:none;

}

body {
max-width:960px;
margin:0 auto;
background-color:SeaShell;
}

#wrapper {
width:93.75%;
padding:3.125%;
background-color: PapayaWhip;

}

header {
width:95.55555555555556%;
padding:2.22222222222222%;
background-color:salmon;
margin-bottom:2.32558139534884%;
}



#main_wrapper {
display:table;
width:100%;
}

nav {
display:table-cell;
padding: 2.22222222222222%;
width:20%;
background-color:LightBlue;
}

.gap {
display:table-cell;
width:2.22222222222222%;
}

.main {
display:table-cell;
width:55.555555555556%;
background-color:LemonChiffon;
}


aside {
display:table-cell;
padding: 2.22222222222222%;
width:20%;
background-color:LightBlue;
}

aside > section > article {
margin-bottom:10px;
}

aside > section > article h3 {
padding-bottom:5px;
}

footer {
clear:both;
width:95.55555555555556%;
padding:2.22222222222222%;
background-color:salmon;
margin-top:2.32558139534884%;
}


Danke
Mit Zitat antworten
  #4 (permalink)  
Alt 20.08.2014, 21:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2012
Beiträge: 10
SimoneW befindet sich auf einem aufstrebenden Ast
Standard in display:table kein normales box-model ?

Ich habe nun mal die display:table rausgenommen und dann stimmen die Breiten.
Ist es möglich, daß display:cell das box-modell mit Gesamtbreit-margin-border-padding = width ausser Kraft setzt?

So quasi wie ein border-sizing:box?

Danke
Gruß,
Simone
Mit Zitat antworten
  #5 (permalink)  
Alt 20.08.2014, 21:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2012
Beiträge: 10
SimoneW befindet sich auf einem aufstrebenden Ast
Standard Hat sich erledigt.

Es mußte noch ein Div um die <ul>. Warum weiß ich leider nicht. Aber jetzt stimmt alles.

Danke
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
Myspace Fehler zwischen FF und IE? soren.designs (X)HTML 1 05.09.2009 17:02
Untermenü im IE nici CSS 10 22.06.2009 22:19
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 10:12
Myspace-Probleme Nora-B CSS 3 16.09.2008 00:17
Falsche Darstellung im Internet Explorer Janizzle CSS 0 30.08.2007 20:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:46 Uhr.