Na megjottem megint.

Kovetkezo temakorom a betutipusok.

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Ez az en olvasatomban 4 betutipus jelent.
Na de kicsit bovebben?

Specifikustól az általánosig tartó felsorolásos megadási mód. Mit töltsön be a böngésző az elérhető font készletből.

Ez első konkrét betűtípus (Helvetica Neue),
majd betűtípus család (Helvetica vagy Arial),
végül talpas (serif) vagy talpatlant (sans-serif).

Bootstrap tesz nekem ::before es ::after elementeket egy olyan helyre, ahova nem szeretnem.
Milyen modja van ennek a felulirasanak?
Vagy inkabb keruljem itt a bootstrapot?
Konkretan pagination-t hasznalok egy lista utolso elemekent, de nagyon szethuzza ezekkel a pszeudo elementekkel.

Ez így elég tág azért

Meg kellene nézni, hogy milyen selector rakja rá neked azokat az after és before elementeket, és pontosan mit csinálnak. Nem a clrearfix véletlenül?

::before
<ul class="pagination">
....
</ul>
::after

::before

bootstrap.js
.pager::before{
display: table;
content: " ";
}

Az after nem zavar, viszont ez a before nagyon rossz helyen van.
Egyszerubb lenne mas megoldast keresni?

[ Szerkesztve ]

Egyelore ezt most kicsit felreraktam, mert nem egeto a dolog.

Masik:

Ez lehetseges, hogy bootstrap rakja ra a display:none -t?
Mert nem kellene neki. Ha nem, akkor magentonak utkozhet valamijevel.

Egyelore css-bol felulirtam, de akkor is fura.

DeveloperToolban látod hogy melyik tulajdonság melyik CSS szabályból jön, így hamar kiderül, honnan származik.

but without you, my life is incomplete, my days are absolutely gray

JS dobja ra, csak kerdes, hogy melyik es miert. Feltetelezhetoen nem a BS, mivel dokumentacio szerint hoztam letre az elementeket.

Korabban volt mar ilyen problema, arra talaltam egy ilyet:
if (Prototype.BrowserFeatures.ElementExtensions) {
var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
var disablePrototypeJS = function (method, pluginsToDisable) {
var handler = function (event) {
event.target[method] = undefined;
setTimeout(function () {
delete event.target[method];
}, 0);
};
pluginsToDisable.each(function (plugin) {
jQuery(window).on(method + '.bs.' + plugin, handler);
});
};

Sziasztok,

Tudnátok ajánlani valami jó átfogó CSS könyvet Nem feltétlenül kezdőknek? Angol nyelvű kéne, minőségi, tehát kérlek a tanuljunk meg css-esul 24ora alatt tipusuakkal kimeljetek :-P köszi

Esetleg itt érdemes szétnézned: CSS Tricks - Bookshelf. Ha már ők ajánlják olyan rosszak nem lehetnek.

but without you, my life is incomplete, my days are absolutely gray

Én ezt nagyon tudom ajánlani.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

sziasztok!

van két divem, ami egymásba van ágyazva:
<div id='window'>
<div id='border'>
...
</div>
</div>

css:
#winow {
width: 1200px;
min-height: 300px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
padding-bottom: 2px;
border-radius: 5px;
border: solid 1px gray;
padding:5px;
background: linear-gradient(to top, #C4C4C4 0%,#FFFFFF 100%);
box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
z-index: 1;
}

#border {
width:-webkit-calc(100% - 22px);
width:-moz-calc(100% - 22px);
width:-o-calc(100% - 22px);
width:calc(100% - 22px);
margin:5px 5px 2px 5px;
min-height:-webkit-calc(100% - 35px);
min-height:-moz-calc(100% - 35px);
min-height:-o-calc(100% - 35px);
min-height:calc(100% - 35px);
border:solid 1px gray;
border-radius:3px;
padding:5px;
box-shadow:1px 1px 0 0 rgba(255,255,255,0.8);
}

A gond az, hogy a "border" height, nulla értéket kap, nem veszi fel a "window" div magasságát. Viszont ha sorok kerülnek a border divbe, és az meghaladja a minimum magasságot, akkor a window igazodik.

Biztos gyorsabban kapsz konkrét választ, ha felraksz egy példát jsFiddle-re.

Sk8erPeter

Sziasztok!

A következőben kérnék segítséget.
Adot egy oldal, nnek szeretném most elkészíteni egy mobilbarát változatát.
Próbáltam átírni a css-t, de szétesik az oldal. Hogyan kéne megírnom ezt a részt? Előre is köszi

A:link{
text-decoration: none; color: white;
}
A:visited{text-decoration: none;
}
A:active{text-decoration: none;
}
A:hover{text-decoration: none; color: yellow;
}

body{
margin:0;
padding:0;
line-height: 1.5em;
}

em{
font-size:x-large;
}

red{
color: #FF0000;
}

#maincontainer{
width: 1024px;
margin: 0 auto;
background: #000000;
}

#header{
height: 80px;
background-image:url('fejlec_hatter.jpg');
}

