Jóvan, feladom, a bal oldali menüt meg a középső fő témát megcsinálom divekkel, a többit table-vel. Nem hiszem el, hogy létezik olyan ember, aki ezeket átlátja.
Gyorskeresés
Legfrissebb anyagok
- Bemutató Route 66 Chicagotól Los Angelesig 2. rész
- Helyszíni riport Alfa Giulia Q-val a Balaton Park Circiut-en
- Bemutató A használt VGA piac kincsei - Július I
- Bemutató Bakancslista: Route 66 Chicagotól Los Angelesig
- Tudástár AMD Radeon undervolt/overclock
Általános témák
LOGOUT.hu témák
- [Re:] [D1Rect:] Nagy "hülyétkapokazapróktól" topik
- [Re:] PLEX: multimédia az egész lakásban
- [Re:] [sziku69:] Fűzzük össze a szavakat :)
- [Re:] [attilasd:] A laposföld elmebaj: Vissza a jövőbe!
- [Re:] [Luck Dragon:] Asszociációs játék. :)
- [Re:] [gban:] Ingyen kellene, de tegnapra
- [Re:] [sziku69:] Szólánc.
- [Re:] Elektromos rásegítésű kerékpárok
- [Re:] [MasterDeeJay:] Volta a bányából azaz CMP 100-210 kisteszt (Tesla V100 mining)
- [Re:] [Sub-ZeRo:] Euro Truck Simulator 2 & American Truck Simulator 1 (esetleg 2 majd, ha lesz) :)
Szakmai témák
PROHARDVER! témák
Mobilarena témák
IT café témák
Hozzászólások
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
Asszem, tényleg megkövezlek...
Köszi amúgy.
Louloudaki
aktív tag
ha kell, összerakom ezt is, csak szólj.
lesaux
veterán
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
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
Louloudaki
aktív tag
na tök jó, látod megy ez. a fotós diveket meg ugyanúgy, ahogy a fölső hármat csináltad és kész is.
lesaux
veterán
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.
Louloudaki
aktív tag
igen, csak arra vigyázz, hogy magasságot mindenképpen adj neki, szélesség lehet mindegy, a benne lévő fotótól függően úgyis kialakul.
lesaux
veterán
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.
Louloudaki
aktív tag
van egy konténered, aminek van x mérete, text-align: center; neki, és akkor a tartalma középre lesz rendezve. de a <center>sok kis div behányva ide</center> is megoldás.
lesaux
veterán
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
A <center>sok kis div behányva ide</center> se csinálja. Félek, hogy a float:left;-tel adok meg a kis diveknek olyat, amit nem kéne.
fordfairlane
veterán
text-align:center csakis inline elemre vonatkozik, blokkelemre nem.
x gon' give it to ya
lesaux
veterán
É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
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
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 ]
fordfairlane
veterán
Köszi, már csak a html részre lenne szükségem.
x gon' give it to ya
lesaux
veterán
Nah, akkor felpakoltam a html-t meg a css-t is ide: http://teszt.lepesfalvi.hu/teszt.html
fordfairlane
veterán
Nézegetem a forráskódot, és elsőre az tűnt fel, hogy mindenhol position-t használsz floattal együtt, ami szerintem üti egymást. De még elemezgetem a dolgot.
x gon' give it to ya
lesaux
veterán
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
Tudod, mi az érdekes? Hogy FF alatt egyszerűen meg se jelennek a .balnyil, .jobbnyil, .datum class-szal jelölt dobozok.
fordfairlane
veterán
Csináltam egy másik css-t, és olyan kérdésem volna, hogy mi a szempont a fotók elrendezésénél. Fix 4 kép egy sorban, vagy valami más?
x gon' give it to ya
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
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
PazsitZ
addikt
lesaux
veterán
Tényleg ilyen nehéz egy diven belül mindent lefelé igazítani, vagy csak nekem nem megy?
lesaux
veterán
De tényleg én vagyok az állat, hogy ráérek napokig szarakodni a divekkel, amikor nem lehet horizontálisan középre igazítani, vertikálisan meg se középre (csak workarounddal), se lentre. Megcsinálom table-lel.
lesaux
veterán
Hmm, kész is van table-lel. Ízlésesen középre rendezve, a képek pedig egy-egy td-ben alulra.
Mindenkinek köszönöm az elmúlt napok kitartó munkáját és törődését.
Mawyx
senior tag
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 :)
Louloudaki
aktív tag
lehetőségek:
- firefox és navigator: ctrl+U
- explorer: nézet menü/oldal forrása, vagy forrás, nemtom, hogy van magyarul
- letöltesz a mozilla addons oldaláról firebugot, ez a legcélszerűbb
- fájl menü, oldal mentése.
Mawyx
senior tag
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
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 :)
Louloudaki
aktív tag
már írtam, hogy NÉZET menü fent a menüsorban, és akkor kicselezed a jobbklikk tiltást, és megnézheted a forrást.
amúgy nemtom milyen elcseszett böngészőt használsz, én megnéztem az oldalt amit linkeltél, simán jobb klikk bárhol.
Mawyx
senior tag
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
shev7
veterán
csunya is lenne, ha jobbklikk tiltassal le lehetne tiltani az oldal forrasat...
''Gee, Brain, what do you want to do tonight?'' ''The same thing we do every night, Pinky: Try to take over the world!''
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
Mai Hardverapró hirdetések
prémium kategóriában
- ÚJ Apple Watch Ultra 2 GPS + Cellular 49mm - titántok, alpesi szíj
- APPLE MacBook Air 2020 13" Retina - M1 / 8GB / 256 GB SSD / MAGYAR / 96% akku, 81 ciklus / Garancia
- LG NanoCell 55NANO766QA Halvány píxel csík
- Philips 58PUS8545/12 1 ÉV GARANCIA Játék üzemmód
- Tyű-ha! HP EliteBook 850 G7 Fémházas Szuper Strapabíró Laptop 15,6" -65% i7-10610U 32/512 FHD HUN