Diskuze: Speciální rozvržení webu - CSS
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Ten navrh je spatne. Prepracuj jej.
Nemuzes nechat blok obsahu necim obtekat, co nema stejnou sirku. To je
neudrzitelne.
Realizovat by to asi slo, pomoci float nebo position, ale brzy zjistis, ze je to
uplne napikacu.
Nejsem si jisty, zda float a position v bootstrapu by to dokazala nejak udelat
Mno. Napadlo mne, ze by tam slo dat fake bloky, pruhledne a nechat je
floatovat vpravo. A pravou stranu bych tedy napozicoval.
Nebo bych to udelal jako obrazek na pozadi.
Mozna by to slo udelat tak, ze das blok s tlacitky. Floatnes ho right a ty
tlacitka uvnitr taky, a nastavis jim margin.
Ale bude s tim prave strasna drbacka a jen doufas, ze to nejaky prvek, jako
tabulka nebo neco jineho, co pretece, nerozsype
Takhle, rozdelis si to na 2 sloupce. Nastavis -md- margin, pading a jine
veci. Po sem je to jasne.
Nastavis is pravy sloupec, obrazky na pozadi nebo normalni css.
Do leveho sloupce pridas 3 bloky, ktere pri -md- budou floatovane, prazdne.
Jenom kvuli tomu, aby to odskakoval text. Je to takove harakiri, ale nic lepsiho
mne nenapada.
Bootstrap je zkratka krabicovy layout. Chces krabici, bude to fungovat dobre.
Chces mit vsechno rozlitane nahodile po obrazovce, tak hodne stesti
Druha moznost je, resit to pres to position:relative. To by fungovat mohlo a mohlo by to byt i obtekane. Ale je treba si pripsat vlastni css kod.
Ukaz, celkem by mne to zajimalo. Mne se vcera vzdycky podarilo neco. Bud jsem
mel floatnute ty obdelniky a tex mi sel pres ne. Nebo je obtekal, ale pak se mi
nepodarilo udelat to odsazeni. A nebo nebyli pod sebou
Respektive, takto, problem je ta leva cast, ze ma floatnute ty spodni tlacitka,
ktera obtekaji jeste to menu.
Ja bych to cele resil tak, ze content bude sloupec a menu taky a nepotkavaji se.
Float je totiz celkem nevyzpytatelny. Kazdy prohlizec to renderuje jinym
zpusobem.
Jeste mne napadlo, a to nevim, jestli jde, nastavit slova floatovana vlevo. Myslim, ze u css3 to nejak jde. Pak by to krasne obtekalo a menu by mohlo byt nefloatovane. jenom display:inline-block a treba pres position:relative nebo nejak jinak pod sebou.
<div class="row">
<div class="col-xxl-8">
<div class="contentSection">
<div class="contentText font-regular text-white" style="font-size: 23px; margin-right: 45px;" data-translation="whatIsIt">
</div>
</div>
<br>
<div class="row">
<div class="col-xl-6">
<a href="das" class="green-bg">
<button class="white-button font-regular w-100 h-100 button-reboot" style="font-size: 21px" data-translation="startButton"></button>
</a>
</div>
<div class="col-xxl-4 col-xl-6 pt-2 pt-xl-0">
<a href="das" class="green-bg">
<button class="opacity-light-button font-regular w-100 button-reboot" style="font-size: 21px" data-translation="whyThis"></button>
</a>
</div>
<div class="d-none col-xxl-1">
</div>
</div>
<div class="row mt-3">
<div class="col-xxl-3 col-sm-3">
</div>
<div class="col-xxl-5 col-sm-6">
<div class="languages opacity-dark-bg" style="border-radius: 10px;padding:10px 20px;">
<span class="pb-2 text-uppercase font-regular text-white-50 small" data-translation="selectedLanguage"></span>
<div class="row">
<div class="col mt-2">
<!--czech-->
<a>
</a>
</div>
<div class="col mt-2">
<!--english-->
<a>
</a>
</div>
<div class="col mt-2">
<!-- deustch -->
<a>
</a>
</div>
<div class="col mt-2">
<!-- slovakia -->
<a>
</a>
</div>
<div class="col mt-2">
<!-- french -->
<a>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-sm-3 ">
</div>
</div>
</div>
<div class="col-xxl-4">
<div class="rectangles font-regular benefits d-none d-xxl-block" style=" font-size: 18px;">
<a href="">
<div class="rectangle rectangle-hover mb-4" style="margin-left: -50px; margin-right: 50px;" data-translation="benefit1"></div>
</a>
<a href="">
<div class="rectangle rectangle-hover mb-4" style="margin-left: -85px; margin-right: 85px;" data-translation="benefit2"></div>
</a>
<a href="">
<div class="rectangle rectangle-hover mb-4" style="margin-left: -120px; margin-right: 120px;" data-translation="benefit3"></div>
</a>
<a href="">
<div class="rectangle rectangle-hover mb-4" style="margin-left: -85px; margin-right: 85px;" data-translation="benefit4"></div>
</a>
<a href="">
<div class="rectangle rectangle-hover mb-4" style="margin-left: -50px; margin-right: 50px;" data-translation="benefit5"></div>
</a>
</div>
</div>
</div>.rectangle {
background-color: #fff;
color:#000;
border-radius: 15px;
padding: 20px 80px;
transition: 0.5s;
text-decoration: none!important;
text-transform: uppercase;
}
.rectangle-hover {
cursor:pointer;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.rectangle-hover:hover {
background: #000;
color:#fff;
transform: translate(10px,0px);
}
/** max width xxl */
@media only screen and (max-width: 1400px) {
.rectangle {
margin-left:0!important;
margin-right: 0!important;
}
.rectangle {
zoom: 70%;
padding:10px 25px;
}
}
<!--link href="/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet"-->
<!--link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" -->
<!--link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" -->Se mi ve FF zobrazil pokazde nejaky mismas. Jakou pouzivas verzi?
https://mlich.zam.slu.cz/…a/index.html - to je ma verze,
jeden spany pokus
https://mlich.zam.slu.cz/…na_index.htm - tva
Jete mne napadla jedna verze, co jsem vcera mel zkusit!
https://mlich.zam.slu.cz/…/index2.html
Totiz, pokud ma obrazek spravne obtekat text, tak se to zepisuje dovnitr P.
<p>
<img style="float:left;">
<img style="float:right;">
text text text text text text text text text text text text text text text text
</p>Takze jsem to dal dobre, nastavil u col width, totez u te navigace a posunul
ji zapornym marginem ven, do prazdne oblasti. V kodu je fura veci navic, tak je
smaz.Jsem neco podobneho zminoval, ze cary mary se zapornym marginem a doufat v
zazrak Tak snad to pujde i s
temi tlacitky, to si poradis.
Kazdopadne, tve reseni mi nefungovalo. Ve Firefoxu se to nejak divne rozsypalo.
Nefunguje ti to. dej si ten text 2x a uvidis, ze ve FF se ti prekryva. Rikal
jsem ti, ze s flotem neni zadna sranda a radeji se tomu vyhybat
Ve FF jsem si zobrazil vyvojarske nastroje. Tam jde poeditovat kod. Duplikoval
jsem text. Klikl do stranky a se to zacalo prekryvat.
Takovych pokusu jsem mel vcera asi 20
Mimochodem, nevidel jsem tam ta tlacitka, jako na obrazku v zadan pod textem. Tam by to take bylo videt.
Zobrazeno 12 zpráv z 12.