#header h1{
margin: 0;
padding-top: 10px;
padding-left:128px;
color: #FFFFFF;
font-family:'Arial';
font-weight:lighter;
text-shadow: 3px 3px 1px #000000;
}

#header h2{
margin: 0;
padding-top: 10px;
padding-left:128px;
color: #FFFFFF;
font-family: 'Arial';
font-weight:lighter;
}

#header h3{
margin: -52px;
padding-left:800px;
color: #FFFFFF;
font-family: 'Arial';
font-weight:lighter;
}

#header h4{
padding-left:750px;
padding-top:37px;
color: #FFFFFF;
font-family: 'Arial';
font-weight:lighter;

}

#contentwrapper{
float: left;
width: 100%;
}

#leftcolumn{
float: left;
width: 512px;
color: #FFFFFF;
}

#contentcolumn{
margin-left: 512px;
color: #FFFFFF;
font-size:14px;
}

#vlinetwo{
height: 40px;
}

#vlineone{
height: 20px;
}

#footer{
height: 80px;
clear: left;
background-image:url('lablec_hatter.jpg');
}

#footer h5{
margin: 0px;
color: #000000;
font-family: 'Arial';
font-size:14px;
padding-top: 40px;
padding-left: 15px;
font-weight:lighter;
font-variant:small-caps;

}

td{
/*<!-- color:#F0F;-->*/
font-family: 'Arial';
font-size: 14px;
white-space:pre-line;
padding-left: 32px;
/* text-align:justify;*/
}

/* tr{font-family: 'Arial';
font-size: 20px;
white-space:pre-line;
padding-left: 32px;
text-align:justify;*/
}

p{
/* color:#F0F;*/
font-family: 'Arial';
font-size: 14px;
width:450px;
text-align:justify;
}

Ezt így senki nem fogja megmondani neked, kérlek tegyél fel erről egy példát ide és majd az alapján tudunk segíteni. Ezt viszont nem nagyon értem: padding-left:800px; elég indokolatlannak tartom ilyen szintű behúzást alkalmazni.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

csak a css részét rakjam fel?

Nem, komplett és konkrét példát, amiből látjuk, mit szeretnél megoldani.

Sk8erPeter

Ez például kapásból fail:

/* tr{font-family: 'Arial';
font-size: 20px;
white-space:pre-line;
padding-left: 32px;
text-align:justify;*/
}

Kikommentezed a blokk kezdetét, a végét meg nem... Persze valszeg nem ez a baj, de ahogy a többiek már írták is, így nem fog tudni segíteni senki. JsFiddle.

but without you, my life is incomplete, my days are absolutely gray

Felraktam
[link]
Szóval a gond, hogy mobilon azt szeretném elérni hogy úgy jelenjen meg hogy minden div egymás alá kerüljön, kijelző szélességeben.

Tessék egy alap reszponzív (mobilbarát) megoldás. A végére raktam be külön a kódot, gondolom egy másik fájlba akarod majd belerakni.

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

Ezer köszönet, a már meglévő css fájlba raktam be az gond?
Ti egyébként milyen felbontásra állítanátok be a mobil nézetet, nekem 800px nél kisebbre van.

Én ezeket az értékeket szoktam használni, de nem tudom mennyire mérvadó.

/*Mobil nézet*/
@media screen and (max-width: 1024px){}

/*Mobil álló nézet*/
@media screen and (max-width: 480px) and (orientation:portrait){}

/*Mobil fekvő nézet*/
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation:landscape){}

/*Tablet álló nézet*/
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation:portrait){}

/*Tablet fekvő nézet*/
@media screen and (min-width: 801px) and (max-width: 1024px) and (orientation:landscape){}

/*Desktop nézet*/
@media screen and (min-width: 1025px){}

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

Sziasztok,

Csinált már esetleg valaki olyasmit, hogy görgetés hatására háttérszínt változtaott a body? Grátiszként úgy, hogyha a görgetés megáll, és nem értünk el A-ból B ontba (mondjuk 2 section közt van egy elválasztó tér és ott) akkor a színátmenet is megáll az aktuális állapotban. Tehát fehérből nem fekete lesz azonnal, hanem valahol a szürke környékén.

Mint pl. itt.

[link]

https://wpszaki.hu - Minden, ami WordPress, cikkek kezdőknek és haladóknak.

Köszi, otthon kipróbálom!

Sziasztok!

Segítséget szeretnék kérni...
Egy formanyomtatványt kellene csinálnom amibe rendezni szeretném a kitöltendő sorokat: kitöltendő sor szövege, majd a kitöltendő részt aláhúzni: [link]. A lényeg az lenne, hogy az aláhúzást megjelenítő divet kéne igazítanom a jobb oldalra úgy, hogy a div eleje igazodjon a szöveg végéhez, a vége pedig a content div jobb széléhez. Van erre valami megoldás, hogy ne úgy kelljen beviteli mezőnként kiszámolnom?

köszönöm!

Olyan helyzetre van valami megoldás css-ben, hogy egy divnek, amibe a tartalmat jelenítem meg, változó magassága van, de nem szabad, hogy nagyobb legyen a böngésző ablak kiindulási magasságánál.

