nicht angemeldet
Responsive Webdesign 3 Spalten - Mix aus % und PX
0 
Auge
0 0 0 
Gunnar Bittersmann
0 HTML5
0 Gunnar Bittersmann
Responsive Webdesign 3 Spalten - Mix aus % und PX
Matthias ApselHallo, ich habe da mal eine Frage:
Ich brauche ein 3 Spalten-Layout
<div class="wrapper">
<div class="menu">ddd</div>
<div class="content">dddd</div>
<div class="sidebar">ddd</div>
</div>
Allerdings sollte MENU und SIDEBAR eine feste Breite haben und wenn der Browser sich nun "verkleinert" (Responsive Webdesign) sollte MIDDLE sich bis zum ersten MEDIA QUERIE verkleiner, prozentual. Ich hoffe ich konnte meine Frage verständlich erklären :) Ein ähnliches Verhalten sieht man auf http://www.smashingmagazine.com. Wenn man hier dern Browser verkleinert bleibt die rechte Seite daneben bis zum Media Querie
Kann mir dabei jemand helfen?
Meine derzeitige CSS ist
.wrapper {
overflow: auto;
max-width: 1470px;
margin: 0 auto;
background: #f2f1f1;
padding: 20px;
}
.menu {
width: 190px;
float: left;
padding: 10px;
border-radius: 0.625em;
background: #fff;
box-shadow: 0 0 0.625em 0.07em rgba(0, 0, 0, 0.05);
}
.content {
background: none repeat scroll 0 0 #fff;
border-radius: 0.625em;
box-shadow: 0 0 0.625em 0.07em rgba(0, 0, 0, 0.05);
float: left;
margin: 0 0 0 10px;
padding: 10px;
width: 64.0136%;
}
.sidebar {
background: none repeat scroll 0 0 #fff;
border-radius: 0.625em;
box-shadow: 0 0 0.625em 0.07em rgba(0, 0, 0, 0.05);
float: left;
padding: 10px;
position: relative;
margin-left: 10px;
width: 290px;
}
-
Hallo
Ich brauche ein 3 Spalten-Layout
<div class="wrapper">
<div class="menu">ddd</div>
<div class="content">dddd</div>
<div class="sidebar">ddd</div>
</div>Schau dich mal [bei den neuen Elementen von HTML5](http://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/) um. Ich wette, da gibt es passenderes als die LOeercontainer (div). Fragen dazu bitte hier anhängen. > Allerdings sollte MENU und SIDEBAR eine feste Breite haben und wenn der Browser sich nun "verkleinert" (Responsive Webdesign) sollte MIDDLE sich bis zum ersten MEDIA QUERIE verkleiner, prozentual. > > Kann mir dabei jemand helfen? Dazu kannst du [calc](http://docs.webplatform.org/wiki/css/functions/calc) verwenden. Die [Browserunterstützung ist ausreichend](http://caniuse.com/calc). > ~~~css > .menu { > float: left; > padding: 10px; > width: 190px; > } > .content { > float: left; > margin: 0 0 0 10px; > padding: 10px; > width: calc(100% - 10px - 20px - 190px - 20px - 290px -10px -20px); /* width.content - margin-left.content - padding.content - width.menu - padding.menu - width.sidebar - margin-left.sidebar - paddingt.sidebar */ > } > .sidebar { > float: left; > padding: 10px; > margin-left: 10px; > width: 290px; > } >Wenn du noch Breiten für border angäbst und diese auch bei calc berücksichtigtest, bekämst du ein e pixelgenau passende Breite hin (etwaige Rundungsfehler einzelner Browser ausgenommen).
Wird eine zu bestimmende Breite unterschritten, solltest du mit Media Queries für ein anderes, dann passenderes Layout sorgen.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3 -
Hallo garfield853, ich habe da mal eine Antwort:
die von dir vorgeschlagene Seite verwendet folgende Media Queries:
@media screen and (min-width:19.6875em) @media screen and (min-width:27.1875em) @media screen and (min-width:31.25em) @media screen and (min-width:38.125em) @media screen and (min-width:40.625em) @media screen and (min-width:50em) @media screen and (min-width:63.75em) @media screen and (min-width:76.25em) @media screen and (min-width:81.25em) @media screen and (min-width:90.625em) @media screen and (min-width:100em) @media screen and (min-width:63.75em) and (max-width:70.3125em)Mit diesen Angaben wird das css der einzelnen Elementen und css-Klassen gesteuert. Dahinter steckt viel Feinjustierung, sprich Arbeit. Mit deinen verwendeten DIVS:
<div class="wrapper"> <div class="menu">ddd</div> <div class="content">dddd</div> <div class="sidebar">ddd</div> </div>lassen sich schon so viele Möglichkeiten erstellen. Besser wäre es allerdings, du würdest es etwas aktueller halten. ZB:
<section> <nav>ddd</nav> <article>dddd</article> <aside>ddd</aside> </section>gruesse qx
-
Hallo!
Besser wäre es allerdings, du würdest es etwas aktueller halten. ZB:
<section>
<nav>ddd</nav>
<article>dddd</article>
<aside>ddd</aside>
</section>Prinzipiell keine schlechte Idee ... ;-) allerdings wäre ich dann eher für: ~~~html <div> <nav>...</nav> <main>...</main> <aside>...</aside> </div>Gruß Gunther
-
@@Gunther:
nuqneH
Prinzipiell keine schlechte Idee ... ;-)
allerdings wäre ich dann eher für:<div>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
</div>Prinzipiell besser. Allerdings wäre ich dann eher für: ~~~html <nav>…</nav> <main role="main">…</main> <aside>…</aside>Das div ist bedauerlich bis ärgerlich.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
Prinzipiell keine schlechte Idee ... ;-)
allerdings wäre ich dann eher für:<div>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
</div>> > Prinzipiell besser. Allerdings wäre ich dann eher für: > ~~~html <nav>…</nav> > <main role="main">…</main> > <aside>…</aside>Das div ist bedauerlich bis ärgerlich.
Nein, denn die gesamte Struktur der Seite könnte ja u.a. so aussehen:
<header>...</header> <div> <nav>...</nav> <main role="main">...</main> <aside>...</aside> </div> <footer>...</footer>Mir ging es auch lediglich darum aufzuzeigen, dass wenn man für die gewünschte Darstellung ein "Container-Element" benötigt, Section nicht angebracht ist, sondern nach wie vor ein Div-Element - that's all!
Gruß Gunther
-
@@Gunther:
nuqneH
wenn man für die gewünschte Darstellung ein "Container-Element" benötigt,
ist das ein Zeichen dafür, dass man mit genügend CSS-Kenntnissen kein Container-Element benötigt.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
wenn man für die gewünschte Darstellung ein "Container-Element" benötigt,
ist das ein Zeichen dafür, dass man mit genügend CSS-Kenntnissen kein Container-Element benötigt.
Das würde ich soo pauschal nicht unterschreiben.
Je nach gewünschtem Layout und Browserunterstützung können Container sehr wohl nötig sein - auch wenn bspw. nur aufgrund eines Browserbugs!Gruß Gunther
-
@@Gunther,
aus einem vorigen [Beispiel](//selfhtml.quincunx.eu/relatives Längenmaß vh.html) wird es ersichtlich, das umschließende <tags> sinnvoll sind.
gruesse qx
-
Om nah hoo pez nyeetz, Quincunx!
aus einem vorigen Beispiel wird es ersichtlich, das umschließende <tags> sinnvoll sind.
Es brauchen jedoch selten _zusätzliche_ wrapper-Elemente(!) sein. html und body gibt es auch, zudem steht oft main zur Verfügung. Ggf. auch footer, header, article oder section
Matthias
-
-
-
-
-
-
-
