DIV presahuje floatovany element

Fórum › CSS

Jan

~ Anonymní uživatel
~ 187 příspěvků

15. 5. 2017 #1

Ahojte,

v ramci jedneho kurzu mam nieco ako domacu ulohu. Mal by som vytvorit nieco taketo:

https://d17oy1vhnax1f7.cloudfront.net/items/3Q3B0N0y1w1w1Z2G3N3M/blog-3.png a malo by to byt pomocou floatov.

Momentalne mam:

<body>
		<header>
			<h1>DARING FIREBALL</h1>
		</header>
		<main>
			<aside class="navigation">
				<ul>
					<li><a href="#"></a>ARCHIVE</li>
					<li><a href="#"></a>THE TALK SHOW</li>
					<li><a href="#"></a>$2.99 - VESPER</li>
					<li><a href="#"></a>PROJECTS</li>
					<li><a href="#"></a>CONTACT</li>
					<li><a href="#"></a>COLOPHON</li>
				</ul>
			</aside>
			<article>
				<header>Tim Cook: "I'm Proud to Be Gay"</header>
				<h1>Tim Cook, writting in Bussinessweek</h1>
				<div class=articleContent>
					<p>Caramels ice cream liquorice ice cream chocolate cake donut cookie bear claw. Cookie chocolate cake pie fruitcake sweet. Gingerbread powder liquorice croissant tiramisu donut. Macaroon macaroon candy marshmallow jujubes jelly brownie halvah.</p>

					<p>Ice cream muffin chocolate chocolate cake cupcake pie chocolate cake. Cookie sugar plum lemon drops cake I love I love. Pudding jelly-o pie lemon drops oat cake. I love soufflé jelly beans.</p>
				</div>
			</article>
		</main>
		<footer>
			
		</footer>
	</body>

body{
	width: 60%;
	margin: 0 auto;
}

.navigation{
	float: left;
	width: 15%;
	outline: 2px solid green;
}

.navigation ul{
	list-style-type: none;
}

article header{
	color: red;
}

article h1{

}

article .articleContent{
	border-left: 1px solid black;
	outline: 2px solid red;
}

Vysledkom je nieco taketo:

Připojen obrázek.

Problem je ten, ze ten cerveny div "overflowne" ten zeleny a ten lavy border ktory sa tam snazim vykuzlit je tym padom uplne vlavo. Problem je asi ten, ze ak to chapem spravne, floatovany element sa umietnuje relativne, resp stale ostava v document flowe.Riesenim by bolo floatnut ten cerveny div vpravo a nastavit mu sirku. Je to spravny postup, alebo sa to da robit inteligentnejsie ? Mam totiz radsej ked sa veci nastavuju automaticky a dopocitavaju sa nez im nastavovat nieco napevno.

Dakujem

Nahlásit jako SPAM

IP: 188.167.92.–

weroro0

Návštěvník

15. 5. 2017 #2

article {
    margin-left: 15%;
}

To čo vidíš je vlastnosť obtekania. Ak nechceš aby bol floatovaný element obtekaný, tak je potrebné nastaviť textu/elementu, ktorý by inak floatovaný element obtekal margin-left s min hodnotou šírky floatovaného elementu.

Nahlásit jako SPAM

IP: 91.235.54.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

Jan

~ Anonymní uživatel
~ 187 příspěvků

15. 5. 2017 #3

#2 weroro
Ok, toto riesenie sa mi paci a funguje :-) Dakujem

Akurat som uplne nepochopil tomu co si myslel tym, ze je to vlastnost obtekania. Je to trochu matuce, pretoze text sice floatovany element obteka, ale s divom ktory ho obaluje sa nepohlo ...

Nahlásit jako SPAM

IP: 188.167.92.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

16. 5. 2017 #4

Div ma automaticky sirku auto. To prebira 100% nadrazeneho elementu strukturovane nahoru az po body/html, ktere ma pevne nastavenou sirku podle velikosti okna, pokud nema pres css jinak.
Kdyz floatujes, tak nastava nekolik problemu. Floatuji se vetsinou elementy s sirkou, treba fotky. Tam se to udela ok. Pak nekdo vymyslel, ze chce i obtekani textu a tam to zvorali a dodnes si s tim prohlizece neumi spravne poradit (krom tech starsich, tam uz se s tim autori poprali).
Text z toho divu ti to obteka. Z toho divu je ukrojeno z jeho vnitrniho pole, kam se pres css nedostanes. Ten text mas na vice radcich i pod tim menu. Jenze, kdyby i div obtekal, tak text bude cely i pod obrazkem vpravo. Takze div neobteka a tudiz jsou jeho okraje stale stejne.
No, a ted je otazka, co chces udelat. Chces aby i text pod obrazkem byl vpravo? Tak musis kolem divu vztycit margin nebo mu nastavit sirku + mozna ho tez i zfloatovat.

Myslim si, ze to funguje takto. Obal vnejsek div, obal vnitrek div, textove bloky slov floatovane. Cili, slovo je jako float a kdyz presahne konec radku, tak se spravne zalomi na dalsi radek. U vnejsu nastavujes marginy a border, u vnitrku paddingy. Ale pres css se na kazde zvlast neda dostat, jen jako celek. Coz je dost napikacu, protoze pak vznika ruzne nepredvidatelne chovani (protoze ne kazdy autor prohlizece spravne pochopil, jak to ma naprogramovat, aby se to chovalo predvidatelne).

Nahlásit jako SPAM

IP: 2001:718:2601:26c:f5f7:fd...–

Jan

~ Anonymní uživatel
~ 187 příspěvků

16. 5. 2017 #5

#4 peter
Dakujem :-)

Musel som si to precitat 3x kym som to celkom pochopil, ale uz tomu rozumiem. Tiez rozumiem tomu, ze CSS by si mozno zasluzilo "reformovat" :D

Este raz vdaka.

Nahlásit jako SPAM

IP: 188.167.92.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

16. 5. 2017 #6

Ono, kdyz css navrhujes na papire (to je pripad w3c) a nedelas primo prohlizec, programovy kod, tak se lisi od realu. A strasne blbe se promita papirove reseni do programu slovo od slova. Lepsi je udelat podle neho program a pak doplnit.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:5df0:50...–

← Zpět na seznam vláken ← Zpět do Fóra