HTML oldalon fix pozicióban a fejléc és az alsórész CSS segítségével

Kategóriák: CSS, Programozás, webfejlesztés, XHTML, HTML2007. 10. 17.

2

Nemrég belefutottam egy olyan problémába, hogy egy weblap flashes fejlécét fixre kellett tenni, vagyis ne mozogjon együtt a tartalommal. Legegyszerűbb megoldás a framek (keretek) használata lett volna, de mivel az egyáltalán nem keresőbarát, így szóba se jöhetett. A DIV layerek mellett döntöttem és ez alapján mutatom be, hogyan lehet nagyon egyszerűen megoldani a dolgot. Plusz még hozzátettem egy alsórészt is, ami fixen áll. Az egészben nagy segítségemre volt a CSS, utólag is köszönet érte … kérem tapsoljuk meg.

fix-fejlec-es-alsoresz-css-el-ilusztracio.jpg

Kattints IDE, hogy tovább olvasd a cikket »

CSS linkgyűjtemény

Kategóriák: CSS, Programozás, webfejlesztés2007. 10. 14.

1

Érdekes, hasznos linkek a CSS világából

CSS jelenleg már elválaszthatatlan része a korszerű weblapok készítésének, de legalábbis javasolt annak használata. Ez nem egy olyan dolog, hogy követni kell a webprogramozási divatot, hanem egyszerűen azért kell használni, mert jó és bizonyos dolgokat könnyebb megvalósítani általa. Egy oldal tervezésénél sokszor nagy haszna van a CSS galériáknak, fórumoknak, hiszen ötletet meríthetsz belőlük, vagy véleményt kérhetsz.
Általában ezekben a galériákban gyönyörű oldalak vannak mind design, mind CSS szempontjából (sokszor már túl sok is a CSS használata). Sokat lehet fejlődni ezekből, az oldalakból, persze csak akkor, ha van egy alapszintű ismereted.A felső menüből most már működik a CSS menüpont, használjátok egészséggel ezt a válogatást.A felső menüből most már működik a CSS menüpont, használjátok egészséggel ezt a válogatást. Kattints IDE, hogy tovább olvasd a cikket »

UL LI listaelemek formázása CSS-el

Kategóriák: CSS, Programozás, webfejlesztés, XHTML, HTML2007. 10. 05.

1

Mivel lehet gyorsan és egyszerűen elkészíteni egy menüt, ami ráadásul keresőbarát linkeket tartalmaz? Válasz a CSS és az UL LI listaelemek kombinációja. A leírás feltételez némi CSS ismeretet, vagyis az egyes tulajdonságokat nem írom le, de bárhol kérdés merülne fel, írjatok és válaszolok.

ul-li-css.gif

Kattints IDE, hogy tovább olvasd a cikket »

HTML stílussal (CSS) formázott szövegének betöltése Flashbe 2. (+kép betöltése és hivatkozások a html fájlban)

Kategóriák: CSS, FLASH, Programozás, webfejlesztés, XHTML, HTML2007. 10. 03.

0

szovegbehivas-flashbe-vegeredmeny.gif
Folytatjuk az előző alkalommal megtanultakat néhány egyéb hasznos dologgal.
Milyen jó lenne ha képet is lehetne beszúrni a betöltendő HTML fájlba és esetleg linkeket is, sőőőőőt, mi lenne ha a linkre kattintva valami elindulna a flashen belül. Juj de, izgalmas … mondjuk, nem annyira, mint egy kiszámíthatóan izgalmas krimi, de már-már hasonló érzeteket kelthet bennetek ez a sok extra dolog :-)

Egész jó és szép dolgokat lehet kihozni ebből a külső fájlok betöltéséből. Én speciál leginkább multimédiás CD-k készítésekor használom ezt a lehetőséget és így a motor külön van választva az adatoktól, ami által kevésbé hozzáértő egyének is tudnak feltölteni, módosítani.

Kattints IDE, hogy tovább olvasd a cikket »

HTML stílussal (CSS) formázott szövegének betöltése Flashbe 1.

Kategóriák: CSS, FLASH, Programozás, webfejlesztés, XHTML, HTML2007. 09. 28.

0

Flash alkalmas külső fájlok meghívására, betöltésére, legyen az kép, hang (mp3), flash (flv) vagy szöveg. Most egy olyan példa következik, ami a lehető legegyszerűbben behív egy html stílusokkal formázott szöveget. Kell hozzá egy stilus.css amibe a különböző stíluselemeket meghatározzuk és maga a html szöveg. A behívandó html fáj neve, és bármi lehet, nem kötelező a HTML kiterjesztés.

Kattints IDE, hogy tovább olvasd a cikket »

Scrollbárok eltüntetése

Kategóriák: CSS, Programozás, webfejlesztés, XHTML, HTML2007. 09. 28.

0

Néha szükség van arra, hogy ne legyen görgetősáv alul vagy jobboldalt esetleg egyik oldalt sem. Én leginkább Full Flash weblapoknál alkalmazom, amikor az SWF fájl megjelenését teljesen középre zárom mind függőlegesen mind vízszintesen és eltüntetem az esetlegesen zavaró scrollbárokat.

