hali

eléggé kezdő vagyok a témában,de elkezdtem foglalkozni egy weboldallal.
úgy akarom megcsinálni,hogy van a háttérkép és a tartalom egy áttetsző keretben van benne.
ezt úgy tudom,hogy az opacity parancsal lehet megcsinálni.
úgy gondoltam kivitelezni,hogy berakok egy réteget,a rétegbe egy fekete képet és ezt a fekete képet akarom áttetszővé tenni és erre menne rá a szöveg.
ott akadtam el,ha csak simán illesztek be képet,akkor azt áttetszővé tudom tenni,de ha rétegbe rakom bele,akkor nem tudom hova kell beírni az opacity parancsot.próbáltam már több helyre,de semmi.

persze,ha van más ötlet,szivesen veszem,annyi a lényeg,hogy az áttetsző keret a lap közepén legyen.

[ Szerkesztve ]

hello!

link1
link2

ezek alapjan szerintem kell egy:
opacity: xy ertek
background-color:transparent

de nem probaltam, csak egy otlet.

some men just wanna watch the world burn...

background-color:transparent helyett background-color:#FFFFFF kell mostnezem.

(#653) szente szerintem kerdezz itt nyugodtan, legalabb masok is tanulnak a felmerulo kerdesekbol.

[ Szerkesztve ]

some men just wanna watch the world burn...

üdv!

validáltam az oldalamat viszont most így pár elem nem olyan lett mind amilyen eddig volt
konkrétan 3 reklám felület, eddig így volt:

<div align="center">a js reklám</div>

így középen volt teljesen, most viszont így próbálom, de nem jó:

<div class="kozep">a js reklám</div>

.kozep {
margin:0,auto;
text-align:center;
}

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

hello!

probalj meg fix szelesseget adni a divnek.

some men just wanna watch the world burn...

érdekes h a margin:0,mauto; formázást figyelmen kívül hagyja

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

honnan veszed, hogy figyelmen kivul hagyja?

some men just wanna watch the world burn...

Elsőként a margin esetén nem kell vessző a felsorolt "paraméterek" közé.
Tehát: margin: 0 auto;
Abban pedig igazad van, hogy nem veszi figyelembe, bár inkább úgy fogalmaznék, hogy nem tudja meghatározni.
Ilyen esetben szükséges szélességet (width:xy px;) adni a div-nek, hogy auto módon ki tudja számolni a 2 oldalról való margin értéket.

[ Szerkesztve ]

- http://pazsitz.hu -

ohhh! valóban nem kell oda a vessző

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

Ide jutottam, megoldásért kell folyamodnom, mert megbolondulok.

Tehát, adott egy 636 pixel széles DIV. Padding nincs, keret nincs. Minden létező margin és padding le van nullázva, ami csak létezik.

Van ebben a divben négy másik, egymás mellé floatolva. A belső divek 159 pixel szélesek, ez összesen 636, mint a container div.

Namármost, van, amelyik böngésző szerint 4*159=636, de van, akiknek ez a bonyolult művelet (Safari, FF) nem sikerül és a negyedik divet alátörik a többinek.

Mi a túrót lehet csinálni? Más CSS-t alkalmazzak böngészőtől függően, vagy van értelmes megoldás is?

[ Szerkesztve ]

Where do you want to go today?

tudsz linket mutatni? szerintem örököl valahonnan valami oktalanságot, esetleg a tartalma tolja szét.

"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

Most lecsupaszoltam a kódot teljesen, így műkódik...

Elkezdem újra bepakolni a contentet és kiderül, mi tolja el. Bár azt még mindig nem értem, miért jelentkezik ez másképp a különböző böngészőkben...

Where do you want to go today?

Mert máshogyan értelmezik az elemek attribútumait. Nálam is volt (van, lesz ) ilyen, általában a margin a hunyó.

Üdv!

Adott egy tartalom:

<div class="postelott"></div>
<div class="post">
<h1>Foci 2010 Szápár</h1>
<p>asdsadsadsa</p>
<p class="post-footer">
<a class="ajaxload" href="./foci-2010-szapar" class="readmore">Tovább >></a>
<span class="date">2010-09-13</span>
<a href="./kepgaleria" class="readmore">Képgaléria</a>
<a href="./" class="keszito">Admin</a>
</p>
</div>
<div class="postutan"></div>

Hozzá a css:

.postelott {
background: url(post-top.png) no-repeat 0 center;
width:630px;
height:5px;
margin: 0 auto;
}

.postutan {
background: url(post-bottom.png) no-repeat 0 center;
width:630px;
height:5px;
margin: 0 0 15px;
margin-bottom: 10px;
}

.post {
margin: 0; padding: 0;
border-left: 5px solid white;
border-right: 5px solid white;
}
.post .post-footer {
background-color: #fafafa;
padding: 5px; margin-top: 20px;
font-size: 95%;
border: 1px solid #993333;
margin: 10px;
}
.post .post-footer .date {
background: url(clock.gif) no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .comments {
background: url(comment.gif) no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .readmore {
background: url(page.gif) no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}

.post .post-footer .keszito {
background: url(icon.png) no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}

A gondom az, hogy alul nem ér össze a 2 oldalsó illetve alsó keret. Hogy tudnám ezt megoldani?

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

Van még 1 hasonló gondom.

Csak ott a két alsó felső keret között egy float:left div van, így hiába ez a sorrend:

felső -> floatos -> alsó, az alsó egyből a felső után jön és csak utána a floatos

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

alsóra kell egy clear:both

"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

Már sikerült megoldani (margin, padding játszadozással), most olyannal küszködök, hogy az aktív menüpont felett legyen egy kis kerekített kép, mint az aláírásomban található oldalon.

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

én ezt úgy szoktam, hogy van egy felső paddingja a menüpontnak, és aktívnál olyan hátteret kap, amiben benne van a felső kerekítés.

"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

Így lett megoldva:

#menu li#current {
background: url("gomb-l.png") no-repeat scroll 0 0 transparent;
}

#menu li#current a {
background: url("gomb-r.png") no-repeat scroll right top transparent;
color: #FFF;
}

Igaz nem olyan lett mint amilyet szerettem volna, de így sem rossz....

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

Esetleg így lehetne, de nem biztos:

#keret {
max-height: 100;
height: expression(this.height > 100 ? "100" : true);
}

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