Sziasztok!

Egy elég alap dologban szeretnék segítséget kérni
Van egy div-em amiben vannak további div-ek.(Elég gyakori eset )
Az a problémám, hogy a külső div magassága nem növekedik a belsőkkel együtt, szóval ha egy belső magasabb, az egyszerűen kijön belőle. A külső height értéke 100%. Milyen kapcsoló van még amiről nem tudok?

Dell G3 3779 || Samsung S23+ || Samsung Watch 5 Pro || Oculus Quest 2 || Creality Ender 3 V2

Fejből nem ugrott be hirtelen semmi, de ez az SO-s hozzászólás eszembejutatta. Nincs float valamelyiken?

Let's begin, de gozaimasu!

Nézd, hiszem hogy jsfiddle példa (vagy varázsgömb) nélkül ezt így senki nem fogja tudni neked megmondani.
Ugyanakkor arra is komoly esélyt látok, hogy miközben veszed a fáradtságot a jsfiddle példa megcsinálására, magadtól is rá fogsz jönni a megoldásra.

Én kérek elnézést!

Ilyenre gondolsz: [link]?

Próbáld meg a külsőt height: auto; tulajdonsággal.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

height: auto;
max-height: 100vh; (viewport height)

Des1gnR: ez biztos a float miatt lesz, vagy ne legyen egyiken sem megadva, vagy mindegyiken legyen.

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

köszi szépen! viszont most láttam, hogy egy fontos adatot kihagytam... a div vízszintesen középre van helyezve, fölülről 70px-re van a böngésző ablakban, alul pedig minimum 50px távolságnak kell lennie.
Itt van a forrás részlet: [link]
Egyébként a belső divnek a túlfutása lefele nálam is fennáll... azért van a workContentData magasságának 423px adva, míg a külső divnek 500px az eredeti megoldás szerint.

Mármint így gondolod? Így addig nem fut túl az ablak magasságán a ttartalom, amíg el nem éri a megadott minimális méretet.

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

Köszönöm mindenkinek, a height: auto; megoldotta

Dell G3 3779 || Samsung S23+ || Samsung Watch 5 Pro || Oculus Quest 2 || Creality Ender 3 V2

köszönöm! igen erre gondoltam.

Sziasztok!
Van 3 div -em amik gombok lesznek, hogyan tudom őket a legegyszerűbben arányosan elosztani az oldalamon?

Hasonló pozíciónálós kérdésem: egy 50px magas div a fejléc ezen szöveget hogyan rakjak vertikálisan középre, ha ugye nem tudom milyen magas?

Így próbáltad már?

Szerk:
Hogy arányosan? Szélességre, vagy magasságra?

[ Szerkesztve ]

pcmodding.hu | PC MODDING | Minden, ami modding, verhetetlen árak.

Csináltam pár példát gyorsan, mert én sem értem teljesen a kérdésedet.

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

Elnézést ha rosszul fogalmaztam a kérdést, viszont a válasz tökéletes, erre gondoltam

Sziasztok, olyan megoldást keresnék amivel tetszőleges ikon köré tudnék egy kerek bordert csinálni. Magyarán nekem egy olyan komponensre lenne szükségem ami egy ikon-t csinál ami körül van egy kör. Ilyesmire gondolok.
Az ehhez használt markup:

<span class="error-icon notification-icon icon"></span>

Az ikon bizonyos css szabályok következtében a ::before-ra kerül bg url-ként. De nem is ez a lényeg, valami megoldást szeretnék hogy az ikon mindig középen legyen, az ikon és a border között mindig legyen padding stb.. Tud valaki ebben segíteni?

Tessék egy konyhakész megoldás, csak a background-image-et kell cserélni.

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

CSS nyilak létrehozásával próbálkozom, sikerült is, csak egy kis magyarázat hiányzik nekem hozzá. Nem értem miért szükséges a containernernek relative position és a nyílnak absolute. (ezekkel a position-ökkel mindíg gondban voltam ) Továbbá az inline-block megjelenés sem tiszta teljesen, hogy miért szükséges.
Ez alapján dolgoztam: http://html-tuts.com/css-arrows-up-down-left-right-triangle/

Szia!

A gombra megadott relatív pozíció azért kell, hogy az ő child elemének számító after, before elemeket hozzá képest tudjuk igazítani. Az abszolút pozíciójú nyilakat így tudjuk bárhova igazítani a szülő eleméhez képest.
Pl. itt a nyilat a szülő eleméhez (tehát a gombhoz képest) a bal oldalra (100%-nyit eltolva) és a közepére igazítjuk:

right: 100%;
top: 50%;
margin-top: -10px;

Itt olvashatsz róla többet is.

Az inline-block formázás a gombok egymáshoz képest megadott pozíciójához (pl. vertical-align: bottom) szükségesek itt valószínűleg.

[ Szerkesztve ]

Nihil Novi Sub Sole /::\ https://bit.ly/2R7gwB2

Köszönöm a segítséget