Inline block - ako funguje ? – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Inline block - ako funguje ? – CSS – Fórum – Programujte.comInline block - ako funguje ? – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Jon
~ Anonymní uživatel
4 příspěvky
1. 6. 2016   #1
-
0
-

Ahojte,

snazim sa trochu preniknut do tajov CSS a tvorby layoutov a vcera som sa podla jedneho kurzu pokusil napodobnit isty web.

Bolo to velmi jednoduche, v podstate som hodil par block-level elementov pod seba a po nich nasledoval jeden <a> ktory mal vyzerat ako button. Natiahol som paddingy a zaoblil rohy a vsetko vyzeralo ok.

Za <a> som ale umietnil odstavec, ktory bol ale prekryvany tym odkazom (jeho paddingom). Patral som v zdrojakoch toho webu ako to riesia a vsimol som si, ze na <a> maju v CSS display: inline-block. Ked som to prepouzil, odstavec sa posunul pekne pod <a> element aj s padingami.

O inline-block viem, ze sa sprava ako inline, ale mozem mu nastavit block vlastnosti, ale neviem ktora jeho vlastnost toto sposobila. Asi by pomohol zdrojak, ale ten prave pri sebe nemam (som v praci). Mozem ho dodat neskor. Stranka o ktoru mi slo je tato: http://muz.li/

Nahlásit jako SPAM
IP: 94.124.145.–
Reklama
Reklama
peter
~ Anonymní uživatel
2528 příspěvků
1. 6. 2016   #2
-
0
-

No, moc to neresim. Vim, ze inline-block resi problemy s float. Jinak pouzivam spis block nebo inline.

Musel bys mit ten kod. Z tveho popisu vyplyva, ze mas <a>xxx</a> <p>yyy</p>. To by se melo za kazdych okolnosti P zarovnat pod A. Pokud do toho nesahas pres position nebo float. Ale A je za normal okolnosti inline, cili neco jako span, takze u nej v nekterych prohlizecich nepujde nastavovat padding zhora (da se nahradit line-height, font-size). A mozna i zleva a zprava (da se nahradit text-indent).

Co se tyce CSS, tak pouziti vidim u techto vlastnosti

http://mlich.zam.slu.cz/x/css/vlastnosti.htm

Grafika - barvy, obrázky, rámečky
background 	barva pozadí, obrázek
border 	rámeček
color 	barva textu

Poloha, rozměry, odsazení
margin 	odsazení - kolem rámečku
padding 	odsazení - od rámečku dovnitř
width 	blok - sířka (explorer minšířka)
height 	blok - výška (explorer minvýška)
line-height 	inline - výška (* font-size)
max-width 	blok - maxšířka (mozilla)
max-height 	blok - maxvýška (mozilla)
min-width 	blok - minšířka (mozilla)
min-height 	blok - minvýška (mozilla)
position 	pozicování
z-index 	pozicování - hloubka
top 	pozicování - z hora
right 	pozicování - z prava
bottom 	pozicování - ze spodu
left 	pozicování - z leva
float 	floatování (* position:relative)
clear 	floatování - ukončení

Text. upravy
font 	text - font
font-weight 	text - tlusté
font-style 	text - zešikmení
text-decoration 	text - podtržení
text-transform 	text - malé velké písmena AZ az, az AZ
text-align 	zarovnání na délku
text-indent 	odsazení zleva
letter-spacing 	mezera mezi znaky
word-spacing 	mezera mezi slovy
white-space 	zalamování
overflow 	přetečení přes okraj bloku

Ostatní
cursor 	tvar kurzoru myšky
list-style 	seznam UL LI
visibility 	viditelnost
display 	typ prvku inline/block/table
table-layout 	tabulka
vertical-align 	tabulka, obrázek - zarovnání na výšku
Nahlásit jako SPAM
IP: 2001:718:2601:26c:c191:bd...–
Jon
~ Anonymní uživatel
4 příspěvky
1. 6. 2016   #3
-
0
-

Dakujem za odpoved :)

Prave padding by mal v inline fungovat (mal by sa zobrazovat) vzdy, nie ? 

Inak tu som nasiel nieco velmi zaujimave. 

http://maxdesign.com.au/articles/inline/

"While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the <a> element. As you can see, it has an affect on the content on each side, but not on content above or below:"

To CSS by chcelo zjednodusit ... 

Nahlásit jako SPAM
IP: 94.124.145.–
Jon
~ Anonymní uživatel
4 příspěvky
1. 6. 2016   #4
-
0
-

Takze kod:

<!doctype html>
<html>
	<head>
		<title>Design Breakfeast</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="content">
			<h1>Designers' Secret Source</h1>
			<h2>All the design inspiration you need</h2>
			<a href="#" class="button">Stay Inspired</a>
			<p class="notes">Muzli is a new-tab chrome extension, it will become your home page, so you don’t miss anything.</p>
		</div>
	</body>
</html>

body{
	margin: 0px;
	background-color: #8fd2d2; 
	font-family: 'Open Sans', arial, sans-serif;
}

h1, h2{
	color: #ffffff;
}

h1{
	
	font-size: 3em;
}

a.button{
	background-color: #FF2178;
	padding: 20px;
	border-radius: 5px;
	color: #ffffff;
	font-weight: 800;
	text-decoration: none;
	display: inline-block;
}

p.notes{
	font-size: smaller;
}

.content{
	width: 700px;
	margin: 0px auto;
	text-align: center;
}

A vysledok: 

Připojen obrázek.

Co je spravne. Ked ale odstranim inline-block:

Připojen obrázek.

dostanem toto a to je zle.

Nahlásit jako SPAM
IP: 188.167.92.–
peter
~ Anonymní uživatel
2528 příspěvků
2. 6. 2016   #5
-
0
-

Chova se to v podstate spravne. Zkus si pridat na konec smazani marginu. To nema na paddovani zadny vliv.

h1, h2, p, a {margin:0;}

Nahlásit jako SPAM
IP: 2001:718:2601:26c:892d:bf...–
peter
~ Anonymní uživatel
2528 příspěvků
2. 6. 2016   #6
-
0
-

A dalsi kouzlo docilis, kdyz na konec pridas

a.button {z-index:-1; position:relative;}

Nahlásit jako SPAM
IP: 2001:718:2601:26c:892d:bf...–
Tomáš1230
Newbie
2. 6. 2016   #7
-
0
-

#1 Jon
Display inline-block generuje inline-level block s tým, že vnútro prvku je formátované ako blok a prvok navonok sa správa ako riadkový. (viac)

V špecifikácii CSS 2.1 som v súvisiacich častiach nenašiel žiadnu zmienku o nevplývaní vertikálneho paddingu na ostatný obsah.

Element <a> by mal podľa HTML5 špecifikácie preberať display od rodiča (display: transparent). Vo Firefoxe, IE11 i Edgi má ale stále display: inline (pričom transparent je nepoznaná hodnota).

Riešením teda je, nastavovať okrem paddingu aj line-height, alebo používať display: inline-block (ktérý má o niečo horšiu podporu).

Nahlásit jako SPAM
IP: 85.159.111.–
Flu
~ Anonymní uživatel
59 příspěvků
2. 6. 2016   #8
-
0
-

#4 Jon
Inline prvky si drží výšku řádku nehledě na paddingy, proto se ti to zobrazuje špatně a tlačítko leze do dalšího textu. Inline-block se chovají jako blokové jen se zobrazují vedle sebe a ne pod sebou jako klasické block.

To je asi nejjednoduší vysvětlení.

Nahlásit jako SPAM
IP: 93.157.132.–
Jon
~ Anonymní uživatel
4 příspěvky
2. 6. 2016   #9
-
0
-

Dakujem za odpovede. Uz som to pochopil. Ospravelnujem sa za hlupu otazku, ale som nervozny ked pouzivam nieco co neviem ako funguje :) 

Nahlásit jako SPAM
IP: 94.124.145.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×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, 8 hostů

Podobná vlákna

2 divy inline-block extra margin-top — založil Codemaster

Jak přesně funguje inline? — založil oxidián

čo je to inteprét a ako funguje?... — založil Anonymní uživatel

 

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