szinten tipp, de egy probat meger:
#keret
{
min-height:100px;
height:auto;
}

some men just wanna watch the world burn...

hello!

css-hez:
@font-face
{
font-family:"Valami";
src:url("fonts/Valami.ttf"); //persze oda rakod, ahova akarod
}

Valami
{
font-family:"Valami";
text-decoration: none;
}

ezutan mar a font-family:"Valami"; attributummal mar mukodik.
+[link]

[ Szerkesztve ]

some men just wanna watch the world burn...

Üdv!

Kis gondom van, egy készülő oldallal van gondom. Konkrétan a keresésnél a gomb minden böngészőn máshol van.

[link]

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

floatold ki jobbra a keresés gombot és állítsd be rendesen a marginjait+a kereső div méretét, ie6 kivételével jó lesz.

"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

De akkor a float-tal jó lesz már felbontásokon is?

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

felbontástól nem szabadna függenie

"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

Hello!
Nem igazán értek a css-hez, egy oldalhoz szeretnék style-t csinálni.
Firefox stylish pluginnal töltöttem le style-t, azt szerkesztgettem kedvemre.
Azt szeretném kérdezni, ha nincs az oldalrol style fájl , azt hogyan lehetne rola menteni? Program kell hozzá, vagy hogy kell késziteni?
Köszi!

Nagyon jó Football Manager: http://www.powerplaymanager.com/r421088

Nem igazán éThető mit szeretnél.
CSS-t úgy tudsz menteni hogy nyomsz egy ctrl+u-t a firefox-ban annál az oldalnál amelyiknek le akarod menteni. Ott rámész a .css végződésű fájlra és kimásolod a stílust.

CSS-t csinálni jegyzettömbben is lehet csak úgy mentsd el hogy .css legyen a vége.

"hacsak nem jön a jó tündér break utasítás képében..."

Van a firefoxban ez a Stylish plugin, amibe weboldalakhoz lehet kész style fájlt betölteni.
Ezeket a style-okat lehet szerkeszteni is, és tuti css kóddal van készitve.
Most mentettem ki ahogy irtad de nem akar müködni.
Meg akarom változtatni az oldal háttérszinét mert az alap fehér nagyon zavar, ennyit szeretnék.

Nagyon jó Football Manager: http://www.powerplaymanager.com/r421088

A böngészőből kimásolt CSS-t beilleszted a jegyzettömbbe majd elmented úgy hogy a fájl neve .css -re végződjön. Vagy letöltheted a notepad++ és azzal is lehet CSS fájlt írni.

A háttérszín megváltoztatását valahol itt próbáld:

body {
background:#000;
}

vagy

body {
background-color:#000;
}

"hacsak nem jön a jó tündér break utasítás képében..."

