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 !
‹ XSL_FO avagy nyomtatványok a netről A magyar OpenLaszlo közösség elindult ›
 ■
1

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

vbence · 2007. Feb. 19. (H), 23.40
... szerintem te sem erre gondoltál:
	<div id="main">
		<div id="header">
			<div id="logo">
			</div>
	
			<div id="menu">
			Menu
			</div>
		</div>
	</div>
<body>
</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?
	margin: 0px 125px 0;
próbáld ezt
	margin: 0 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:

body {
	background-color: #F3F6ED;
}

#main {
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	background-image: url('images/rap.jpg');
	background-repeat: repeat-y;
}

#logo {
	background-image: url('images/grass.jpg');
	background-position: center;
	margin-left: 12px;
	height: 150px;
	width: 759px;
}
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:
* {
    margin: 1px dashed red;
}
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:
* {
	margin: 0;
	padding: 0;
}
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.