Ennek kivitelezése eléggé egyszerű dolog CSS-el.

Az alábbi kód mind a kettőt eltünteti, de természetesen lehet külön-külön is.
body, html {
overflow-x: hidden;
overflow-y: hidden;
}

Egyszerre mindkettőt:

body, html {
overflow: hidden;
}
Néha szükség van arra, hogy ne legyen görgetősáv alul vagy jobboldalt esetleg egyik oldalt sem. Én leginkább Full Flash weblapoknál alkalmazom, amikor az SWF fájl megjelenését teljesen középre zárom mind függőlegesen mind vízszintesen és eltüntetem az esetlegesen zavaró scrollbárokat.

Ennek kivitelezése eléggé egyszerű dolog CSS-el.

Az alábbi kód mind a kettőt eltünteti, de természetesen lehet külön-külön is.
body, html {
overflow-x: hidden;
overflow-y: hidden;
}

Egyszerre mindkettőt:

body, html {
overflow: hidden;
}
Néha szükség van arra, hogy ne legyen görgetősáv alul vagy jobboldalt esetleg egyik oldalt sem. Én leginkább Full Flash weblapoknál alkalmazom, amikor az SWF fájl megjelenését teljesen középre zárom mind függőlegesen mind vízszintesen és eltüntetem az esetlegesen zavaró scrollbárokat.

Ennek kivitelezése eléggé egyszerű dolog CSS-el.

Az alábbi kód mind a kettőt eltünteti, de természetesen lehet külön-külön is.
body, html {
overflow-x: hidden;
overflow-y: hidden;
}

Egyszerre mindkettőt:

body, html {
overflow: hidden;
}

Form nagy távolságokra más HTML elemektől

Kategóriák: CSS, Programozás, webfejlesztés, XHTML, HTML2007. 09. 10.

1

Az alábbi kis html szösszenetet leginkább azoknak írom, akik nem igazán sajátították még el a CSS szabványt. Lehet észrevetted már, hogy amikor egy FORM űrlapot készítesz, akkor azt az előtte és utána található elemektől távolra tudod csak elhelyezni, kb. egy sortörésnyire. Ez leginkább akkor bosszantó, hogyha az oldal grafikájába pöccre belepasszoló dologról van szó, mondjuk egy bejelentkező user és jelszó mezője egy beléptető gombbal.

Nos ha a a formak 0 pixeles margót adsz, akkor megoldódik a dolog.

<form action=”uzenetkuldes.php” method=”post” style=”margin:0px;”>Az alábbi kis html szösszenetet leginkább azoknak írom, akik nem igazán sajátították még el a CSS szabványt. Lehet észrevetted már, hogy amikor egy FORM űrlapot készítesz, akkor azt az előtte és utána található elemektől távolra tudod csak elhelyezni, kb. egy sortörésnyire. Ez leginkább akkor bosszantó, hogyha az oldal grafikájába pöccre belepasszoló dologról van szó, mondjuk egy bejelentkező user és jelszó mezője egy beléptető gombbal.

Nos ha a a formak 0 pixeles margót adsz, akkor megoldódik a dolog.

<form action=”uzenetkuldes.php” method=”post” style=”margin:0px;”>Az alábbi kis html szösszenetet leginkább azoknak írom, akik nem igazán sajátították még el a CSS szabványt. Lehet észrevetted már, hogy amikor egy FORM űrlapot készítesz, akkor azt az előtte és utána található elemektől távolra tudod csak elhelyezni, kb. egy sortörésnyire. Ez leginkább akkor bosszantó, hogyha az oldal grafikájába pöccre belepasszoló dologról van szó, mondjuk egy bejelentkező user és jelszó mezője egy beléptető gombbal.

Nos ha a a formak 0 pixeles margót adsz, akkor megoldódik a dolog.

<form action=”uzenetkuldes.php” method=”post” style=”margin:0px;”>

Táblázat magassága 100% XHTML 1.0 esetében

Kategóriák: CSS, Programozás, webfejlesztés, XHTML, HTML2007. 09. 01.

2

Jó néhányszor belefutottam ebbe a problémába, de most már tudom mi a bibi.

Ha a HTML fájlunk típusa:

your code here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Akkor a táblázat magasságát (<table height=”100%” … ) nem tudtam 100%-ra beállítani. A Dreamweaver már fel sem ajánlja ennek beállításának lehetőségét, de én makacs mód mindig beleírtam a kódba. Sejtettem én, hogy az XHTML szabvány ilyen, de azért meg lehet oldani.

Ilyenkor az oldal stílusának be kell állítva lennie a 100%-nak meghozza a body és a html elemekhez egyaránt..

html, body {
height:100%;
}

Ezután már megy a dolog.

Egyébként nem értem, hogy szélességre miért nincs ilyen probléma, illetve azt nem értem, magasságra miért kell ez a korlát.