ugrás a tartalomhoz

CSS alapu weblap

zoliky · 2007. Feb. 19. (H), 22.12
Egy ismerosomnek szeretnek egy weblapot kesziteni, nincs szuksegem sok mozgo kepre, grafikara, stb..

A kovetkezo keppen szeretnem az oldalt felosztani:

* Fejlec
- Egy kep (logo) a fejlecben
- Egy vizszintes menu a fejlecben
* Tartalom
- Ide kerul szoveg.
* Lab
- Ide kerul egy copyright szoveg.

Az oldal a kovetkezo cimen elerheto:

http://wplink.dyndns.org/joel/
a CSS pedig itt: http://wplink.dyndns.org/joel/style.css

A lap jol latszodik Explorer-ben es Firefox-ban. Az egyetlen problema, hogy ha kicsinyitem a browszer ablakat a kep elfut a helyerol.

Van otletetek miert tortenik ez? elnezest ha hujeseget kerdezek de kezdo vagyok web teren, eddig csak dokumentaciokat olvastam CSS-rol es eloszor probalom ki a dolgokat.

Szuksegem lenne par tanacsra mit gondoltok az XHTML kodrol, eddig jol hasznaltam a DIV-eket?

Koszonom !
 
1

Hát így első ránézésre...

vbence · 2007. Feb. 19. (H), 23.40
... szerintem te sem erre gondoltál:
  1.     <div id="main">  
  2.         <div id="header">  
  3.             <div id="logo">  
  4.             </div>  
  5.       
  6.             <div id="menu">  
  7.             Menu  
  8.             </div>  
  9.         </div>  
  10.     </div>  
  11. <body>  
  12. </body>  
2

Nem

zoliky · 2007. Feb. 19. (H), 23.44
Nem igazan ertem miert ugrik el a kep ha kicsinyitem a browszert :(
3

BODY?

vbence · 2007. Feb. 20. (K), 00.03
Haver, arra gondolok, hogy az egésznek a body-n belül kéne lennie... addig nem igazán lehet szabványos működést elvárni.
4

ok

zoliky · 2007. Feb. 20. (K), 00.21
Az csak egy hiba volt nem figyeltem ra de szerintem nem az okoza a gondot, hanem valami a CSS-ben. Most ki van javitva az XHTML kod, megis jelentkezik a problema.

Szeretnek precizebb hozaszolasokat kapni. Koszonom!
5

precízebb

vbence · 2007. Feb. 20. (K), 00.41
Ez szerinted mitól kerülne középre?
  1. margin0px 125px 0;  
próbáld ezt
  1. margin0 auto;  
(Bocs a nyers modoromért, fáj a fejem.)
6

css-ben van a hiba

Csorba Norbert · 2007. Feb. 20. (K), 10.22
Ha középre szeretnéd tenni az oldalt a #main szélességét állítsd be fix-re, hogy ne essen szét, majd margin:auto; val mindig középre kerül az oldal. (nálad nem tudom mekkora a háttérkép szélessége, de ilyesmi lesz:
#main {
width:800px;
margin:auto;
background: url('images/rap.jpg') repeat-y;
}
) Utánna már a képet és a tartalmat az oldalon belül tudod igazgatni (margin, padding), nem ugrik ki belőle. A #logo-nak kb margin-left:20px; elég és a helyén lesz.
7

koszonom

zoliky · 2007. Feb. 20. (K), 15.51
Koszonom a segitseget! Most mar mukodik de van valami ami agaszt. Szeretnem ha a bal sav eltunik amikor a browszer ablakat kicsinyitem

Itt van egy kep: http://img226.imageshack.us/img226/2117/ballsavnc0.jpg

Tudnatok valami otletet adni? En azt vettem eszrem, hogy a margin: auto miatt tortenik, de nem vagyok benne biztos.

A jelenlegi CSS kodom itt van:
  1. body {  
  2.     background-color#F3F6ED;  
  3. }  
  4.   
  5. #main {  
  6.     margin-leftauto;  
  7.     margin-rightauto;  
  8.     width780px;  
  9.     background-imageurl('images/rap.jpg');  
  10.     background-repeatrepeat-y;  
  11. }  
  12.   
  13. #logo {  
  14.     background-imageurl('images/grass.jpg');  
  15.     background-positioncenter;  
  16.     margin-left12px;  
  17.     height150px;  
  18.     width759px;  
  19. }  
8

jobb oldalt sem működik

vbence · 2007. Feb. 20. (K), 16.26
Nem működik. Ott a scrollbar az ablak alján. Ha elcsúsztatod ott lesz az is. Egy ilyen css-el láthatóvá teheted az oldal szerkezetét és máris látod mi nem stimmel:
  1. * {  
  2.     margin1px dashed red;  
  3. }  
