DIV presahuje floatovany element – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

DIV presahuje floatovany element – CSS – Fórum – Programujte.comDIV presahuje floatovany element – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Jan
~ Anonymní uživatel
151 příspěvků
15. 5. 2017   #1
-
0
-

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.–
Reklama
Reklama
weroro0
Newbie
15. 5. 2017   #2
-
0
-

   

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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
Jan
~ Anonymní uživatel
151 příspěvků
15. 5. 2017   #3
-
0
-

#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
2840 příspěvků
16. 5. 2017   #4
-
0
-

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
151 příspěvků
16. 5. 2017   #5
-
0
-

#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
2840 příspěvků
16. 5. 2017   #6
-
0
-

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...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 14 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý