HTML - div class/id + bootstrap
momentálne mám hotové hned 2 stránky pomocou <div class/id> a <iframe>... chcel bych se spýtať ktorý je vhodnejší pre bootstrap,... ako dalšie by ma zaujímalo čo sa týka kompatibility funkcie CSS - calc() s androidom, ostatne pri bootstrapu predpokladám že pri načítaní v mobilu nevyužije positioning ktorý využíva pri načítaní v PC,... na mobilu bych rád mal všetko pod sebou v poradí, hlavicka, menu (zlúčené vertikálne a horizontálne), obsah, pravý stĺpec a potom patičku...
-----
Kód v prvom prípade je:
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Web
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="web">
<div id="hlavicka">
<iframe src="hlavicka.html" width="100%" height="100%">
</iframe>
</div>
<div class="menu" id="horizontal-menu">
<iframe src="horizontal-menu.html" width="100%" height="100%">
</iframe>
</div>
<div class="content">
<div class="menu" id="vertical-menu">
<iframe src="vertical-menu.html" width="100%" height="100%">
</iframe>
</div>
<div class="obsah">
<div class="menu" id="obs">
<iframe src="obs/uvod.html" width="100%" height="100%">
</iframe>
</div>
<div id="copyright">
<iframe src="copyright.html" width="100%" height="100%">
</iframe>
</div>
</div>
<div id="right-sidebar">
<iframe src="right-sidebar.html" width="100%" height="100%">
</iframe>
</div>
</div>
</div>
</body>
</html>
style.css
.web{
position: relative;
height: 100%;
width: 100%;
}
#hlavicka{
position: relative;
height: 100px;
width: 100%;
}
#horizontal-menu{
position: relative;
height: 40px;
width: 100%;
}
.content{
position: relative;
height: calc(100% - 140px);
width: 100%;
}
#vertical-menu{
position: relative;
height: 100%;
width: 200px;
top: 0px;
left: 0px;
float: left;
}
.obsah{
position: relative;
height: 100%;
width: calc(100% - 350px);
top: 0px;
left: 0px;
float: left;
}
#obs{
position: relative;
height: calc(100% - 20px);
width: 100%;
top: 0px;
left: 0px;
float: left;
}
#copyright{
position: relative;
height: 20px;
width: 100%;
top: 0px;
left: 0px;
}
#right-sidebar{
position: relative;
height: 100%;
width: 150px;
top: 0px;
right: 0px;
float: right;
}
v druhom prípade:
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Web
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="web">
<div id="hlavicka">
<iframe src="hlavicka.html" width="100%" height="100%">
</iframe>
</div>
<div class="menu">
<div class="target" id="horizontal-menu">
<iframe src="horizontal-menu.html" width="100%" height="100%">
</iframe>
</div>
<div class="target" id="vertical-menu">
<iframe src="vertical-menu.html" width="100%" height="100%">
</iframe>
</div>
</div>
<div class="content">
<div class="obsah">
<div class="target" id="obs">
<iframe src="obs/uvod.html" width="100%" height="100%">
</iframe>
</div>
<div id="copyright">
<iframe src="copyright.html" width="100%" height="100%">
</iframe>
</div>
</div>
<div id="right-sidebar">
<iframe src="right-sidebar.html" width="100%" height="100%">
</iframe>
</div>
</div>
</div>
</body>
</html>
style.css
.web{
position: relative;
height: 100%;
width: 100%;
}
#hlavicka{
position: relative;
height: 100px;
width: 100%;
}
#horizontal-menu{
position: relative;
height: 40px;
width: 100%;
}
#vertical-menu{
position: relative;
height: calc(100% - 140px);
width: 200px;
top: 0px;
left: 0px;
float: left;
}
.content{
position: relative;
height: calc(100% - 140px);
width: calc(100% - 200px);
top: 0px;
left: 0px;
float: left;
}
.obsah{
position: relative;
height: 100%;
width: calc(100% - 150px);
top: 0px;
left: 0px;
float: left;
}
#obs{
position: relative;
height: calc(100% - 20px);
width: 100%;
top: 0px;
left: 0px;
float: left;
}
#copyright{
position: relative;
height: 20px;
width: 100%;
top: 0px;
left: 0px;
}
#right-sidebar{
position: relative;
height: 100%;
width: 150px;
top: 0px;
right: 0px;
float: right;
}
všimol som si že v html5 teda když súbor začína <!DOCTYPE html> že potom funkcia calc v css nefunguje, čím by som to mal nahradiť?
calc() je záležitost CSS. Verze HTML s tím nemá moc co dělat.
ja vím že je to čo sa týka CSS, ale pak mi vysvetli proč když odstránim tag <DOCTYPE html> tak sa mi stránka zobrazí úplne ináč, a to práve tak jako by tie hodnoty "calc()" neboly,
Tak teď si odporuješ.
čím si odporujem?
kopl som sa,... když tam je ten tag tak sa mi to nezobrazí, když neni tak zobrazí jakoby s tým calc...
Tu máš ten súbor:
web
Pre rôzne doctypy majú html prvky rôzne predvolené hodnoty, iné vlastnosti.
to chápu proto tam mám napevno v CSS hodnoty, lebo defaultné sú iné než chci lenjde o to že ten calc() je v css, a on hovoril že to má vliv len na html,... tak proč mi to teda sa chová jinak, když velkosti a rozloženie mám definované v style.css ?
a čím to teda nahradiť aby to išlo? calc() totiž nejde ani na androidu a potrebujem to necím nahradiť,...
tak ešte raz
staviaš strechu (calc) a netušíš aké máš základy, ten calc s tým nemá nič spoločné
a pokiaľ vidím ten tvoj kód, tak css tam nastavené nemáš, čo platí pre html, body, div..?