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;
}
Ve spolupráci s bootstrapem budeš používat postupy předepsané bootstrapem, takže ti nebude fungovat ani jeden z nich.
tak jak jinak spraviť aby v prípade mobilného zariadenia sa iframy s takéhoto rozloženia nahádzaly pod sebe?
nekde jsem pozeral že je pri bootstrapu teoreticky jedno že čo je použité, či iframy, či obrázky či text či neco, len je dôležité aby to všetko bylo rozdelené v classoch, a ono tie classy jak menia velkosť a pozíciu tak sa mení velkosť a pozícia aj tých iframov, neni tomu tak? Tzv. iframy sa chovajú vraj dosť podobne ako obrázky,... len nevím jak to presne udelať, ale nekde jsem videl že neco podobné robily pomocou "container" a ".col-sm-4"
Musíš to použít stejně, jako je to popsané na stránkách bootstrapu. Pokud to budeš dělat jinak, nebude ti to fungovat, pokud si k tomu nenapíšeš svoje vlastní CSS.
Jak ťa čítam tak v tom máš pekný hokej, mieša sa ti to všetko dokopy. A mal by si začať postupne. A ako prvé začni pochopením box a inline prvkov. Všetko ostatné budú už len atribúty.
ja s HTML pracuju len rok aj pol, aj to tak že raz za mesiac si iba na 5 minút k tomu sadnem,... len posledné dni, som nejak viac začal sa o to zaujímať. Zas si myslím že ten body mám celkem dobre spravený, najme v druhom prípade,... CSS riešim sotva mesiac,... jako obsah si viem vytvoriť, jediné s čím mám najvätší problém je práve <div class> <div id> <iframe> a bootstrap.
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..?
Celé to máš podivně navržené. K čemu je class "menu"? Fakt chceš vymýšlet už dávno vymyšlené?
https://cs.webdev.wiki/howto/trisloupcovy-layout.h tml
však podla toho som to delal, až na to že som namiesto obtékania zvolil pozicovanie... jinak skorej som nemal vôbec žiadny problém pri "position: "absolute"; avšak jeden týpek mi poradil čo som videl že sám vytvoril fakt dobrú web stránku že mám používať relative. že pak nepasuju každú "krabici" jako súradnicovo od lavej hornej časti stránky, ale len že okolko sa má posunúť oproti predchádzajúcemu prvku. Jako class menu tam nemusí byť, ale zas čo som pozeral a hladal všade možne tak u viacerých sa zhodli že je to dobré když pri bootstrapu budu chcieť zlúčiť menu, tzv. bočné a horné menu sa na mobilo spojí do jedného len horného. http://www.w3schools.com/bootstrap/bootstrap_navba r.asp vlastne menu chcem mať spravené presne tak jak je menu spravené na stránke www.w3schools.com kde sa taky zlúči do jedného, horizontálne su kategórie a verticálne sú podkategórie když sa zlúčia tak je iba hozinontálne menu a když klepneš na kategóriu tak pod ňou rozbaly podkategórie.
Tam to mají:
Ty to máš:
Deš na to spatně synku, pokoušís se přizpůsobit BStrap na tvoji stránku, udělej to naopak
, typuji první zkušenost s tímto Twit Frameworkem ? 
(což je v pořádku, vše má svůj začátek)
Deš na to spatně synku, pokoušís se přizpůsobit BStrap na tvoji stránku, udělej to naopak
, typuji první zkušenost s tímto Twit Frameworkem ? 
(což je v pořádku, vše má svůj začátek)
s HTML pracuju sotva rok, a aj to tak že 2x za mesiac sa tak pol hodinku povenujem a nič viac...
s bootstrapom pracuju len chvilku asi tak 2 mesiace (pri rovnakej aktivite cca hodina za mesiac) takže čistého času tak cca 2 hodiny,...
ostatne teraz riešim ešte jak nahradiť ten calc,...
potom chcem ešte riešiť ako spraviť to aby stránka kdyby sa mala zobraziť na šírku pod určitú velkosť aby nachádzalo všetko pod seba, nič nebolo vedla seba a to v poradí hlavička, menu, obsah, right-sidebar a až potom copyright. (klasika)
skorej vlastne potrebujem spraviť plne funkčnú web stránku bez bootstrapu až to bude hotové pak budu rešiť bootstrap (i když vím že pak to budem musieť tak polku vecí zmeniť)
Mohu se zeptat, proc jsi zvolil BStrap ? Zkousel jsi jiz samotny javascript?
Slysel jsi jiz o Japonsky Rail nebo Ruby ?
Na to ti staci jen CSS, "určitú velkosť" to uz snad nastavit umis (muzes take nastavit MAX a MIN velikost), "aby nachádzalo všetko pod seba" uz jsi v CSS zkousel ci pracoval s { block, diplay, float, aligne .. } ?
s javascriptom som skušal len par drobností, ale nič také ako rozloženie webstránky som s ním neriešil,...
v css iba s alignem,.. s block a display som ešte nepracoval. o min a max velkosti viem že neco také existuje ale zatial som to nejak moc neriešil, iba neco s tým jednou skúšal.
Bootstrap som zvolil lebo vraj s ním jde nejlíp ameniť rozloženie v závislosti na velkosti a je tam vraj nejvíc možností aj ked je to náročnejšie. (aspoň ja tak viem, ak sa mýlim oprav ma)
Jak chces vic objektu (BLOCK) tak zkus vyjit z :
to mi asi nepomôže když mám částečne pružný laylout pak mi to nehodi pri zmenšení šírky pod seba ale zmenší tie prvky, nie? ostatne ja chci docieliť to aby som napríklad lavé menu a pravý stĺpec mal na pevno šírku 200px a 150px, stredný byl pružný a využil by zvyšok medzi týmito stĺpacami, do vtedy než by prekročila web stránka nižšiu šírku než napríklad 600px a pak by to hodilo podseba všetko, nechci aby pri nejakej šírke byl v jednom riadku menu a obsah napravo od menu, a pravý stĺpec pod lavým menu. Snaď chápeš čo chcem docieliť. Zároveň skrolovať by šiel iba obsah (div id="obs") a ostatok bylo statické. a nemenily by pozíciu, tam taky som pozeral žeby bol odobré využiť "position. fixed;"
Ano, ale mým cílem nebylo napsat cód za tebe, ale k uvědomeni, že než přejít na BStrap a zkoušet 'co to udělá', pochopit správně HTML/CSS, tak jak jeho zakladni prvky, jelikož a vidíš sám, nahodná integrace kódu nedopadá dobře
Tak v CSS deklaruj jak ma v urcité velikosti vypadat, s deklaraci typu :
''V zaklade, WEB stranky se minimalne delaji na 3 rozliseni :
- DESKTOP
- TABLET
- MOBILE
TYPU
''nekdy i na odkaz jako < .. href="m.css" /> opravdu napsané jen na specifické rozlišeni, třeba pro mobil. Tudiž si musíš položit otázku ne jak bude vypadat v 600px, kde jestli odpovída velikosti zobrazení treba takovy tablet, tak mu přidás třeba "Jestli ma rozliseni 600px : TED SE BUDE CHOVAT PODLE href="tablet.css", nikdo si nebude hrát a zkoušet jestli se ti obrazek bude natahovat, jde jen o příklad, neber hned vše doslova.