- Telekom mobilszolgáltatások
- Honor Magic5 Pro - kamerák bűvöletében
- Nothing Phone (2) - több, mint elsőre látszik
- iPhone topik
- Xiaomi 13T és 13T Pro - nincs tétlenkedés
- Android alkalmazások - szoftver kibeszélő topik
- Redmi Note 12 Pro - nem tolták túl
- Itt az első kép a 2024-es Nokia 3210-ről
- Redmi Note 13 Pro 5G - nem százas, kétszázas!
- Vodafone-ra áttért Digi Mobilosok
Hirdetés
-
Új Beats fej- és fülhallgatók jelentek meg
ma Frissítette a Solo termékcsaládot az Apple házi audiomárkája.
-
Karácsonyfaként világíthat a Thermaltake új CPU-hűtője
ph Az ASTRIA 600 ARGB ráadásul a hűtési teljesítmény szempontjából sem szégyenkezhet.
-
Premier előzetesen a Gray Zone Warfare
gp A mai naptól hivatalosan is elrajtol a játék korai kiadása PC-n.
Új hozzászólás Aktív témák
-
lesaux
veterán
Na de most komolyan. Ezt hány darab divvel lehetne megoldani?
[link]
Van egy div a menüsornak balra meg egy a fő témának középen. Eddig oké. Aztán valahogy pozícionálni kéne a címet, a nyilakat, a dátumot, a képeket, a képalákat, lent újra a gombokat, ráadásul a gombokon lesznek szövegek is, azt se tudom, hogy kell odapakolni. Aki azt mondja, hogy ezt könnyebb divekkel, mint table-lel, az vagy nagyon tud valamit, vagy csak füllent. -
Louloudaki
aktív tag
kövezz meg, de én ennél bonyolultabb oldalakat rakok össze divekkel pikk-pakk.
a tartalom lebontva, így hirtelen:
1 széles div a címnek,
1 széles div az alatta lévő cuccnak, azon belül 2 div a nyilaknak olyan széles mint a nyíl képe, meg 1 a középső szövegnek olyan széles, mint a középső mínusz a 2 nyíl div
1 div a képeknek, azon belül egy div text-align center, berakod a képet, br, szöveg
1 széles div az alsó menünek,
a menü divek pedig xy méretűek, a gomb képe a háttér, szöveg középre, line-height akkora mint a div magassága, így függőlegesen is középre kerül, és némi margin, hogy legyen köztük távolság.
marginokkal meg paddingekkel kell kicsit játszadozni, és kész. -
lesaux
veterán
válasz Louloudaki #1103 üzenetére
Asszem, tényleg megkövezlek...
Köszi amúgy. -
lesaux
veterán
válasz Louloudaki #1105 üzenetére
Hát mondanám, hogy kell, de igazság szerint jobb szeretném megérteni és magam összerakni.
Van ugye a két fő divünk, a menü meg a közepe, ezek ugye eddig absolute pozícióban vannak.
A középső négyszögbe hogy rakok diveket? Az már mind relative? Felülre egyet, az a cím. Alá hogy pakolok hármat egymás mellé? Float:left háromszor? Aztán float:clear, és most négy kisebb divem lesz?
Mert baromi jók ezek a tutorialok, amiket olvasok, tudok két- meg háromhasábos szöveget betördelni, de amikor egy dobozban van nyolc másik doboz, az kicsit kifog rajtam. -
Louloudaki
aktív tag
én nem használok absolute meg relative beállítást, float minden oszt jóvan. szerintem ez is az egyszerűbb, bár a fene tudja.
az alsó három div float left, aztán egy üres div ami 100% széles és clear: both, és akkor megint balról kezdődik a következő sor, nem csúszik be ezek mellé, ha esetleg beférne, akkor sem. float meg vagy left vagy right, float: clear olyan nincs.
és akkor ide jönnek a fotós divek. esetleg az ilyen sok kis divet be lehet foglalni konténer divekbe, és ez is segít, hogy ne csússzanak össze.
amúgy nem muszáj divekből, lehet ul-en belül li-ket is floatolni, és display: blockot beállítani rájuk. nézd meg ezt firebuggal, hogy épül fel: [link] -
lesaux
veterán
válasz Louloudaki #1107 üzenetére
Na jó, én ehhez gyenge vagyok. Azt megtennéd esetleg, hogy ha nagyon ráérsz, egy vázlatszerű oldalt összeütsz a fent belinkelt kép alapján? Hogy minden kis négyszög más színű legyen, kb. olyan arányban, ahogy a képen? Ha onnantól sem boldogulok, akkor depi-öngyi.
A magyarázatodban már ott elakadtam, hogy az alsó három divvel kezded.
-
lesaux
veterán
válasz Louloudaki #1107 üzenetére
-
lesaux
veterán
válasz Louloudaki #1110 üzenetére
Most azon gondolkozom, hogy ugye elég egy darab .foto classt létrehoznom, és annak a divjéből pakolok négyet a felső, négyet az alsó sorba? Meg rakok közéjük margint vagy paddinget.
-
lesaux
veterán
válasz Louloudaki #1112 üzenetére
Egy diven belül több divet hogy rendezek középre? A div align="center"-t nem akarom, a margin: 0 auto meg valamiért nem megy, igaz, nem tudom, hogy a négy kis divet összefogó nagy divnek kell megadni vagy a kicsiknek, de egyik módon se megy.
-
lesaux
veterán
válasz Louloudaki #1114 üzenetére
A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)
Lehet, hogy a <center>sok kis div behányva ide</center> lesz a megoldás, de jobb szerettem volna css-ben, ha már ilyen szépen épül felfele a kódom. -
lesaux
veterán
válasz fordfairlane #1117 üzenetére
Értem, köszi, de akkor hogy rendezek középre négy dobozt?
-
fordfairlane
veterán
Ha például az oldal közepére akarsz rakni egy egy blokk elemet, akkor így lehet:
<div style="width: 300px; margin: 0 auto;"></div>
A te esetedet nem ismerem pontosan, valószínűleg kell egy konténer elem, amit középre igatítasz ezzel a módszerrel, és ebbe pakolod a további elemeket, mondjuk így:
<div style="position:relative; width: 400px; margin: 0 auto; border: 1px solid">
<div style="position:absolute; left: 0px; width:100px">1</div>
<div style="position:absolute; left: 100px; width:100px">2</div>
<div style="position:absolute; left: 200px; width:100px">3</div>
<div style="position:absolute; left: 300px; width:100px">4</div>
</div>Keretet azért raktam a konténer elemre, hogy lásd, hol van.
x gon' give it to ya
-
lesaux
veterán
válasz fordfairlane #1119 üzenetére
Köszi a választ. Konténer elem már van, akkor azon belül meg ki kell matekozni ezek szerint.
-
fordfairlane
veterán
Konténer elem már van, akkor azon belül meg ki kell matekozni ezek szerint.
Egy blokkelemet lehet középre igazítani a fentebb említett "margin: 0 auto" módszerrel, ha többet akarsz egymás mellé, akkor mindenképp szükséged lesz egy olyan plussz elemre, amit középre igazítasz, és ezen belülre rakod egymás mellé a többit.
x gon' give it to ya
-
lesaux
veterán
Oké, ez már megvan, bár az érdekes, hogy ha "padding: 0 10px 0 10px"-et adok meg a négy téglalapnak, akkor befér a konténerbe, de ha meg margint, akkor már nem fér be. De most beleszaladtam egy sokkal nagyobb problémába: IE alatt szép a végeredmény, Firefox alatt viszont egy csomó dobozt ki se rajzol.
-
fordfairlane
veterán
Oké, ez már megvan, bár az érdekes, hogy ha "padding: 0 10px 0 10px"-et adok meg a négy téglalapnak, akkor befér a konténerbe, de ha meg margint, akkor már nem fér be.
A forráskód nélkül nem biztos, hogy jó a tippem, de a padding és a margin az hozzáadódik a blokkelem szélességéhez, illetve magasságához, tehát a width illetve height a tartalom szélességére és magasságára vonatkozik, padding, border és margin nélkül.
De most beleszaladtam egy sokkal nagyobb problémába: IE alatt szép a végeredmény, Firefox alatt viszont egy csomó dobozt ki se rajzol.
Ebben sem tudok segíteni a kód nélkül.
[ Szerkesztve ]
x gon' give it to ya
-
lesaux
veterán
válasz fordfairlane #1123 üzenetére
body
{font-family: Arial;
font-size: 12pt;
background: #24577e url("hatter.jpg");
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;}
.balmenu
{position: absolute;
left:40px;
top:100px;
width:120px;
height:430px;
background-color: #d7e0ef;
border: 0px;}
.kozep_keret
{position: absolute;
left:200px;
top:100px;
width:760px;
height:430px;
background-color: #d7e0ef;
border: 0px solid #ffffff;}
.cim
{position: relative;
left:0px;
top:0px;
width:760px;
height:60px;
float:left;
background-color: #555555;
border: 0px;}
.balnyil
{position: relative;
left:0px;
top:0px;
width:150px;
height:60px;
float:left;
background-color: #ffffff;
border: 0px;}
.datum
{position: relative;
left:0px;
top:0px;
width:460px;
height:60px;
float:left;
background-color: #111111;
border: 0px;}
.jobbnyil
{position: relative;
left:0px;
top:0px;
width:150px;
height:60px;
float:left;
background-color: #ffffff;
border: 0px;}
.tartalom
{position: relative;
left:0px;
top:0px;
width:760px;
height:280px;
text-align: center;
background-color: #AAAAAA;
padding:0px;
border:0px;}
.foto
{position: relative;
left:0px;
top:0px;
width:190px;
height:140px;
float:left;
background-color: #aa7766;
border: 1px solid black;
padding: 0 10px 0 10px;
margin: 0px;}
.also_menu
{position: relative;
left:0px;
top:0px;
width:760px;
height:30px;
float:left;
background-color: #44CC77;
border: 0px;}[ Szerkesztve ]
-
lesaux
veterán
válasz fordfairlane #1125 üzenetére
Nah, akkor felpakoltam a html-t meg a css-t is ide: http://teszt.lepesfalvi.hu/teszt.html
-
lesaux
veterán
válasz fordfairlane #1127 üzenetére
Köszi. Megcsináltam positon nélkül, ahol nem kell. Felrakom ide: http://teszt2.lepesfalvi.hu/teszt.html
IE alatt úgyanúgy jó, FF alatt ugyanúgy nem. -
fordfairlane
veterán
A floatnak ilyen a természete, mert alapvetően arra találták ki, hogy inline contentbe lehessen beszúrni és igazítani blokk elemeket, nem pedig arra, hogy blokkelemeket rakjuk egymás mellé. Ha a négy blokkelemnek a szélessége valamilyen oknál fogva meghaladja a konténerelem szélességét, akkor a float a következő sorba rakja az elemet (még nem jöttem rá, hogy FF-ben miért így van, IE-ben miért nem).
x gon' give it to ya
-
lesaux
veterán
válasz fordfairlane #1129 üzenetére
Tudod, mi az érdekes? Hogy FF alatt egyszerűen meg se jelennek a .balnyil, .jobbnyil, .datum class-szal jelölt dobozok.
-
fordfairlane
veterán
bemásolom a kódot két részletben, remélem jó lesz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #24577e;
font-family: 14px arial,sans-serif;
}
.balmenu {
position: absolute;
left:40px;
top:100px;
width:120px;
height:430px;
background-color: #d7e0ef;
}
.kozep_keret {
position: absolute;
left:200px;
top:100px;
width:760px;
min-height:430px;
background-color: #d7e0ef;
border: 0px solid #ffffff;
}
.cim {
height: 25px;
position: relative;
}
.navig {
height: 60px;
position: relative;
}
.balnyil {
background-color: #ffffff;
height: 60px;
position:absolute;
left: 0px;
width: 150px;
}
.datum {
background-color: #000000;
height: 60px;
position: absolute;
left: 150px;
text-align: center;
width: 460px;
}
.jobbnyil {
background-color: #ffffff;
height: 60px;
position: absolute;
left: 610px;
width: 150px;
}
.tartalom {
border: 1px solid;
margin: 0 auto;
position: relative;
width: 600px;
}
.foto {
border: 1px solid;
margin-top: 20px;
margin-left: 35px;
width: 100px;
float: left;
}
</style>
</head>x gon' give it to ya
-
fordfairlane
veterán
Második:
<body>
<div class="balmenu">balmenü</div>
<div class="kozep_keret">
<div class="cim">Cím</div>
<div class="navig">
<div class="balnyil">balnyíl</div>
<div class="datum">Dátum</div>
<div class="jobbnyil">Jobbnyíl</div>
</div>
<div class="tartalom">
<div class="foto">A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)</div>
<div class="foto"> </div>
<div class="foto"> </div>
<div class="foto"> </div>
<div style="clear: both"></div>
<div class="foto">A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)</div>
<div class="foto"> </div>
<div class="foto"> </div>
<div class="foto"> </div>
<div style="clear: both"></div>
</div>
<div class="also_menu">Alsó menü</div>
</div>
</body>
</html>x gon' give it to ya
-
Louloudaki
aktív tag
próbáld meg rögtön azt a grafikát összerakni, amit belinkeltél az elején, mert így kétszer dolgozol. meg egy doctype nem ártana, anélkül a böngészők nem egységesen kezelik a box modellt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ezt tedd az oldal legtetejére.szerintem jobb lenne, ha valaki összerakná neked, és a kész jó kódot tanulmányoznád, abból jobban megértenéd.
-
lesaux
veterán
válasz fordfairlane #1131 üzenetére
Fix 4 kép egy sorban, alatta meg lesz majd még 4. Köszi mindkettőtöknek, mindjárt megnézem.
-
egy kezdő
csendes tag
Figyu, van egy honlapom (http://www.fdt.tuti.hu) és egy kérdésem : hogyan lehet zenét és videót beszúrni? Van rá valami kód, vagy program, vagy hasonló?
lécci segítsetek! előre is köszi!kezdő HTML-es egy fejlesztendő oldallal :( segítség
-
lesaux
veterán
Tényleg ilyen nehéz egy diven belül mindent lefelé igazítani, vagy csak nekem nem megy?
-
Mawyx
senior tag
válasz Louloudaki #1107 üzenetére
A linkelt oldalnak hogy tudom megnézni a forrását, hogy tanulmányozni tudjam?
lesaux: Én is elvesztem a div-ekben, túl bonyolult
Egy nő gondjait amúgy sem megoldani kell, hanem meghallgatni./Eastman/ | Ami árammal működik, vagy rá lehet tenni egy számítógép tetejére, az informatikusi munka :)
-
Mawyx
senior tag
válasz Louloudaki #1142 üzenetére
A forrás nézés nem működik, néha vhogy letiltják, hogy ne lehessen megnézni. Jobbklikk sincs. Marad a többi, próbálkozok.
A Dreamwiever az Adobe vagy Macromedia? Csak mert le szeretném tölteni, ezt ajánlottátok már valamelyik fórumban, mint egyszerű honlapkészítő, de hol így van írva hol úgy, ráaádsul vmi demót találtam, az meg nem jó. És egy csomó verzója van, melyiket?
Egy nő gondjait amúgy sem megoldani kell, hanem meghallgatni./Eastman/ | Ami árammal működik, vagy rá lehet tenni egy számítógép tetejére, az informatikusi munka :)
-
Louloudaki
aktív tag
ember, kipróbáltam mindenhogy, azért ajánlottam azt az oldalamt, mert simán látszik minden.
de fájl menü/oldal mentése esetén lejön az egész a háttérgrafikát kivéve. és van jobbklikk is.
meg olyan amúgy sincs, hogy letiltják, hogy ne látszódjon a forrás. képtelenség...régen macromedia volt, de mára a macromediát felvásárolta az adobe, tehát az új progik már adobe alatt futnak.
-
Mawyx
senior tag
válasz Louloudaki #1144 üzenetére
Az agyam eldobom Azzal kezdtem, hogy jobbklikk, meg nézet menüben megnéztem (volna) a forrást, de semmit nem csinált, ezért kérdeztem, hogy hogyan kell megnézni.
Erre most megint ugyanezt csináltam, jobbklikk és forrás meg nézet menü forrás és most bejött a Jegyzettömb!De van olyan oldal, ahol kidob egy üzenetablakot egy mosolypofával a jobbklikkre, hogy ":-) ez nem jött be" és nem lehet megnézni a forrását. pl megtaláltam [link]tovább az itteni oldalra régen más üzenetet dobott, vmi olyasmi volt, amit írtam.
Egy nő gondjait amúgy sem megoldani kell, hanem meghallgatni./Eastman/ | Ami árammal működik, vagy rá lehet tenni egy számítógép tetejére, az informatikusi munka :)
-
Mawyx
senior tag
válasz Louloudaki #1146 üzenetére
Igen, igen, nézet, értem, működik, köszönöm, igen, igen
Csak mutatom, hogy nekem ilyen a jobbklikk, csak arra írom, hogy van ilyen és ha vki csak a jobbklikket ismeri, mint én először, akkor beszopja, nuku forrás, lehet rinya
[link]Egy nő gondjait amúgy sem megoldani kell, hanem meghallgatni./Eastman/ | Ami árammal működik, vagy rá lehet tenni egy számítógép tetejére, az informatikusi munka :)
-
fordfairlane
veterán
Meg lehet oldani.
<div style="position:relative; width:500px; height: 500px; border: 1px solid">
<div style="position: absolute; bottom: 0px">lábléc</div>
</div>Nyugodtan használj táblázatokat, ha nagyon elakadsz. A CSS pozicionálás komplexebb dolog, és idő kell, hogy egyrészt megszokd a logikáját, másrészt megismerd a különféle böngészőket.
[ Szerkesztve ]
x gon' give it to ya
-
vakondka
őstag
Póróbáld ki a Web Developer toolbar-t
Firefox alat természetesen.
megnézheted vele MINDEN weblap forrását, szerkesztheted a CSS-t, ki-be kapcsolgathatod a javascriptet és a sütiket, stb.Ha feltelepítetted, akkor View Source és már látod is a forráskódot, nincs az a védelem a világon, hogy ne tudnád megnézni a forrást ezzel (is)
https://toptarget.hu - Online Marketing Ügynökség
Új hozzászólás Aktív témák
- OLED TV topic
- Futás, futópályák
- E-roller topik
- Telekom mobilszolgáltatások
- Milyen asztali (teljes vagy fél-) gépet vegyek?
- AMD GPU-k jövője - amit tudni vélünk
- Politika
- Honor Magic5 Pro - kamerák bűvöletében
- Az alaplapgyártókra hárítja az Intel az egyes Core CPU-k stabilitási gondját
- Nothing Phone (2) - több, mint elsőre látszik
- További aktív témák...