Hirdetés

2024. április 28., vasárnap

Gyorskeresés

Útvonal

Fórumok  »  Szoftverfejlesztés  »  HTML szerkesztés (kiemelt téma)

Hozzászólások

(#1101) lesaux válasza lesaux (#1100) üzenetére


lesaux
veterán

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. :(

(#1102) lesaux válasza lesaux (#1101) üzenetére


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.

(#1103) Louloudaki válasza lesaux (#1102) üzenetére


Louloudaki
aktív tag

kövezz meg, de én ennél bonyolultabb oldalakat rakok össze divekkel pikk-pakk. :D

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.

(#1104) lesaux válasza Louloudaki (#1103) üzenetére


lesaux
veterán

Asszem, tényleg megkövezlek... ;]
Köszi amúgy. :)

(#1105) Louloudaki válasza lesaux (#1104) üzenetére


Louloudaki
aktív tag

ha kell, összerakom ezt is, csak szólj.

(#1106) lesaux válasza Louloudaki (#1105) üzenetére


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.

(#1107) Louloudaki válasza lesaux (#1106) üzenetére


Louloudaki
aktív tag

én nem használok absolute meg relative beállítást, float minden oszt jóvan. :D 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]

(#1108) lesaux válasza Louloudaki (#1107) üzenetére


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.

(#1109) lesaux válasza Louloudaki (#1107) üzenetére


lesaux
veterán

Jelentem, készen vannak a divek! :D Már csak fel kell tölteni tartalommal. Bár van egy olyan érzésem, hogy jövök majd még kérdezni... :)

(#1110) Louloudaki válasza lesaux (#1109) üzenetére


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.

(#1111) lesaux válasza Louloudaki (#1110) üzenetére


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.

(#1112) Louloudaki válasza lesaux (#1111) üzenetére


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.

(#1113) lesaux válasza Louloudaki (#1112) üzenetére


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.

(#1114) Louloudaki válasza lesaux (#1113) üzenetére


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.

(#1115) lesaux válasza Louloudaki (#1114) üzenetére


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. :)

(#1116) lesaux válasza lesaux (#1115) üzenetére


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.

(#1117) fordfairlane válasza lesaux (#1115) üzenetére


fordfairlane
veterán

text-align:center csakis inline elemre vonatkozik, blokkelemre nem.

x gon' give it to ya

(#1118) lesaux válasza fordfairlane (#1117) üzenetére


lesaux
veterán

Értem, köszi, de akkor hogy rendezek középre négy dobozt?

(#1119) fordfairlane válasza lesaux (#1118) üzenetére


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>
&nbsp;
</div>

Keretet azért raktam a konténer elemre, hogy lásd, hol van.

x gon' give it to ya

(#1120) lesaux válasza fordfairlane (#1119) üzenetére


lesaux
veterán

Köszi a választ. Konténer elem már van, akkor azon belül meg ki kell matekozni ezek szerint.

(#1121) fordfairlane válasza lesaux (#1120) üzenetére


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

(#1122) lesaux


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. :(

(#1123) fordfairlane válasza lesaux (#1122) üzenetére


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

(#1124) lesaux válasza fordfairlane (#1123) üzenetére


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 ]

(#1125) fordfairlane válasza lesaux (#1124) üzenetére


fordfairlane
veterán

Köszi, már csak a html részre lenne szükségem. :)

x gon' give it to ya

(#1126) lesaux válasza fordfairlane (#1125) üzenetére


lesaux
veterán

Nah, akkor felpakoltam a html-t meg a css-t is ide: http://teszt.lepesfalvi.hu/teszt.html

(#1127) fordfairlane válasza lesaux (#1126) üzenetére


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

(#1128) lesaux válasza fordfairlane (#1127) üzenetére


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.

(#1129) fordfairlane válasza lesaux (#1128) üzenetére


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

(#1130) lesaux válasza fordfairlane (#1129) üzenetére


lesaux
veterán

Tudod, mi az érdekes? Hogy FF alatt egyszerűen meg se jelennek a .balnyil, .jobbnyil, .datum class-szal jelölt dobozok.

(#1131) fordfairlane válasza lesaux (#1130) üzenetére


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

(#1132) fordfairlane válasza lesaux (#1130) üzenetére


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

(#1133) fordfairlane válasza lesaux (#1130) üzenetére


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">&nbsp;</div>
<div class="foto">&nbsp;</div>
<div class="foto">&nbsp;</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">&nbsp;</div>
<div class="foto">&nbsp;</div>
<div class="foto">&nbsp;</div>

<div style="clear: both"></div>
</div>
<div class="also_menu">Alsó menü</div>
</div>

</body>
</html>

x gon' give it to ya

(#1134) Louloudaki válasza lesaux (#1130) üzenetére


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.

(#1135) lesaux válasza fordfairlane (#1131) üzenetére


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.

(#1136) egy kezdő


egy kezdő
csendes tag

Figyu, van egy honlapom (http://www.fdt.tuti.hu) és egy kérdésem :F : 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

(#1137) PazsitZ válasza egy kezdő (#1136) üzenetére


PazsitZ
addikt

Google sok választási lehetőséget kínál:
zene: [link]
video: [link]

- http://pazsitz.hu -

(#1138) lesaux


lesaux
veterán

Tényleg ilyen nehéz egy diven belül mindent lefelé igazítani, vagy csak nekem nem megy?

(#1139) lesaux válasza lesaux (#1138) üzenetére


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.

(#1140) lesaux válasza lesaux (#1139) üzenetére


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.

(#1141) Mawyx válasza Louloudaki (#1107) üzenetére


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 :O

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 :)

(#1142) Louloudaki válasza Mawyx (#1141) üzenetére


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.

(#1143) Mawyx válasza Louloudaki (#1142) üzenetére


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 :)

(#1144) Louloudaki válasza Mawyx (#1143) üzenetére


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.

(#1145) Mawyx válasza Louloudaki (#1144) üzenetére


Mawyx
senior tag

Az agyam eldobom :W 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! :Y

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 :)

(#1146) Louloudaki válasza Mawyx (#1145) üzenetére


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. :D

(#1147) Mawyx válasza Louloudaki (#1146) üzenetére


Mawyx
senior tag

Igen, igen, nézet, értem, működik, köszönöm, igen, igen :R

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 :DDD
[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 :)

(#1148) fordfairlane válasza lesaux (#1138) üzenetére


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

(#1149) shev7 válasza Mawyx (#1147) üzenetére


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!''

(#1150) vakondka válasza Mawyx (#1147) üzenetére


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) :D

https://toptarget.hu - Online Marketing Ügynökség

Útvonal

Fórumok  »  Szoftverfejlesztés  »  HTML szerkesztés (kiemelt téma)
Copyright © 2000-2024 PROHARDVER Informatikai Kft.