Ha a #mained 780px széles akkor akkora lesz. Nem fog eltűnni.

Én a css design-t ennek az oldalnak a forrásából tanultam meg:
http://www.etagenoir.com/

Egy fórum nem a legjobb hely a css megtanulására. Minden rosszindulat nélkül mondom, hogy fogalmad sincs az egészről. Lesz még kb 20 hasonló kérdésed, hogy "ez meg az miért nem működik", és a felénél se taratasz úgy sem. Nézz meg egy leírást ha akarsz van itt a Weblaboron is pár. Nézz meg egy működő oldalt. Ott van benne feketén fehéren, mit hogy kell csinálni.
9

szia

zoliky · 2007. Feb. 22. (Cs), 16.39
Egy fórum nem a legjobb hely a css megtanulására. Minden rosszindulat nélkül mondom, hogy fogalmad sincs az egészről. Lesz még kb 20 hasonló kérdésed, hogy "ez meg az miért nem működik", és a felénél se taratasz úgy sem. Nézz meg egy leírást ha akarsz van itt a Weblaboron is pár. Nézz meg egy működő oldalt. Ott van benne feketén fehéren, mit hogy kell csinálni.

Szerintem nem a CSS megtanulasarol van szo hanem hasznalatarol. Oszinten mondom neked elolvastam legalabb 3 CSS konyvet de amikor kezedben van a billentyuzet mas mint a konyv. A peldak tobbet segitenek.

Most is elakadtam egy pontnal es szeretnek tanacsot kerni, remelem utolso keres lesz, megprobalok magamontol boldogulni.

A gond az, hogy ha a kovetkezo lapot: http://wplink.dyndns.org/joel/ megnyitom explorerben a kep es a szoveg kozt van egy kis hezag, ez nincs Firefoxban es operaban.

Meg lehet ugy oldani, hogy ne hozak letre meg egy CSS fajlot kulon explorernek ? Szeretnem ha a tavolsag a kep es a szoveg kozt egyforma lenne minden browszerben.

Elore koszonom !
10

tipp

vbence · 2007. Feb. 22. (Cs), 17.20
A CSS könyvek nem igazából a CSS alapú oldalfelépítést oktatják. Szerintem egy netes tuorial lenne a leghasznosabb.

Az elcsúszás, amit tapasztalsz az a #menu. Mivel nincs tartalma a legtöbb böngésző nem ad neki layoutot (mintha ott se lenne), a width: 758 viszont elég az explórernek, hogy megjelenítse. Innentől kezdve az alapértelmezett line-height magasságát megkapja. Ha írsz bele valami tartalmat, akkor már minden bönsészőben megjelenik, és nem is lesz különbség.

Más: szebb megoldás, ha a #main két oldalán padding is lenne. Akkor a benne lakó divek (#logo, #menu, #content, #footer) alapból csak az árnyékon belüli területtel rendekeznének, nem kéne mindegyiknek külön margint adni. A szélességeket szintén nem kéne megadni nekik.
11

Koszonom

zoliky · 2007. Feb. 22. (Cs), 18.32
Raktam tartalmat a menube, es megprobaltam eltavolitan a width: 758 sort de hiaba, megmarad a tavolsag. Legyel szives nezd meg most az oldalt a ket browszerben. A menu es a "Home" szoveg kozt elege nagy a hezag explorerben.
Kiprobaltam minden lehetseges modszert de nem mukodik, mar szegyelek ide irni a forumra is. Ha tudnal valami otletet adni orulnek.

Koszonom!
12

Alapértelmezett stíluslapok

vbence · 2007. Feb. 22. (Cs), 19.39
A konkrét probléma az, hogy az egyes böngészők alapértelmezett stíluslapjai eltérnek egymástól. Konkrétan az UL elemnek az Explórerben van egy margin-bottomja ez az amit látsz. Én úgy szoktam írni a css-t, hogy megpróbálom megszűntetni ezeket a különbségeket. Például a CSS legtetejére:
  1. * {  
  2.     margin0;  
  3.     padding0;  
  4. }  
Elég átláthatatlan kezd lenni a CSS-ed. Próbáld meg egy papíron felvázolni a dolgokat, hova szánsz paddingot, hova margint, mik azok a paraméterek, amiket mindenképpen meg kell adni. Ha túl sok mindent állítasz be a CSSben (olyanokat is amik egymásból következnek), később nehéz dolgod lesz ha változtatnál valamit.
13

koszonom

zoliky · 2007. Feb. 23. (P), 11.48
Koszonom !
Elvileg most mukodne rendesen az oldal: http://wplink.dyndns.org/joel/
A #main ID-nek raktam paddingot, jelenleg az osszes benne levo div az arnyek utan jon elo.