És te ezt a css fájlt hova másolnád hogy azt az oldalt szabályozza?
Az egyik oldalrol van ez a fájl amiben benne van a "body" ,ezeket ismerem is mert azokat irtam át, de amit kimentek firefoxal abban ezek nincsenek benne. És ha keresek valami "body" bejegyzést és átirom, nem történik semmi, vagyis a jegyzettömbben bizonyos helyzetekben megváltoztatja a háttérszint, holott az oldal url-jével kezdödik a css.
Amit kimentek fájlba azt a Stylish-al nem is tudom hasznáni, csak a szöveget.
Nem tudom mit csináljak.

Nagyon jó Football Manager: http://www.powerplaymanager.com/r421088

Nem biztos, hogy értem a problémát, ezért elnézést, ha egészen más szinten akadtál el (bármelyiken el lehet).

Nagyon vázlatos vázlat egy lehetséges verzióra:

<html>
<head>
mindenfélék
<style type="text/css">
<!--
ide jön az összes formázás, színek, háttérképek, betűk, linkek, stb., pl ilyenek

body {
background-color: #CCC;
}

#header {
height: 200px;
}

#content {
padding: 10px 20px;
}

-->
</style>
</head>

<body> ide kerül a tartalom, logikusan elrendezve
<div id="header">
ez itt egy fejléc
</div>

<div id="content">
ez meg a honlap lényege
</div>

<div id="footer">
ez pedig a lábléc
</div>

</body>
</html>

A vastagbetűs sorok közé illesztheted be a letöltött stílusokat. DE: csak akkor fognak működni, ha összhangban vannak az utána következő részekkel, vagyis az oldal alján meg kell hogy legyen a formázott részeknek a párja, pl. a fenti #header-hez alul tartozik egy "id header", és mivel fent nincsen #footer, a lábléc nem tud szépen megformázódni. Ha a Stylish kiegészítővel facebook-formázást töltöttél le, akkor az csak facebookhoz használható. (Vagyis nem egészen, de inkább megéri vadiúj oldalt gyártani, mint kész stíluslaphoz egy tartalmi részt toldani.) A háttérszín akkor is mozdulatlannak látszik, ha teljesen eltakarja egy háttérkép (ami nem feltétlenül tűnik háttérképnek).

Gyorstalpaló: http://weblabor.hu/cikkek/cssalapjai1
Lassútalpaló: http://pcworld.hu/a-weboldalkeszito-suli-sorozat-reszei-20100601.html

"A későn megjött ész olyan, mintha meg se jött volna."

Én a "lassútalpaló"-ból tanultam a HTML és CSS kezelést. Szerintem könnyen megtanulható azon cikkekből.

"hacsak nem jön a jó tündér break utasítás képében..."

hello!

mutass kepet, vagy kodot, hogy egyertelmu legyen mit szeretnel.

some men just wanna watch the world burn...

rakhatnal a szovegbe esetleg szokozoket.

some men just wanna watch the world burn...

Generálmegoldásnak pedig ott az overflow: hidden

[ Szerkesztve ]

"A későn megjött ész olyan, mintha meg se jött volna."

p { word-wrap:break-word; }
régi böngészők nem biztos, hogy megeszik.

"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

Szeretnék egy linkre, képre a kurzort fel húzva egy buborékot megjeleníteni benne szöveggel, egyedül a pozicionálással akadt probléma. A lényeg, úgy szeretném a div-et, mintha egy fixed div lenne, viszont a szülőhöz képest kellene pozicionálni. Ja és a szülőnek a z-indexe kisebb mint a buboréknak, tehát a szülő divhez képest kinyúlhat. Mit javasolnátok erre?

www.movat.hu - http://bit.ly/2mIziA4

Nem tudom volt-e már, mindenesetre hasznos kis cikk és elég sok minden van benne.
[link]

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

Helló!
Egy div elem átlátszóságát akarom megoldani... ez már sikerült is, viszont a szöveg is átlátszó lesz vele együtt!
Ezt a porblémát hogyan lehet kivédeni?
itt a kódrészlet:
#content {
position:relative;
height:600px;
width: 100%;
margin: 0px;
padding:0px;
border: dotted 1px yellow;
-webkit-border-radius:20px 20px 20px 20px/20px 20px 20px 20px;
background-image: url("images/content1.gif");
-webkit-opacity: 0.5;
color:white;

-.-

Próbáld meg úgy, hogy a div-ben lévő szöveget becsomagolod pl. <span>-be, vagy <p>-be.
Valahogy így:

<div class="atlatszodiv">
<span class="lathatoszoveg">Szöveg</span>
</div>

Aztán a .lathatoszoveg-nek visszaállítod az opacity-jét.

[ Szerkesztve ]