Protože jsem dnes zažíval problémy s nakódováním stránek, z nichž jedna měla na výšku delší #content a druhá #vmenu a nepomáhali ani JS/jQuery skripty, hledal jsem další JS řešení.
Doted jsem si myslel(a upřímně jsem se tomu podivoval, že to je možné), že čistě přes CSS to nejde řešit, ale toto byl omyl. Přes CSS to jde řešit náramně krásně, jednoduše a s minimem kódu.
Inspirací mi byla stránka http://css-tricks.com/fluid-width-equal-height-columns/ .
Jedno řešení jsem odtamtud nezkoušel, které bylo založeno na tabulkách, 2 řešení se mi nakonec ukázali jako totožné a byly sloučeny do jednoho a zbylých 4 řešení jsem si stejně jako to sloučené jedno dal do webového projektku a ozkoušel jsem ho na kódu který jsem měl už napsaný.
V prvé řadě tu uvedu sdílené kódy, všechno bylo testováno na ASP.NET, kdy v rootu webové aplikace byl soubor *.Master a v podsložce pak soubory BasesEarth.aspx a Bases.aspx.
Nebudu zde dávat C# těchto souborů, protože je stejně prázdný. BasesEarth.aspx vypadal tedy nějak takto:
CODE<%@ Page Title="" Language="C#"
MasterPageFile="~/TBDougNeinerThree.Master" AutoEventWireup="true"
CodeBehind="BasesEarth.aspx.cs" Inherits="sunamo.cz.ThunderBrigade.BasesEarth"
%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Základny
Earth </h1>
<h2>1. Earth Sensor Tower </h2>
<img alt="Earth Sensor Tower" src="http://jepsano.net/../i/ThunderBrigade/Earth Sensor Tower.png">
<h2>2. Earth Weapon Bunker </h2>
<h2>3. Earth Command Center </h2>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="toolbar" runat="server">
</asp:Content>
A Bases.aspx pak takto:
CODE<%@ Page Title="" Language="C#" MasterPageFile="~/TBDougNeinerThree.Master"
AutoEventWireup="true" CodeBehind="Bases.aspx.cs"
Inherits="sunamo.cz.ThunderBrigade.Bases" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
Za každou divizi(Halon, United, Earth) můžete bojovat až se 6 typy základen, které se stejně jmenují u každé divize, ale vypadají většinou zcela jinak. <i>Vyberte si prosím z nabídky vlevo. </i>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="toolbar" runat="server">
<h3>Základny: </h3>
<ul style="list-style-type: none">
<li class="vmenu_anchor"> <a href="BasesHalon.aspx">Halon </a> </li>
<li class="vmenu_anchor"> <a href="BasesUnited.aspx">United </a> </li>
<li class="vmenu_anchor"> <a href="BasesEarth.aspx">Earth </a> </li>
</ul>
</asp:Content>
Pak jsem měl ještě soubor Shared.css, kde jsem měl tyto deklarace a na který jsem se odkazoval v každém souboru *.Master:
CODE.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.w800 {
background-color: yellow;
width: 800px;
max-width: 800px;
min-width: 800px;
}
#vmenu {
background-color: #8E7765;
width: 200px;
border-right: 5px solid black;
}
.vmenu_anchor {
margin-left: auto;
margin-right: auto;
left: -20px;
position: relative;
}
#content {
width: 530px;
background-color: aqua;
}
A teď už k samotným layoutům:
CSS Table
Nejjednodušší způsob, simulující HTML tabulky.
Kód CSS:
CODE#css-table {
display: table;
}
#css-table .col {
display: table-cell;
/*Je tu pouze proto aby mi padding navic
nezpusobil, ze se prvek nevejde do sveho kontejneru*/
padding: 0;
}
HTML kód .Master:
CODE<div>
<div>
<div> <asp:ContentPlaceHolder ID="toolbar" runat="server"> </asp:ContentPlaceHolder> </div>
<div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div>
</div>
</div>
Výsledek je OK, žluté místo je volné místo které bude na všech obrázcích, protože obalující div měl šířku 800px a tak jsem měl nastavit #content 600px místo 530px.
One True Layout
Druhý a poslední, který dopadl stejně dobře jako CSS Table.
CSS Kód:
CODE#one-true
{
overflow: hidden;
}
#one-true .col {
/*width: 27%;*/
padding: 30px 0 0 0;
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
HTML Kód:
CODE<div>
<div>
<div> <asp:ContentPlaceHolder ID="toolbar" runat="server"> </asp:ContentPlaceHolder> </div>
<div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div>
</div>
</div>
Obrázky:
Doug Neiner
CSS Kód:
CODE#doug-neiner-three {
overflow: hidden;
}
#doug-neiner-three .col {
/*width: 21%; */
float: left;
padding: 0;
}
HTML Kód:
CODE<div>
<div>
<div> <asp:ContentPlaceHolder ID="toolbar" runat="server"> </asp:ContentPlaceHolder> </div>
<div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div>
</div>
</div>
Obrázky:
Nicolas Gallagher Method
CSS Kód:
CODE#nicolas-gallagher {
position: relative;
z-index: 1;
width: 100%;
}
#nicolas-gallagher .col {
position: relative;
/*width: 27%;*/
padding: 0;
float: left;
}
.group {
display: inline-block;
}
HTML Kód:
CODE<div>
<div>
<div> <asp:ContentPlaceHolder ID="toolbar" runat="server"> </asp:ContentPlaceHolder> </div>
<div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div>
</div>
</div>
Obrázky:
Flexbox
Určování pomocí CSS pořadí prvků.
Kód CSS:
CODE#flexbox {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-align: start;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: start;
-moz-box-align: start;
display: box;
box-orient: horizontal;
box-pack: start;
box-align: start;
overflow: hidden;
}
#flexbox .col {
/*width: 27.333%;*/
padding: 30px 0 0 0;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#flexbox .col:nth-child(1) {
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#flexbox .col:nth-child(2) {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
Kód HTML:
CODE <div>
<div>
<div> <asp:ContentPlaceHolder ID="toolbar" runat="server"> </asp:ContentPlaceHolder> </div>
<div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div>
</div>
</div>
Obrázky:
