Hirdetés
- Idén vége lehet a Pixel 'a' szériának?
- Nothing Phone 2a - semmi nem drága
- Samsung Galaxy Z Fold5 - toldozás-foldozás
- Samsung Galaxy S23 és S23+ - ami belül van, az számít igazán
- Samsung Galaxy S22 és S22+ - a kis vagány meg a bátyja
- Százmillió Samsung telepítheti a One UI 6.1-et és a Galaxy AI-t
- Honor Magic5 Pro - kamerák bűvöletében
- Redmi Note 13 Pro 5G - nem százas, kétszázas!
- Samsung Galaxy Z Fold3 5G - foldi evolúció
- Mégsem a Samsung gyártja az iPhone SE paneleket?
Új hozzászólás Aktív témák
-
G.F.
aktív tag
Ezt a CSS resetet használom: [link]
Ez után a <p align="center"> nem igazítja középre a bekezdést, ezt értem is, meg nem is. De mit csináljak, hogy jó legyen, azon kívül, hogy kiveszem azt a css fájlt.
-gf-
-
v2izzy
tag
Hello!
Van valakinek ötlete, erre a kérdésre?
http://flic.kr/ps/MuuJU | @gerhard_berger | https://github.com/gerhardberger
-
Sziasztok!
Olyan "problémám" van, hogy tapizós kijelzőre kellene webes alkalmazást hegesztenem. Van ilyen feladathoz valamilyen kész alap CSS wunderwaffe (jó nagy designos gombok, select-ek felnagyítva, akár a görgetősávok is, ilyesmi)? A böngésző Internet Explorer 9, a jövőben csak újabb verzió várható ettől, másik gyártó böngészője nem játszik.
Köszi!
-
GG888
senior tag
válasz Peter Kiss #953 üzenetére
Mekkora tapizós kijelzőről van szó?
Fluid responsive css-t gyártanék mert a mobil-piacon is nagyon vegyes felbontások vannak.
selectet kifejezetten tré design-olni, gombokhoz meg tele van a net "css button maker/generator" vackokkal.
előre megírt mobilos template-ről nem tudok, ilyen reset-css féleségről, IE9-hez meg főleg nem.
Gradiensektől búcsúzz el hacsak nem akarsz elmélyedni az SVG-k világábanpcmodding.hu | PC MODDING | Minden, ami modding, verhetetlen árak.
-
-
GG888
senior tag
válasz Peter Kiss #957 üzenetére
Akkor gyártanék egy sima oldalt kicsit nagyobb inputokkal.
Meg a (zoomon) esetleg el lehet gondolkodni.pcmodding.hu | PC MODDING | Minden, ami modding, verhetetlen árak.
-
Zsolt1
tag
Sziasztok!
Lenne egy nagyon kezdő szintű kérdésem. Az a problémám adódott, hogy amikor a body-n belül szeretnék elhelyezni egy div-en belül egy újabb div-et, akkor mindig valamiért a legkülső div-re tudok csak margin-top-ot rakni, illetve ha a belső div-re rakok többet, akkor az a külső div-en jelenik meg szóval a belső div-re nem tudok tenni.
Igazából nem tudom mit rontok, el, de már 2 napja ezt próbálom megoldani.
Bemásolom a kódot, hátha valamit abban rontok el és nem veszem észre.HTML:
<!DOCTYPE html>
<html>
<head>
<title>div</title>
<link rel="stylesheet" type="text/css" href="div.css" />
</head>
<body>
<div class="kulso">
<div class="kozep">
<div class="belso">
</div>
</div>
</div>
</body>
</html>CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: maroon;
width: 1280px;
margin-left: auto;
margin-right: auto;
}
div.kulso {
width: 1024px;
height: 1200px;
margin: 30px auto 0px auto; <------ Itt rendesen megvan a 30px.
background-color: #74A8C3;
}
div.kozep {
width: 950px;
height: 100px;
border-radius: 20px;
margin: 30px auto 0px auto; <------- Itt nincsen, illetve ha többet rakok, akkor az a legkülsőn jelenik meg.
background-color: #CCD6F5
}
div.belso {
width: 750px;
height: 35px;
margin: 30px auto 0px auto; <------ Itt ugyan az történik, mint a középsőnél.
background-color: #323232;
}A kérdésem tehát az lenne, hogy a belső divekre miért nem tudok margint tenni?
-
Lacces
őstag
Hali,
Most van egy kis probléma, előttem valaki, hát... nem jól dízájnolt. Lásd ezt:
<td width="300">
<textarea id="teljes_nev" name="teljes_nev" style="width: 450px; height: 150px;" maxlengh="255">Az MKIK szintjén jelentkező feladatok</textarea><img id="tooltip_field_teljes_nev" src="./images/help.png" width="32px" style="display: inline-block; margin-bottom: -8px;">
</td>
<td> width=300px, még a <textarea> width=450px... és nekem van egy <img>, ami most a textarea alatt jelenik meg.
Viszont én azt szeretném, hogy a textarea mellett jelenjen meg az <img>! Persze itt a width-tel megoldható a dolog, viszont az a bajom, hogy elég sok helyen kellene akkor a templatet átírnom javítanom. És ezért kérdezem, hogy nincs-e valakinek erre valami trükkje? Hogyan lehetne az <img>-et a <input><textarea> mellé rakni?A válaszokat előre köszönöm
-
PumpkinSeed
addikt
Elég nehéz ezt így átnézni. De:
<textarea></textarea>
<img></img>
<div id="clear"></div>CSS:
textarea{
float: left;
}
img{
float: left;
}
#clear{
clear: both;
}Nagyából levezetve, hogyan is kellene megcsinálni.
"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
-
Zsolt1
tag
válasz PumpkinSeed #960 üzenetére
Köszönöm a segítséget így tényleg működik!
-
pvt.peter
őstag
Sziasztok!
Tudom, hogy nem szorosan kapcsolódik a kérdésem ehhez a témához, de:
tud vki ajánlani magyar nyelvű, jó tutorialt CSS-hez? (2.1 -hez lehetőleg)
Igen, olvastam az első posztot, tehát a weblaboros linkről van már tudomásom.Előre is köszi,
PetiEz egy .50-es rombolópuska, elég szép visszarúgással.
-
pvt.peter
őstag
válasz PumpkinSeed #965 üzenetére
Szia!
Köszi szépen, belekukkantok
Ez egy .50-es rombolópuska, elég szép visszarúgással.
-
Hege1234
addikt
ha van egy ilyen "követős" sidebar-om hogy tudok belőle kettőt csinálni ?
most a jobb oldalon van szeretnék egyet a bal oldalra is
viszont html-nél csak 1-1 oldalon szeretném használni a bal oldali sidebar-t/* Sidebar */
/* Negative top margin on sidebar pulls up header under title-area */
#sidebar {
width: 190px;
position: fixed;
margin: -28px 0 0 715px;
}
/* Title area kept above all with z-index */
#title-area {
background: white;
position: relative;
z-index: 3000;
}
/* white-fade image */
#reveal {
position: absolute;
right: 0;
bottom: -20px;
}
#sidebar {
float: right;
width:300px;
margin: -219px 0px 0px 1089px;
color: #001040;
}
#sidebar p
{
color: #FFFFFF;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 50px;
}
#sidebar li li {
border-bottom: 1px solid #002040;
margin: 0px 0px;
padding: 10px 0px;
/*border-left: none;*/
list-style: inside circle;
}
#sidebar li li a {
color: #FFFFFF;
}
#sidebar li li span {
display: block;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
padding-bottom: 20px;
font-size: 1.4em;
color: #3D2729;
}
#sidebar p {
margin: 0px 0px 40px 0px;
padding: 0px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
} -
szmegma
aktív tag
Sziasztok,
Amit kivitelezni szeretnek, hogy az alabbi HTML strukturaju kodban levo select vagy input elemre ha rakattintok, akkor a <label> elemet tudjam manipulalni.
Az alabbiak szerint probaltam, de sikertelenul:<style type="text/css">
td > .input:focus ~ td > label.title {
color: #F70;
border: 1px solid #000000;
}
</style>
<table>
<tr>
<td>
<label class="title">Time
<span class="booking-form-description">Choose a Starting Time</span>
<div class="booking-form-arrow"></div>
</label>
</td>
<td colspan="1">
<select name="starting_hour" class="input"><option value="0">Choose!</option><option value="1">1</option></select>
</td>
</tr>
</table>Koszonom.
TV: JZ1000
-
Hege1234
addikt
hogy tudnám megoldani hogy működjön más böngészőkben is ne csak firefox-on ?
chrome,ie(10),maxthon behal tőle
-
DeltaPower
őstag
válasz Hege1234 #970 üzenetére
chrome:
background: -webkit-linear-gradient(left , rgb(204, 204, 204) 0%, rgb(238, 238, 238) 50%, rgb(204, 204, 204) 100%) ;ie:
background-image: -ms-linear-gradient(left, rgb(204,204,204) 0%, rgb(238,238,238) 50%, rgb(204,204,204) 100%);amúgy [link]
[ Szerkesztve ]
"Moonshine Whiskey (70°, ízesítés nélküli) van. Fincsi" - Teebee - "De az kiírtaná az egész családomat..Akkor is ha csak én innék belőle.." - forintuser
-
Hege1234
addikt
válasz DeltaPower #971 üzenetére
-
G.F.
aktív tag
Van egy div-em, körben 5px-es paddinggal. Az a problémám, hogy ha nincs benne tartalom, akkor látszik belőle egy 10 px-es csík, ha viszont nem adok neki paddingot, akkor a bele kerülő tartalom csúnya, mert "faltól-falig" ér. Mit tanácsoltok?
-gf-
-
TomKiss
tag
Segítsetek egy kicsit, légyszi.
Eddig a weboldal minden böngészőben szépen, egységesen jelent meg. Azonban a chrome frissítése után már eltér itt az oldal a font-size beállítása.
Hogy lehetne megoldani, hogy a css-ben meghatározott "font-size: 16px" mindenhol ugyanazt jelentse, és azonos legyen e kinézet?"Nincs az a magánélet, ami ne lenne leleplezhető. A civilizált világban nem lehet titkot tartani. A társadalom olyan, mint valami álarcosbál, ahol mindenki eltitkolja az igazi személyiségét, de rejtőzködés közben lelepleződünk."
-
TomKiss
tag
Ok, de semmi garancia, hogy a következő update megoldja a problémámat, és addig is kezdeni kéne valamit a dologgal
"Nincs az a magánélet, ami ne lenne leleplezhető. A civilizált világban nem lehet titkot tartani. A társadalom olyan, mint valami álarcosbál, ahol mindenki eltitkolja az igazi személyiségét, de rejtőzködés közben lelepleződünk."
-
Muton
addikt
heló!
vannak egy panelen soronként elemek: egy block: egy text és mögött egy input mező . a blockra azt mondom, hogy display: block, így szépen soronként jelenik meg minden.
azt hogy tudom megcsinálni, hogy berakak egy divet a jobb felső sarokba (piros), és hogy a az adott block, ami mellette van, az rövidebb legyen, míg ami alatta, az hosszabb (kék)?
Muton#2316 - $z@r a drop >_<
-
LonGleY
veterán
Az (is) a 32-es Chromium hibája lehet, hogy egy rendes Google font olyan szőrös, töredezett Chrome és Opera alatt, mint az atom? Firefox és IE alatt működik rendesen a szövegsimítás.
-webkit-font-smoothing:antialiased;
1. Van erre valami workaround?
2. Fontfüggő a dolog?
3. Várjuk a javítást?..[ Szerkesztve ]
-
laracroft
aktív tag
Sziasztok!
Van egy kis kép pozicionálási problémám!Van egy oldal ahol, ha szöveg fölé megyünk az egérrel, akkor megjelenítem a rekordhoz tartozó képet és egyéb leírást! Ott ahol ez kifér nincs is gond, viszont a táblázat alján a megjelenített kép "alá csúszik" a másik táblának és így az kitakarja. Itt van 2 kép, hogy ti is lássátok:
Jól néz ki
Nem néz ki jólAzt szeretném elérni, hogy a kép mindig a szöveg előtt legyen!
Itt rá vonatkozó css forrása:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
border: 1px solid;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}Itt pedig a php:
<td><a class="thumbnail" href="#"><?php echo $megnevez ?><span><img src="images/<?php echo $pic ?>" /><br /><?php echo $leiras ?></span></a></td>
Előre is köszi!
-
[pod]Diablo
őstag
válasz laracroft #980 üzenetére
Szia!
Ha esetleg itt tudnád reprodukálni a a képet,az oldalnak azzal a részével ami alá becsúszik megkönnyítené egy jó megoldás találását.Így elsőre azt mondanám neked hogy állíts be z-indexet a span elemnek is.
Remélem tudtam segíteni.
"Sült hal, Tom Jones, délutáni tea, rossz kaja, mégrosszabb idő, kibaszott Mary Poppins, LONDON!" // ...when i get sad.i stop being sad and be awesome instead...
-
csabyka666
addikt
Üdv mindenkinek!
Nem jutok semmire egy problémával, ezért a segítségeteket szeretném kérni.
Adott egy weboldal, rajta menükkel. A menükre kattintva mindig másik content-ek jönnek be. Eddig ez működik is.
Az egyik content-ben van egy form, rajta egy submit gombbal. CSS segítségével megformáztam a gombot, és a többi elemet is a form-on. Ez is rendben. Van viszont egy másik content-ben egy hasonló form, sőt, gyakorlatilag ugyanolyan, csak kevesebb beviteli mezővel. Ennek a dizájnolására a már kész CSS file-t használtam fel oly módon, hogy mindegyik elemhez vesszővel elválasztva odaírtam a második formbeli nevét.
Működik is, kivéve(!) a submit gomb esetében.Már vagy egy órája ezzel szórakozok, de egyszerűen képtelen vagyok megcsinálni, hogy ugyanúgy nézzen ki a gomb, mint az első form-on. Ami még "jobb", hogy abszolút nem is látja a böngésző, hogy bármiféle stílust is írnék a gombra. Mintha az benne se lenne a CSS-ben (az elem kivizsgálásánál sem látszik).
Találkoztatok már ilyennel? Mi lehet a probléma?
Ágdarálást, kaszálást, területtisztítást vállalok profi gépekkel! Elsősorban Zala megye és vonzáskörzete, de minden megkeresést meghallgatok. +36305633091
-
GG888
senior tag
válasz csabyka666 #982 üzenetére
szia!
A kérdéses weboldalt, vagy egy kódrészletet kaphatunk?
úgy azért könnyebben menne.
vagy jsfiddle...
pcmodding.hu | PC MODDING | Minden, ami modding, verhetetlen árak.
-
laracroft
aktív tag
válasz [pod]Diablo #981 üzenetére
Szia!
Köszi a választ, közben már más is azt ajánlotta, amit te és a z-index volt a rossz paraméter!
még1szer köszi!
-
csabyka666
addikt
No, megvagyok. Az egyszerűség kedvéért a form-okban csak 1 darab submit szerepel, és a CSS-t is csak erre a gombra írtam meg. Így átláthatóbb, de persze így sem működik.
A 2 darab form:
<div id="form1">
<form method="post">
<input type="submit" id="form1_button" name="form1_button" value="Form1 button" />
</form>
</div><div id="form2">
<form method="post">
<input type="submit" id="form2_button" name="form2_button" value="Form2 button" />
</form>
</div>És hozzájuk a CSS:
div#form1#form1_button, div#form2#form2_button{
margin: 10px 0px 15px 120px;
padding: 7px;
background: -webkit-gradient(linear, left top, left bottom, from(brown), to(#cd5050));
border-radius: 10px;
color: #fff;
font-weight: bold;
width: 150px;
height: 40px;
}A form1-nél tökéletesen működik a dizájn, a form2-nél viszont csak az alapot teszi be a böngésző. Az elem kivizsgálása sem látja (mintha meg sem írtam volna), és a console sem jelez hibát. Ha más elemeket teszek a form-okra (label, small, input...), és azoknak ugyanígy adom meg a CSS-ét, azok működnek.
Próbáltam úgy is, hogy ugyanazt a CSS-t leírom egymás után kétszer, csak másik ID-re hivatkozok, de ugyanez a probléma van akkor is. A másodikat egyszerűen nem látja.Köszi a segítséget előre is!
Ágdarálást, kaszálást, területtisztítást vállalok profi gépekkel! Elsősorban Zala megye és vonzáskörzete, de minden megkeresést meghallgatok. +36305633091
-
fordfairlane
veterán
válasz csabyka666 #986 üzenetére
egy:
div#form1#form1_button, div#form2#form2_button
helyett
div#form1 #form1_button, div#form2 #form2_button
kettő: Soha többé ne használd így az id szelektorokat. Egyrészt önmagában a button id-je is egyedi, így fölösleges parent elemeket is belevenni (de ha már parent szelektort használsz, akkor rakd be a szóközöket), másrészt ne az ID-t használd stíluskötésre, hanem a stílusokat szervezd osztályba vagy osztályokba, és a megfelelő stílust a class attribútummal alkalmazd a megfelelő elemekre. A class attribútumba szóközzel elválasztva több stílusblokkot is applikálhatsz.
[ Szerkesztve ]
x gon' give it to ya
-
csabyka666
addikt
válasz fordfairlane #987 üzenetére
Köszönöm a választ! Most próbáltam meg class-al, és úgy jó lett. Valószínűleg beleakadhatott a böngésző...
Rendben, erre figyelni fogok!
Ágdarálást, kaszálást, területtisztítást vállalok profi gépekkel! Elsősorban Zala megye és vonzáskörzete, de minden megkeresést meghallgatok. +36305633091
-
Siriusb
veterán
Világosítson fel valaki, legyetek szívesek, hogy a text-decoration-line és text-decoration-style-nak kellene-e, hogy működjön, vagy ez csak a jövő zenéje? Illetve azon kívül, hogy képként beteszek háttérnek egy hullámvonalat, van-e lehetőség szöveget hullámos vonallal aláhúzni?
-
-
Jim-Y
veterán
Sziasztok
Van egy navbarom: kép
és ez a kód hozzá:
<div class="blog-masthead">
<div class="container">
<header>
<h1>Woowie</h1>
<nav>
<ul>
<li>about</li>
<li>training</li>
<li>sign in</li>
<li class="signup">sign up</li>
</ul>
</nav>
</header>
</div>
</div>ilyen css-el:
header {
font-family: 'Roboto', Verdana, sans-serif;
font-weight: 700;
color: #727176;
text-transform: uppercase;
display: block;
}
header h1 {
font-family: 'Lobster', Verdana, cursive;
font-weight: 400;
font-size: 48px;
text-transform: lowercase;
color: #E84F4F;
float: left;
}
header ul {
overflow: hidden;
margin-top: 20px;
}
header ul li {
list-style-type: none;
float: left;
padding: 5px 10px;
}A kérdés, hogy hogyan tudnám egy szintbe hozni a linket a "logóval" ? üdv
-
Primary92
senior tag
Sziasztok!
Van egy wordpress blogom, aminek a fejlécében van egy kép, felette a cím, a cím alatt pedig egy áttetsző téglalap.
Ez a téglalap így néz ki a sablon (Hemingway) CSS-ében:
.blog-info {
display: inline-block;
padding: 30px;
background: #1d1d1d;
}Itt annyi módosítással éltem az áttetszőség kedvéért:
background: rgba(40,40,40,0.4);Így már ugye átlátszó lett. Az öröm akkor lenne teljes, ha a blokk alatti terület elmosott lenne.
Az alatta lévő képet nem lehet átlátszóvá tenni, mert böngésző ablak méretétől függően változik, illetve több fejléc kép is van, ami random változik.Van valami aránylag egyszerű megoldás az elmosásra?
-
Primary92
senior tag
keresgéltem a mask-kal kapcsolatban, és közben ráakadtam a -webkit-filter: blur(5px); megoldásra jQuery UI-val.
A blur működik, viszont nem csak a téglalapra, hanem a felette lévő szövegre is.
Erre van esetleg ötletetek? -
Primary92
senior tag
Így néz ki a wordpress sablon fejlécre vonatkozó része:
<div class="header-cover section bg-dark-light no-padding">
<div class="header section" style="background-image: url(<?php if (get_header_image() != '') : ?><?php header_image(); ?><?php else : ?><?php echo get_template_directory_uri() . '/images/header.jpg'; ?><?php endif; ?>);">
<div class="header-inner section-inner">
<div class="blog-info">
<h1 class="blog-title">
<a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> — <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'title' ) ); ?></a>
</h1>
<?php if ( get_bloginfo( 'description' ) ) { ?>
<h3 class="blog-description"><?php echo esc_attr( get_bloginfo( 'description' ) ); ?></h3>
<?php } ?>
</div> <!-- /blog-info -->
</div> <!-- /header-inner -->
</div> <!-- /header -->
</div> <!-- /bg-dark -->Ide vonatkozó css pedig:
.header-cover { overflow-y: hidden; }
.header {
background: no-repeat center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
.header-inner { position: relative; z-index: 2; text-align: center; }
.blog-info {
display: inline-block;
padding: 30px;
background: #1d1d1d;
}
.blog-title {
width: 100%;
text-align: center;
font-family: 'Raleway', sans-serif;
}
.blog-title a {
color: #FFF;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
font-size: 1.75em;
}
.blog-description:before {
content: "";
display: block;
width: 100px;
height: 2px;
background: rgba(255,255,255,0.1);
margin: 20px auto;
}
.blog-description {
font-family: 'Raleway', sans-serif;
text-align: center;
color: rgba(255,255,255,0.4);
font-weight: 300;
}Próbálkoztam átrendezéssel, de nem sikerült.
Azt a rész kellene blurosítani, ahol a .blog-info{background: #1d1d1d;} szín van. Viszont ha ide szúrom be a -webkit-filter: blur(5px);-et, akkor a szöveg is ('description' és 'title') elmosódik.
Új hozzászólás Aktív témák
- TCL LCD és LED TV-k
- Notebook hibák
- Filmvilág
- Milyen billentyűzetet vegyek?
- Intel Core i3 / i5 / i7 / i9 10xxx "Comet Lake" és i3 / i5 / i7 / i9 11xxx "Rocket Lake" (LGA1200)
- Canon EOS DSLR topic
- Vodafone otthoni szolgáltatások (TV, internet, telefon)
- Windows 11
- ThinkPad (NEM IdeaPad)
- Házi barkács, gányolás, tákolás, megdöbbentő gépek!
- További aktív témák...
- iMac 2017 27" Retina 5K CTO / i7 4.2 GHz / 40 GB DDR4 / 1 TB SSD + doboz
- iMac 2017 27" Retina 5K CTO / i5 3.8 GHz / 40 GB DDR4 / 1 TB SSD / Radeon Pro 580 8 GB + doboz
- iMac 2017 27" Retina 5K CTO / i7 4.2 GHz / 40 GB DDR4 / 500 GB SSD / Radeon Pro 575 4 GB + doboz
- MacBook Pro 14 M3 Pro, Space Black, 18 GB RAM, 512 GB SSD Bontatlan
- Lenovo ThinkPad P70 Workstation, Mobil munkaállomás, 17" FULL HD IPS, Xeon E3-1505M V5 CPU, 32GB DDR