- Monitortrió a Samsungtól, köztük egy 500 Hz-es QD-OLED-del
- AI-alapú felskálázót fejleszt az ultramobil piacra az ARM
- Új Vulkan implementációt hoz az Apple rendszerchipekre a LunarG
- Az OpenAI szerint Musk zaklatási kampányt indított, a bíró nem állt Musk mellé
- Kiválthatja az AI az egeret és a billentyűzetet?
- Kormányok / autós szimulátorok topikja
- Amlogic S905, S912 processzoros készülékek
- Házimozi haladó szinten
- Tuningmesterek, teszterek, figyelem! Itt a Thermal Grizzly spéci tesztpadja!
- Milyen videókártyát?
- AI-alapú felskálázót fejleszt az ultramobil piacra az ARM
- Drága lesz a terméktámogatáson túl használni Windows 10-et
- Házi barkács, gányolás, tákolás, megdöbbentő gépek!
- ThinkPad (NEM IdeaPad)
- OLED TV topic
Új hozzászólás Aktív témák
-
Louro
őstag
Sziasztok
Két napi kutatás után fordulok hozzátok.
A téma: transparency.Adott egy div. Abban elhelyeztem 3 másik div-et.
A fő div-nek beállítottam, hogy az opacity:0.3. A benne levő 3 div-nek pedig 0.7-et. Az a baj, hogy IE9 és IE10 alatt jól jelenik meg, de szinte kutya se használja már. A gondom, hogy Chrome alatt meg csak a fő div értékét veszi figyelembe. A rajta levőket a fődiv-hez állítja. Azonban, ha a fő div a kevésbé áttetszőbb (az 0.9-es értékkel bír), akkor a rajta levő 3 div átlátszó lesz.
A kódrészletek:
css:
#base {
margin-top: 40px;
margin-left:auto;
margin-right:auto;
width:1000px;
height:520px;
opacity:0.3;
filter:alpha(opacity='30');
-webkit-opacity:0.3;
-khtml-opacity:0.3;
-moz-opacity:0.3;
-webkit-border-radius: 15px;
border-radius: 15px;
background:#eee;
z-index:0;
border:2px;
}#menu-base {
position: absolute;
margin-top:10px;
margin-left:10px;
width:150px;
height:500px;
filter:alpha(opacity='70');
-webkit-opacity:0.7;
-khtml-opacity:0.7;
-moz-opacity:0.7;
opacity:0.7;
-webkit-border-radius: 15px;
border-radius: 15px;
background:#bbb;
z-index:1;
}#content-base {
position: absolute;
margin-top:10px;
margin-left:165px;
width:700px;
height:500px;
filter:alpha(opacity='70');
-webkit-opacity:0.7;
-khtml-opacity:0.7;
-moz-opacity:0.7;
opacity:0.7;
-webkit-border-radius: 15px;
border-radius: 15px;
background:#bbb;
z-index:1;
}#design-base {
position: absolute;
margin-top:10px;
margin-left:870px;
width:115px;
height:500px;
filter:alpha(opacity='70');
-webkit-opacity:0.7;
-khtml-opacity:0.7;
-moz-opacity:0.7;
opacity:0.7;
-webkit-border-radius: 15px;
border-radius: 15px;
background:#bbb;
z-index:1;
}html:
<div id="base">
<div id="menu-base">
.....
</div>
<div id="content-base">
.......
</div>
<div id="design-base">
...
</div>
</div> -
Lacces
őstag
Na még egy... középre rendezés nincsen... more-way osztályú div nem akarja középre venni az <a> tag-et. hanem balra igazítva van...
CSS:
.intro{
float:left;
margin-left:6px;
margin-right:6px;
width:31%;
}
.intro img{
padding-left:12px;
}
.more-way{
margin: 0px auto;
text-align:center;
}HTML
<div class="intro">
<h2>Teszt</h2>
<img src="design/line.png" alt="aszfalt" />
<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. </p>
<img src="design/line.png" alt="aszfalt" />
<div class="clear"></div>
<div class="more-way">
<a href="/szolgaltatasok.html">RÉSZLETEK</a>
</div>
</div> -
#895
Lacces
őstag
Dreamweaver7
#894
Lacces
őstag
válasz
Dreamweaver7
#894
üzenetére
kösz, a float:left-re sosem jöttem volna rá hogy ő a bünős.
-
#894
Dreamweaver7
csendes tag
Lacces
#893
Dreamweaver7
csendes tag
A "miniblock" osztály float:left tulajdonsága miatt a "miniblocks" azonosítójú div magassága 0 px, azért nem látszik.
A "<div class="clear"></div>" részt tedd be a "miniblocks" azonosítójú div végére így:
<body >
<div id="wrapper">
<div id="content">
<div id="logo">
</div>
<div class="clear"></div>
<div id="miniblocks" >
<div class="miniblock">
<span>Teszt1</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek»»</a></p>
</div>
<div class="miniblock">
<span>Teszt2</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. .. <a href="#">részletek»»</a></p>
</div>
<div class="miniblock">
<span>Teszt3</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek»»</a></p>
</div>
<div class="clear"></div>
</div>
</div><!-- end of content -->
</div><!-- end of wrapper -->
</body>Így már látszik a fehér háttér, kipróbáltam.
szerk: A span tulajdonságaihoz tedd hozzá a "display:block;" sort, így középre igazodik.
-
Lacces
őstag
Hát ilyet, kifog rajtam a css... (fél évig szinte alig használtam, de ez égő...)
Help kellene.1. Probléma: #miniblocks-ra nem működik a fehér háttérszín, kipróbáltam a #content-re ott megy.
2. Probléma: .miniblock span - esetében nem működik a szöveg közepre igazítása, hanem balra igazítva áll.Néztem én a Chrome fejlesztő eszközzel is, de ott nem láttam, hogy az egyik css property kiiktatná a másikat.
A válaszokat előre köszönöm. Annak mégjobban örülnék, ha valaki el is magyarázná, hogy miért jött elő ez a probléma.body{
background-color : #3A6E1B
}
#logo{
text-align:center
}
#content{
}
#miniblocks{
background-color: white;
margin-left: auto ;
margin-right: auto ;
margin-top : 30px;
width : 800px;
}
.miniblock{
float:left;
font-family: 'Abel', sans-serif;
font-size: 16px;
margin-left: 5px ;
margin-right: 5px ;
width:30%;
}
.miniblock span{
font-weight:bold;
text-align:center;
}
.miniblock p{
text-align:left;
}
.miniblock a{
}
.clear{
clear : both;
}
</style>
</head>
<body >
<div id="wrapper">
<div id="content">
<div id="logo">
</div>
<div class="clear"></div>
<div id="miniblocks" >
<div class="miniblock">
<span>Teszt1</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek»»</a></p>
</div>
<div class="miniblock">
<span>Teszt2</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. .. <a href="#">részletek»»</a></p>
</div>
<div class="miniblock">
<span>Teszt3</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek»»</a></p>
</div>
</div>
<div class="clear"></div>
</div><!-- end of content -->
</div><!-- end of wrapper --> -
Muton
addikt
Heló!
Van egy divem, abban 4 másik (label, checkbox, label2, input)
Az a feladat, hogy a label legyen a keretdivben bal oldalon, utána a checkbox, amelyek között mindig azonos a távolság (mert lokalizált a label, lehet, hosszabb, rövidebb a szöveg benne) ez megvan, marginnal csinálom.
Azt hogy lehet megadni a label2-nek, hogy mindig a keret bal oldalától pl 100 px-re legyen és ne érdekelje, hogy ebben a távolságban label és checkbox mit csinál, és mekkora? -
#889
Dreamweaver7
csendes tag
Forza_JUVE
#888
Dreamweaver7
csendes tag
válasz
Forza_JUVE
#888
üzenetére
Szívesen, amit linkeltél, az sokkal profibb megoldás, mint az enyém, köszi, könyvjelzőztem.
-
#888
Forza_JUVE
aktív tag
Dreamweaver7
#887
Forza_JUVE
aktív tag
válasz
Dreamweaver7
#887
üzenetére
Köszi mindenkinek a választ!
Úgy fest alakul a dolog, már látom azt a biz. fényt!
Még simogatom itt-ott, de az alap már működik! KÖSZI MÉG 1X!!
Közben én is találtam egy hasznos oldalt, belinkelem, hátha vkinek jól jön majd ...
Ciao
-
#887
Dreamweaver7
csendes tag
Forza_JUVE
#884
Dreamweaver7
csendes tag
válasz
Forza_JUVE
#884
üzenetére
Szia!
Nekem is van még mit tanulnom HTML/CSS terén és a kérdésedre nem tudom igazán a választ. Ha ilyesmi két oszlopos elrendezést szeretnél, amilyet írtál, gondolkodj el az alábbi megoldáson, lehet megfelel neked is.
A HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Dreamweaver7">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<title>Teszt HTML oldal</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_container">
<div id="header">
<p>Fejléc</p>
</div>
<div id="middle_section">
<div id="content_right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit.</p>
</div>
<div id="content_left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
</div>
<div class="clearer">
</div>
</div>
<div id="footer">
<p>Lábléc</p>
</div>
</div>
</body>
</html>A CSS:
body,div,html,p
{
border: none;
padding:0;
margin:0;
}
.clearer
{
clear:both;
}
#page_container
{
}
#header
{
background-color:#333333;
color:#ffffff;
font-size:40px;
height:100px;
text-align:center;
width:auto;
}
#middle_section
{
background-color:#00ff00;
margin:0 0 0 0;
}
#footer
{
background-color:#666666;
color:#ffffff;
font-size:40px;
height:100px;
text-align:center;
width:auto;
}
#content_left
{
background-color:#009900;
float:none;
margin:0 200px 0 0;
}
#content_right
{
background-color:#00bb00;
float:right;
width:200px;
}Képernyőfotók keskeny és széles ablakkal, így ugyanúgy látszik a viselkedése, mintha valamelyik oszlopba több vagy éppen kevesebb szöveget tennénk:
Az oszlopok viselkedése széles ablaknál
Az oszlopok viselkedése keskeny ablaknál
Én ilyen megoldást tudok rá, de én is még tanulom a HTML/CSS-t.
-
#885
martonx
veterán
Forza_JUVE
#884
martonx
veterán
válasz
Forza_JUVE
#884
üzenetére
Erre gondolsz: jsfiddle
-
#884
Forza_JUVE
aktív tag
Forza_JUVE
aktív tag
Sziasztok!
B.U.É.K. mindenkinek!
Kérnék egy kis segítséget CSS-ben: adva van egy html oldal, aminek van külön <div> tag-ként egy fejléce, lábléce, törzse és jobb oldala.
Az aljával és tetejével nincs is gond, de hogyan adjam meg a középső és jobb oldali <div> magasságát úgy, hogy tartalomtól függetlenül legyen 100%, vagyis pont akkora, mint a mellette levő.
Azaz ha a középső részben van mondjuk 5 bekezdés, míg a jobb oldalon semmi, a jobb oldal akkor is legyen pont akkora magas, mint a középső rész ... és fordítva szintén.Eddig a css-ben csak a float: left; ... illetve a másiknál a float: right; szerepel. A height-nek hiába adok általános adatokat, mint pl. height: 100%, vagy inherit ... nem működik.
Gondolom van erre egy tök egyszerű megoldás, én viszont még nem vagyok elég jártas ebben a html programozásban, az istennek nem tudok rájönni!
Köszi előre is.
-
#883
Dreamweaver7
csendes tag
szmegma
#882
Dreamweaver7
csendes tag
Igen, a HTML-ben lévőre, ott is az inline CSS-re, ez a sorközi, bár inline-nak nevezni jobb. A W3Schools stíluslapokkal foglalkozó oldalán sok információt megtalálsz a CSS kiértékelési sorrendjével kapcsolatban is, ajánlom elolvasni.
Egyébként lehet a HTML-ben CSS nyugodtan, csak vigyázni kell vele. Kis weblapoknál nem probléma, mert fejben tartható, mit hova tett az ember, de már egy pár oldalból álló lap esetén is érdemes inkább külső fájlba tenni. Sokkal átláthatóbb lesz és sokkal könnyebben megtalálja az ember az esetleges hibákat.
Én is jártam már úgy, hogy lusta voltam a külső CSS-be új osztályt, azonosítót adni egy-egy elemnek, hanem csak beírtam a HTML elemebe a style="" meghatározást, azután később sokáig keresgéltem, hogy ez miért is így néz ki vajon, ahogy nem kellene.
Szóval a lényeg az, hogy a programkód legyen átlátható és követhető, az elnevezések pedig kifejezőek, ezzel a későbbiekben sok munkát megspórol az ember. A W3Schools oldalt mindenképp ajánlom HTML információforrásként. Ha esetleg hozzájutsz, olvasd el a Virginia DeBolt - HTML és CSS - Webszerkesztés stílusosan című könyvet, én se vagyok még nagyon profi web fejlesztésben, de számomra is érthető volt.
Sok sikert!
Ja és Boldog Karácsonyt!
-
#882
szmegma
aktív tag
Dreamweaver7
#881
szmegma
aktív tag
válasz
Dreamweaver7
#881
üzenetére
Szia,
A HTML-bol ki fogom szedni ahogy tanacsoltad, de mit ertesz sorközi CSS felülír mindent alatt?
A HTML-ben levo CSS-re gondolsz?
Koszonom. -
#881
Dreamweaver7
csendes tag
szmegma
#880
Dreamweaver7
csendes tag
Szerintem inkább a kék keret van elcsúszva, ez relatív, de valami biztos nincs a helyén.
Az sorközi CSS felülír mindent, vigyázz vele. A HTML kódból szedd ki az összes CSS-t, helyette class és/vagy id jelölőket használj, sokkal tisztább lesz a kódod és nem jönnek majd elő nehezen levadászható hibák. Utána próbáld ki, lehet egyből megtalálod a problémát.
Egyébként h1 elemből egy oldalon csak egy darabot illik használni.
-
szmegma
aktív tag
Lenne egy vizszintesen pozicionalando problemam:
Ha az asztal felbontasat valtoztatom, akkor a kepen lathato 4 kis lilas teglalap (kurzoros) vizszintesen elmaszik jobbra vagy balra abbol a kek keretes reszbol. A fuggoleges pozicionalast sikerult fixalnom.
Mit kellene hova irnom a css-ben, hogy megoldodjon ez a problemam?Igy kellene kineznie:
Koszonom.
CSS:
html, body, div#wrap1, div#wrap2, div#wrap3 {
height:100%;
width:100%;
}
body {
background:#222222;
overflow:auto;
background-image:url('2.gif');
}
div#wrap2 {
background: url('1.gif') repeat-x 0 300px;
}
div#wrap1 {
background: url('3.gif') repeat-x left top;
}
h1 {
font-size:200px;
font-family:'Zekton.Free';
color:#222222;
z-index:2;
}
div#stuff1 {
width:1000px;
height:192px;
overflow:hidden;
margin:0 auto 0 auto;
text-align:center;
position: relative;
top:130px;
}
div#stuff2 {
width:1000px;
height:250px;
overflow:hidden;
margin:0 auto 0 auto;
text-align:center;
position: relative;
top:140px;
}
div#stuff1 div {
height:190px;
position:relative;
overflow:hidden;
z-index:2;
}
div#stuff1 h1 {
margin:15px 0 0 0;
}
div#stuff2 div {
height:70px;
position:relative;
overflow:hidden;
z-index:2;
}
div#stuff2 h1 {
margin:-180px 0 0 0;
}
* {
margin:0;
padding:0;
}
a.ss {
z-index:9999;
background-image:url('5.png');
width:21px;
height:30px;
position:absolute;
top:1px;
}
div#image2 {
position:absolute;
right:0;
bottom:0;
background-image: url('4.gif');
width:98px;
height:98px;
visibility:hidden;
z-index:50;
}HTML:
<div style="background-position: 0pt 180.011px;" id="wrap1">
<div style="background-position: 0pt 440.005px;" id="wrap2">
<div id="wrap3">
<div id="stuff1">
<div style="z-index: 43;"><h1>szoveg</h1></div>
<div style="top: -190px; left: -1px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
<div style="top: -380px; left: 1px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
<div style="top: -571px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
<div style="top: -759px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
</div>
<div style="visibility: visible; opacity: 0.39; bottom: 159.995px; right: 145px;" id="image2"></div>
<div id="stuff2">
<div style="margin: 1px 0pt 0pt; z-index: 43; color:#FF0000;"><h1>szoveg</h1></div>
<div style="top: -70px; left: -1px;"><h1 style="color:#20E1F8;" id="z">szoveg</h1></div>
<div style="top: -140px; left: 1px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
<div style="top: -211px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
<div style="top: -279px;"><h1 style="color:#20E1F8;">szoveg</h1></div>
<a style="background-position: 0pt 9.9947px; opacity: 1; left:435px;" href="1" id="link1" class="ss"></a>
<a style="background-position: 0pt 27.9947px; opacity: 1; left:519px;" href="2" id="link2" class="ss"></a>
<a style="background-position: 0pt 48.9947px; opacity: 1; left:876px;" href="3" id="link3" class="ss"></a>
<a style="background-position: 0pt 66.9947px; opacity: 1; left:936px;" href="4" id="link4" class="ss"></a>
</div>
</div>
</div>
</div> -
spammer
veterán
Nem igazán probléma, inkább kérdés, hátha másnak van tippje:
CSS animációk elvileg támogatva vannak IE 10-től, gyakorlatilag mégsem megy egy darab sem IE 10 (10.0.8250.0) alatt, még a microsoftos tesztoldal sem [link]
Gugliztam, de mindenhol azt írták, hogy IE 10 alatt már támogatott. De akkor miért nem nyikkan meg? 
Amúgy hihetetlen mekkora f0stalicska még ez a 10-es IE is, fényévekkel van a többi böngészőtől..
-
#877
SektorFlop
aktív tag
SektorFlop
aktív tag
Ha valakinek van türelme és rátudna nézni megköszönném, problémám az elsősorban, hogy IE-ben nem tartja be a %-os méretezéseket. A másik pedig, hogy chrome-ban, megjelenik egy fehér rész a lap alján... és sehogy se jövök rá hogy az miért kerül oda.
-
#876
trisztan94
őstag
trisztan94
őstag
Sziasztok!
Általában a CSS a legkisebb gondom, de a sok szerveroldal után pár dolgot elfelejtettem
Jelenleg így néz ki a "weboldal". Azt a fekete négyzetet szeretném jobb oldalra rakni, mint egy reklámsáv. Az ajax div, az az ahol a "Lorem ipsum" szöveg van. A négyzet egy <aside> tag-ban van. Így néz ki a kódom jelenleg:
#ajax
{
padding:10px;
width:550px;
}
aside{
padding:10px;
width:250px;
text-align:center;
background-color:black;
}
Itt Vannak a Main wrapper és a body stílusai is, nem tudom mennyire kell:
body
{
padding:0;
margin:0;
font-family: calibri;
}
#main_wrapper
{
margin:0 auto;
width:800px;
background-color: aliceblue;
postition:relative;
padding:10px 15px 5px 15px;
}És a kép, hogy most hogy néz ki:
Köszi!
-
#874
Siriusb
veterán
SektorFlop
#873
Siriusb
veterán
válasz
SektorFlop
#873
üzenetére
Szerintem akkor a div id=kozep-nek tegyél be egy képet háttérnek, pl. 1px vastag csík, oszt' jódidő.
-
#872
Siriusb
veterán
SektorFlop
#871
Siriusb
veterán
válasz
SektorFlop
#871
üzenetére
Nos, kicsit átszabtam a példádat. Nem tudom, melyik oszlophoz kellene igazodni a magasságnak, most a bal oldalihoz van igazítva, de ezt meg lehet csinálni a content-re is.
-
#870
Siriusb
veterán
SektorFlop
#869
Siriusb
veterán
válasz
SektorFlop
#869
üzenetére
Fel tudod rakni valahová (pl. jsfiddle) a html+css-t? Ránézünk, valaki csak megmondja a tutit.
-
#869
SektorFlop
aktív tag
Siriusb
#867
SektorFlop
aktív tag
nekem is pont ez kellene, 3 div van egymás mellet egy diven belül, és a középsőnek keret van megadva, azért az lenne szép ha mindig teljes magasságig kinyúlna a középső div, a css-es szinte megegyezett a tiéddel kiegészítettem egy-két hiányzó dologgal, de nekem nem akar összejönni.
-
Sapphi
aktív tag
Sziasztok!
Olyan kérdésem lenne, hogy adott 3 div. És azt szeretném megoldani, hogy mind a 3-nak ugyan olyan magassága legyen.
Ugye ezt meg lehet oldani, úgy hogy megadom a magasságot fixen nekik, de én nem így szeretném, hanem hogy amelyik div a legmagasabb azt örökölje meg a többi div elem is (mármint a magasságát).
Nem tudom mennyire érthető a kérdésem. De remélem van rá megoldás.
Előre is köszönöm a segítségeket!
-
#860
SektorFlop
aktív tag
Speeedfire
#859
SektorFlop
aktív tag
válasz
Speeedfire
#859
üzenetére
Én pont most szórakoztam ezzel, ennyit adtam meg neki:
#footer {
clear:both;
width: 1000px;
height: 20px;
}a többinek pedig: float: left;, position nem kell nekik. nálam egyenlőre minden felbontáson jó.
viszont ebbe segítsetek nekem, google chrome-on dolgozom, a többi böngészőn nem jeleniti meg a css belállításaim bizonyos részét, vagyis a menu css-ét. van még egy ilyen oldalam ahol használom ezeket a menü beállításokat, és ráadásul a mostanihoz csak másoltam a css-t még nem is szerkeztettem egyenlőre de úgy se. valami elkerülhette a figyelmem?
-
#859
Speeedfire
félisten
Speeedfire
félisten
Adott egy footer rész, ami jó lenne ha mindig a lap alján lenne ha teljesen legörgetem az egeret. Elég hülyén néz ki, ha az oldal közepén van. Most a tartalmi résznek adtam egy min-height 550px; értéket. Így most fullhd-nál jól néz ki, de gondolom pl 1200px magas monitornál megint nem lenne jó.
Próbáltam a position: fixed értéket is. De az sem a legjobb, mert mindig megjelenik ha kell ha nem. Van erre valami jó megoldás? -
#858
v2izzy
tag
DeltaPower
#857
v2izzy
tag
válasz
DeltaPower
#857
üzenetére
Az !important-ra nem is gondoltam. Köszi, legalább így működik!
Viszont ez azért így akkor is fura, mert akkor most ha több dolgot is változtatok az :nth-child()-ban és azokat a másik class-ban is, akkor mind után oda kell tenni az !important-ot, ami még kevésbé elegáns, mint ha csak egy elé. -
v2izzy
tag
Hello! Egy elég fura, nem is hibát, inkább viselkedést tapasztaltam az :nth-child() selector-nál.Itt a példa. Ha a két :nth-child()-os sort kikommentezem akkor megy szépen az .addClass(), .removeClass(). Viszont :nth-child()-al úgy tűnik nem. Úgy gondolom (inspector ezt mutatta), hogy az :nth-child()-os css rule erősebb, mint az .active class (ha az element-nek direktben, style-ba adom meg, akkor megy). Tehát így végül is érthető lenne, hogy miért nem működik, de számomra ez így kicsit logikátlan, pontosan ilyen miatt, mint a példa.
Lehet erre valami megoldást találni?
A választ előre köszönöm! -
#855
SektorFlop
aktív tag
SektorFlop
aktív tag
Sziasztok! IE problémáim vannak, van egy main id-vel ellátott div-em. Középre szeretném helyezni, margin: auto-val tökéletesen középre kerül minden böngészőbe, de IE-n nem igazán akar összejönni... valaki tudna segíteni?
-
MasOyama
őstag
Tud nekem abban valaki segíteni, hogy hogyan tudok egy háttérképet középre rendezni, de akkor is középre kellene rendezni, ha a felbontás kisebb, mint a háttérkép.
Mondjuk van egy 1920 széles háttérképem, és valaki 1024 ben nézi az oldalt, akkor a háttérképet ne 0 pixeltől mutassa 1024-ig, hanem kb. 448 adik pixeltől...1472 ig.
Layernél, táblázatnál csak középre helyezést találtam, nem tudom a háttérképet akár negatívba eltolni automatikusan.
-
#852
Forza_JUVE
aktív tag
DeltaPower
#851
Forza_JUVE
aktív tag
válasz
DeltaPower
#851
üzenetére
köszi
-
#851
DeltaPower
addikt
Forza_JUVE
#850
DeltaPower
addikt
válasz
Forza_JUVE
#850
üzenetére
position: fixed; bottom: 10px;
-
#850
Forza_JUVE
aktív tag
Forza_JUVE
aktív tag
Sziasztok!
Kezdő vagyok a webprogramozásban ... és hát lenne 1 pozicionálási kérdésem:
CSS-ben hogyan adjam meg a margót és/vagy a "position"-t ha azt szeretném, hogy a html tartalmától függetlenül egy amolyan lábjegyzet mindig az ablak alján jelenjen meg??
Tehát a <body> részen belül van egy <div class="footer"> és azt szeretném, hogy ez mindig pontosan a böngésző aljától mondjuk 10px -re legyen.Köszi előre is!!
-
Sonja
nagyúr
Remélem elfér itt a kérdésem?!
Chrome alatt a Stylish plugint használom, hogy bizonyos oldalakat kicsit átalakítsak a saját igényeimnek. Na nem nagy dolgokat, csak pl háttér szín változtatása fehér színről másra, esetleg betű növelése. Egy oldalon találkoztam egy ilyennel:
<div class="star-box-giga-star" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://4.bp.blogspot.com/--n_RgL3Ixh4/T0ZuCVKRjNI/AAAAAAAAADE/kOgZ1WvOOas/s1600/giga-star.png); background-origin: initial; background-repeat: no-repeat no-repeat; display: inline-block; float: left; font-family: tahoma; font-size: 15px; font-weight: bold; height: 66px; line-height: 66px; padding-right: 5px; text-align: center; vertical-align: middle; width: 66px;">7</div>
Ennek a háttér színét (background-color: white) sehogy nem tudom megváltoztatni.
Próbálkoztam több féle képpen is, de nem sikerült. Ezekkel kísérleteztem, de semmi.#star-box-giga-star { background-color: #fdf6e3 }
.star-box-giga-star { background-color: #fdf6e3 }
#star-box-giga-star .style { background-color: #fdf6e3 }
#star-box-giga-star element.style { background-color: #fdf6e3 }
#star-box-giga-star .element.style { background-color: #fdf6e3 }Hogy lehet megváltoztatni, tudja valaki?
-
#848
Speeedfire
félisten
Speeedfire
félisten
Valaki használja a border-image funkciót?
Egy border-t akarok csak bal oldalra készíteni, de valami nem tettszik neki.border-width: 10px;
border-left-image: url(http://pichost.szunyi.com/kepek/20120413-bk4rn675ds.tn.jpg) 10 0; -
#847
SektorFlop
aktív tag
DeltaPower
#846
SektorFlop
aktív tag
válasz
DeltaPower
#846
üzenetére
köszi így működik!
-
#846
DeltaPower
addikt
SektorFlop
#845
DeltaPower
addikt
válasz
SektorFlop
#845
üzenetére
height: 98%;
-
#845
SektorFlop
aktív tag
Speeedfire
#844
SektorFlop
aktív tag
válasz
Speeedfire
#844
üzenetére
nem jó sajnos:S
-
#844
Speeedfire
félisten
SektorFlop
#843
Speeedfire
félisten
válasz
SektorFlop
#843
üzenetére
position: absolute;
bottom: 0;Így az aljára fog kerülni.
-
#843
SektorFlop
aktív tag
SektorFlop
aktív tag
halli!
lenne egy olyan gondom, hogy javascript segítségével, egy átlátszó div-et jelenítek meg. terveim szerint az egész felületett be kellene teríteni mikor megnyitom.
position: fixed; top:1%; right:1%; left:1%; bottom:1%; width:auto; height: auto;
valahogyan az alját is a monitorhoz kellene igazítani. valakinek esetleg lenne ötlete?
-
#842
Speeedfire
félisten
Speeedfire
#841
Speeedfire
félisten
válasz
Speeedfire
#841
üzenetére
Na, kitaláltam valamit, de nem 100%-os.
Csináltam egy csomagoló div-et, annak megadtam, hogy relativ. Benne a kép, majd utána egy span. A span-nek be lett állítva, hogy absulute, left 0, top 0, meg a háttérkép és, hogy no-repeat. Viszont meg kell adni neki a magasságát és a szélességét is, enélkül nem jó.
Ha valaki tudja, hogy lehet még jobban megoldani akkor mondja meg, mondjuk itt is csak a vízjel szélessége és magassága a zavaró.#talalatok .row {
position: relative;
}
#talalatok .vizjel{
position: absolute;
left: 0;
top: 0;
height: 120px;
width: 160px;
background: url('vizjel.png') no-repeat;
}<div id="talalatok">
<img src="" />
<span class="vizjel"></span>
</div> -
#841
Speeedfire
félisten
Speeedfire
félisten
Hogy lehet szépen dinamikus képhez/képekhez css-el vagy jquery-vel vízjelet készíteni?
-
#839
kisho
senior tag
Speeedfire
#838
kisho
senior tag
válasz
Speeedfire
#838
üzenetére
Köszönöm!
-
#837
kisho
senior tag
Speeedfire
#836
kisho
senior tag
válasz
Speeedfire
#836
üzenetére
Köszi, működik!
És ha a keret (vagy bárminek is hívják azt, amiben megjelenik a tartalom) méretét szeretném növelni?
-
kisho
senior tag
Sziasztok!
Volna egy CSS-sel kapcsolatos problémám, amiben a segítségeteket kérem.
[link]
A fenti linkre kattintva a cikk alatt a "Kapcsolódó írások" részen ha rávisszük az egérkurzort valamelyik címre, akkor megjelenik a cikk tartalma. A probléma az, hogy nem túl esztétikus módon, mert a kép túllóg a kereten. Hogyan lehetne azt a rendelkezésre álló teret megnövelni, illetve a kép méretét csökkenteni?
Nem vagyok egy CSS guru, eddig a Firebug-gal próbálkoztam hasonló esetekben, de most használhatatlannak bizonyult. -
cAby
tag
Ejj, hibába ütköztem megint.
Tehát, a középső rész fel van osztva egy bal és egy jobb div-re.
Növekszik a div a tartalommal, az előbb említett módszerrel, csak a baj ott kezdődik, hogy a 2 div nincs egymás mellett, ha a bal oldali divnek meg adok egy float: left; et, a jobb oldali divnek egy float: right; -ot, akkor meg nem lesz jó, mert egymás mellé kerülnek ugyan, de így meg átmennek az alsó div-en.. :\itt látható: [link]
(igen, gány módon képben teszem fel a kódot, bocsi, de a lényeg így is látszik
)Erre valami ötlet esetleg?
köszi
-
cAby
tag
Áhh.. rájöttem, hogy mi a hiba.
Rájöttem, hogy ez ment nekem is (csak mikor ide írtam, vmiért azt hittem, hogy ennél a verziónál is hibát dob), ott volt a probléma, amikor a kozépső rész fel volt osztva egy bal meg egy jobb oldali div-re is.
Ilyen esetben úgy próbáltam, hogy a bal oldali div-nek adtam min-height-ot és úgy volt a rossz. Most megnéztem úgy, hogy azoknak nem adok height értéket, csak a kozepő div-nek teszem be a min-height-ot és így jó lett.Köszi a segítséget, ez kellett a megvilágosodáshoz.
üdv,
Csabi -
-
cAby
tag
Sziasztok!
Belefutottam egy problémába és sehogyan sem sikerül rájönnöm, hogyan kellene megcsinálni.
Azt szeretném, hogy egy div-nek legyen egy min-height-ja és ha több adat kerül megjelenítésre benne, akkor automatikusan növekedjen a mérete ugye.Azonban ez nem működik jól.
Így épül fel:
van egy kulső 'keret' div
ez van felosztva egy 'felso', 'kozepso', 'also' div-ekkel.
A 'kozepso' div-et szeretném dinamikus méretűre.Ha ez szerepel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> a fájlban, akkor egyáltalán nem működik.
Ha kiveszem, akkor Operában minden okés, de FF-ben, Chrome-ban, IE-ben egyáltalán nem működik, mert az 'also' divre rácsúszik a megnagyobbult 'kozepso' div.Erre van valami más megoldás esetleg?
köszi
-
Siriusb
veterán
Adott kettő darab div. float:left-tel egymás mellé rendezve. Mindkét div szöveget tartalmaz. A második div-ben a szövegben <sup> található, emiatt a két divben lévő szöveg nem egymáshoz igazítva jelenik meg, hanem a második függőlegesen lejjebb található.
Hogy lehet ezt a problémát kiküszöbölni? Az elég gáz lenne, ha jquery-vel adnék neki egy negatív margin-topot -
#822
tob!as
tag
Speeedfire
#820
tob!as
tag
válasz
Speeedfire
#820
üzenetére
Mert a span soron belül elem, nem pedig blokk elem. Akkor tudod középre igazítani, ha először azt mondod neki, hogy
display: block;
Majd ez után tudsz neki egy olyat mondani, hogy:
text-align: center; -
#821
Brown ügynök
senior tag
Speeedfire
#820
Brown ügynök
senior tag
válasz
Speeedfire
#820
üzenetére
Mert nincs olyan tulajdonsága, hogy align?
-
#820
Speeedfire
félisten
Speeedfire
félisten
Span elemnek miért nem lehet megadni, hogy középre legyen igazítva? Csak p-vel tudom ezt eljátszani?
-
#819
Speeedfire
félisten
Speeedfire
#818
Speeedfire
félisten
válasz
Speeedfire
#818
üzenetére
Mondjuk ha a base href a css-ek elé kerülne....
-
#818
Speeedfire
félisten
-
#816
Speeedfire
félisten
Speeedfire
félisten
Van egy kép a footerben ami mindig középre akar rakni, illetve szinte az összes képet középre akarja rakni.
Pedig semmi ilyen nincs hozzárendelve.
-
holinorby
tag
oksi, közben megvan a megoldás...
nade lenne még egy kérdésem...
szóval bérelhető webáruházról van szó még mindig, csak a css-t tudom szerkeszteni...
A logót 220*86 -osra méretezi a rendszer, de én 480*120-ast szeretnák használni....
a logót befoglaló kereteket már mind átszerkesztettem 480*120-ra, de a logóra nem jövök rá sehogy... képet fel tudok tölteni egy albumba szóval onnan meg lehetne jeleníteni, ha ez így megy...#header{
width: 1000px;
height:120px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding:0 6px;}
.header_left{float:left; padding:0; margin:0;width: 450px; height: 120px}
.logo {
float: left; height: 100px; width: 480px;}
.logo_placeholder{vertical-align:middle; height: 120px; width: 480px;}
.logo_placeholder a{
font-family:Bradley Hand ITC
font-size:45px;
line-height:35px;
color:#fff;
text-decoration:none;
text-shadow:0px 0px 4px;
height: 100px;
weigth: 480px;ennyi az egész ami a logo mezőre vonatkozik...
Tudtok ebben segíteni? -
holinorby
tag
Sziasztok!
Szeretnék egy kis segítséget kérni!
Van egy bérlehető webáruházam és szeretnék elhelyezni egy script kódot a fejlécben, viszont csak a css-t tudom szerkeszteni!
Az ügyfélszolgálatos mondta, hogy ha értek hozzá, akkor módosíthatom, megpróbáltam már többféle kép de nem jön be....
Tudnátok ebben segíteni?
Script kódot css-be hogyan?
-
#810
jeges
senior tag
Speeedfire
#809
jeges
senior tag
válasz
Speeedfire
#809
üzenetére
(szerk: sry, a smiley alatt a jó link)
-
#808
jeges
senior tag
Speeedfire
#807
jeges
senior tag
válasz
Speeedfire
#807
üzenetére
vagy ha jq-t használsz, próbáld meg ezt
-
#806
jeges
senior tag
Speeedfire
#805
jeges
senior tag
válasz
Speeedfire
#805
üzenetére
ie és border-image nem kompatibilisek
itt van egy lehetséges elkerülő megoldás -
#804
jeges
senior tag
Speeedfire
#803
jeges
senior tag
válasz
Speeedfire
#803
üzenetére
itt
-moz-border-image -
#803
Speeedfire
félisten
Speeedfire
félisten
Ez miért nem megy, se ff, se ie alatt? Csak chrome alatt megy, ff eldobja.
border-image: url(border.png) 0 25 0 0 stretch stretch;
-
#802
Speeedfire
félisten
DeltaPower
#801
Speeedfire
félisten
válasz
DeltaPower
#801
üzenetére
Ez a js megoldás érdekes lehet, egyelőre maradtam a min-height funkciónál.
-
#801
DeltaPower
addikt
Speeedfire
#800
DeltaPower
addikt
válasz
Speeedfire
#800
üzenetére
Több lehetőség is van erre. Ha be tudod saccolni, hogy legfeljebb milyen magasak lesznek, akkor mindkettőnek megadod a min-height-et. Ha totál változó, akkor beleteszed őket egy befoglaló divbe, és annak csinálsz egy olyan repeat-y háttérképet, amin a függőleges csík van. A harmadik megoldás javascripttel beállítani az azonos magasságot betöltés után.
Gugliztam, de mindenhol azt írták, hogy IE 10 alatt már támogatott. De akkor miért nem nyikkan meg? 
Új hozzászólás Aktív témák
Hirdetés
- Kormányok / autós szimulátorok topikja
- Amlogic S905, S912 processzoros készülékek
- BestBuy topik
- Luck Dragon: Asszociációs játék. :)
- Sütés, főzés és konyhai praktikák
- Házimozi haladó szinten
- Óvodások homokozója
- Elektromos autók - motorok
- Nők, nőügyek (18+)
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- További aktív témák...
- KBDFans Tofu 60 Redux, custom, angol feliratozású, PBT kupakos, hot swap, programozható billentyűzet
- Keychron Q0 Plus, kiterjesztett numpad kiosztású, halkított, PBT kupakos makropad billentyűzet
- Samsung Galaxy s24 Dual sim 8/128GB Független
- Keychron Q8 halkított, magyar feliratozású PBT kupakos billentyűzet + második csere belső
- Vegyes szimulátoros kiegészítők
- BESZÁMÍTÁS! ASUS TUF A620M R5 7600X 32GB DDR5 1TB SSD RX 6700 XT 12GB ZALMAN I3 NEO A-Data 750W
- BESZÁMÍTÁS! MSI Z87-G43 GAMING Z87 chipset alaplap garanciával hibátlan működéssel
- GYÖNYÖRŰ iPhone 13 mini 256GB Midnight -1 ÉV GARANCIA - Kártyafüggetlen, MS3042, 94% Akkumulátor
- HIBÁTLAN iPhone 14 Pro Max 256GB Space Black -1 ÉV GARANCIA - Kártyafüggetlen, MS3009
- iKing.Hu - Honor Magic 5 Pro 5G - Használt, újszerű állapotban, ajándék tokkal!
Állásajánlatok
Cég: FOTC
Város: Budapest