két hasábos weblap létrehozása css
Olyan gondom lenne hogy egy kéthasábos weblapot akarok létrehozni div-vel és a pozicionálást css-sel szeretném megoldani ami lenne egy tartalom és egy baloldalból tetején fejléccel és egy vízszintes lenyíló menüvel a html kód már megvan írva csak a css -be beillesztetem a tartalom bal oldal és a tartalom stílusát , de a tartalom és a baloldal nem akar úgy állni ahogy kéne.
html kód:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="stylus.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ma-mó adó KFT</title>
<meta name="description" content="elsősorban könyveléssel foglalkozunk, de vállalunk számítógép telepítést, varast, gépek javítása.">
<meta name="keywords" content="könyvelés, számítógép telepítést">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="3 Months">
<meta name="author" content="Császár Mónika">
<meta name="distribution" content="local">
<meta name="language" content="HU">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="rating" content="general">
<meta name="generator" content="fabio.hu">
</head>
<body>
<div id="fejlec"></div>
<div id="menu"></div>
<div id="baloldal"></div>
<div id="tartalom"></div>
</body>
</html>
css kod:
/* CSS Document */
body{
margin:auto;
background-color:#009900;
font:12px verdana;
color:#000;
}
#fejlec {
position: relative;
height: 160px;
width: 1024px;
background-image:url(kepek/fejlec.jpg);
border: thin dotted #CCCCCC;
}
#tartalom {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
background-color: #0099FF;
float: rigth;
width: 80%;
border: medium dotted #996600;
margin:auto;
}
#baloldal {
float:left;
background-color: #990000;
width: 20%;
height:100%;
border: thick solid #99FF99;
}
■ html kód:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="stylus.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ma-mó adó KFT</title>
<meta name="description" content="elsősorban könyveléssel foglalkozunk, de vállalunk számítógép telepítést, varast, gépek javítása.">
<meta name="keywords" content="könyvelés, számítógép telepítést">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="3 Months">
<meta name="author" content="Császár Mónika">
<meta name="distribution" content="local">
<meta name="language" content="HU">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="rating" content="general">
<meta name="generator" content="fabio.hu">
</head>
<body>
<div id="fejlec"></div>
<div id="menu"></div>
<div id="baloldal"></div>
<div id="tartalom"></div>
</body>
</html>
css kod:
/* CSS Document */
body{
margin:auto;
background-color:#009900;
font:12px verdana;
color:#000;
}
#fejlec {
position: relative;
height: 160px;
width: 1024px;
background-image:url(kepek/fejlec.jpg);
border: thin dotted #CCCCCC;
}
#tartalom {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
background-color: #0099FF;
float: rigth;
width: 80%;
border: medium dotted #996600;
margin:auto;
}
#baloldal {
float:left;
background-color: #990000;
width: 20%;
height:100%;
border: thick solid #99FF99;
}
Mivel próbálkoztál?
Ezt belefoglalnád egy magyar mondatba? Valamint nem ártana, ha a többi "mondatot" is átírnád, legalább tagolást rakva hozzá. Sokszor nem árt, ha az ember elolvassa azt, amit leírt.
divek pozicionálása
#tartalom {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
background-color: #0099FF;
float: rigth;
width: 80%;
border: medium dotted #996600;
margin:auto;
}
#baloldal {
float:left;
background-color: #990000;
width: 20%;
height:100%;
border: thick solid #99FF99;
}
nem akar összejönni
Mit jelent az, hogy nem akar összejönni?
És használd végre a kódszínezőt. Részletek a hozzászólás doboz alatt.
#tartalom
Sasszem
Ez mi?
Egyébként is. Használd a színkiemeléses kód blokkot, mert így nehezebb átlátni.
Ez mi akar lenni??? Szentséges ég!
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Szerintem, állj fel a számítógép elől, és keress egy jó nyelvtantanfolyamot, ahol megtanítják azt is, hogy hogy kell érthetően fogalmazni és azt is, hogy kell a vesszőt használni.
Te ne foglalkozz ezzel, mert ebből a kódból semmi sem lesz.
Egyéb észrevételek:
Ne használj HTML 4.1-et.
A mondatok nagybetűvel kezdődnek és ponttal végződnek:
Ez most komoly?
Egy dolgot azért megsúgok, többet most nem akarok bogarászni:
A tartalom div auto marginja nem oda való, mert az középre igazítja.
Legközelebb kerüld a
Elénézést
Az internet tele van rosszabbnál rosszabb weboldalakkal, csak azért, mert olyan ember írta meg, aki nem ért hozzá. Ez tűrhetetlen.
Azért van itt, hogy tanuljon.
Te nyilván nagy szaki vagy
Ezt a "fikázom a másikat, hogy én többnek tűnjek" stílust felejtsd el. Nem ide (sehova sem) való.
Off:Picike te mióta tanulod
Picike te mióta tanulod ezt? Mikor és miért kezdted el? Mi a végcél amit szeretnél elérni?
Ha ezt mind megválaszolod segítek neked abban, hogy ne okozz magadnak csalódást, és adok pár támpontot amit ha kitartóan követsz akkor menni fog a dolog.
Van egy olyan érzésem, hogy nem a legelejéről kezdted és most ezért vannak itt problémák.
Van pár porosodó könyvem amiktől megválnék ha tudom hogy jó helyre kerülnek.
+1
Picike, lehet, hogy azt gondolod: egy weboldalt könnyű összerakni, csak egyszer kell valahogy megcsinálni, stb... Ez nem így van, sokat kell hozzá tanulni (állandóan) és soha sincs kész, mindig van mit továbbfejleszteni rajta. Én optimista vagyok, úgyhogy azt mondom: mindenki meg tudja tanulni, akinek elég akarata és türelme van hozzá. Ajánlott olvasnivaló: Cikkek kategóriánként. (Nem tudom a válogatást ki csinálta, de szerintem nagyon jó.)
Hidvégi Gábor kategorizálta
Köszi, most már megjegyzem!
segitség kérés
Még régebben tanultam egy ingyen tanfolyamon a html-et, de azt is csak a dreamweaver-be . Mindig is megakartam tanulni honlapot szerkeszteni. Tavaly elkezdhetem volna egy tanfolyamot multimédiából ahol css, php és javascripet is tanulhattam volna, de sajnos nagyon drága volt és így nem tudtam elkezdeni a tanfolyamot így interneten próbálom tanulgatni, sajnos a programozás soha nem ment nekem a html-be sem a kódokat tanultam, hanem grafikusan.
A dreamweaver-t és társaikat
Windows-ra ajánlom a Notepad++ szerkesztőt, ami egyébként is egy svájci bicskához hasonlító kötelező eszköz Windows-ra, annak aki fejleszt bármit is.
Linux-ra Kate, VIM (Ha kocka típus vagy), esetleg Gedit.
Ezen felül ajánlok egy sorrendet ami nem biztos, hogy teljes de ez jut most eszembe:
- TCP/IP
- HTTP, FTP
- Karakterkódolási szabványok, amik elterjedtek a weben:
- ISO-8859-1, ISO-8859-2 közti különbség
- UTF-8, és a BOM jelentése evvel kapcsolatban
- HTML
- Mi az a dokumentum típus (doctype), és miért kell.
- Hogy lesz értelmezve egy HTML dokumentum, (parsing).
- DOM inspector
- CSS
- A Cascading Style Sheets itt a lényeg a "Cascading" szón van.
- JavaScript
- DOM (Document Object Model), W3C és MSIE
Ha rákeresel ezekre a fogalmakra a megfelelő sorrendben akkor jól egymásra tudod építeni a tanultakat, és kevesebb homályos folt lesz
Szerk.:
Eszembe jutott egy jó doksi: Nagy Gusztáv - Web programozás, ami egy jó iránymutatás lehet számodra.
segitség kérés
Tudsz adni olyan linket ahol a html kódokat és a css kódokat tudom megtanulni amiket leírtál mindjárt utána nézek és kigyűjtöm egy word dokumentumba, hogy meglegyen. Készen vagyok elfogadni a tanácsaidat. Megtudsz adni egy e-mail címet és egy skype címet ha bármi segítség kell megtudjalak keresni?
Szerintem ne így csináld mert
Keress rá a kifejezésekre abban a sorrendben ahogy leírtam, és a találatokból szemezgess, tanulgass, kövesd a kapcsolódó linkeket.
Keress könyveket, cikkeket, referenciákat.
De itt egy pár link html/css-hez:
- HTML és CSS oktatás ingyenesen
- w3schools.com
- Mozilla Developer Network, (Ez ha nem angolul jeleik meg váltsd át angolra mert úgy több tartalmat látsz)
- HTML és CSS - Webszerkesztés stílusosan
Az email-ről meg annyit, hogy kapcsolatba tudsz velem lépni, ha a nevemre kattintasz és a kapcsolat felvételnél küldesz egy üzenetet. Ha regisztrációnál helyes címet adtál, a válaszomban benne lesz a cím.
köszi
Sajnos angolul nem tudok, de a másik kettő linket megnézem. Ne tudom mennyire lenne hasznos ha kódokat egy táblázatba kigyűjteném úgy tán jobban megtudnám tanulni.
Sajnos angolul nem tudok Ha
Ha komolyan érdekel a téma, akkor legjobb lenne először is ezen változtatni, ugyanis angol nyelv ismerete nélkül nem jutsz túl messzire.
Heh
Egyébként volt, aki írta, hogy nagyképűsködök. Ez nem igaz, én csak kifejtettem, hogy ez így nem fog menni. És hogy el is higgyétek: Picike, a szkájp nevem hunkris. Tekints el az első jótanácsomtól.
Véleményem szerint a
Háát
A HTML5 video, audio, etc tagjai már tényleg nem kezdőknek való, de nem ez a lényege. Úgy tudom gyorsabb, és olyan új tagok vannak benne, amikre nehezebb lesz átszokni a divekből. Gondolok itt header-re, footer-re, nav-ra, section-re és article-re.
A CSS3-ban is vannak nem kezdőnek valók, de viszonylag sok weblap operál az egyszerűen használható border-radius-sal.
Másrészt, ez egy szabvány. A jövő szabványa, ami már most is elérhető. Nem? És ha jó, most kéne elkezdeni használni.
Nem szabvány
Semmi nehézséget nem jelent átszokni a div-ről. Addig is lehet (ajánlott) használni id-nek v. class-nak (jelölőnek) a "majdani" tag-neveket. És így nem kell mindjárt az elején pl. IE8-al ügyetlenkedni.
Jobb az elején kezdeni a tanulást, mint hátrafelé pótolgatni.
Úgy tudom gyorsabbEzen jót
Szerkesztők
Én Eclipse IDE-t használok,
Ismerkedni nem árt