- Otthoni hálózat és internet megosztás
- Microsoft Excel topic
- YouTube
- Letartóztatták a bitcoin-Jézust
- A franciáknak elege van abból, hogy minden gyerek mobilozik
- Sokat fogyaszt az AI, egyre több az adatközpont, kell az atomenergia
- Mobilinternet
- Crypto Trade
- Telekom otthoni szolgáltatások (TV, internet, telefon)
- Synology NAS
Új hozzászólás Aktív témák
-
#881
Dreamweaver7
csendes tag
szmegma
#880
Dreamweaver7
csendes tag
Szerintem inkább a kék keret van elcsúszva, ez relatív, de valami biztos nincs a helyén.
Az sorközi CSS felülír mindent, vigyázz vele. A HTML kódból szedd ki az összes CSS-t, helyette class és/vagy id jelölőket használj, sokkal tisztább lesz a kódod és nem jönnek majd elő nehezen levadászható hibák. Utána próbáld ki, lehet egyből megtalálod a problémát.
Egyébként h1 elemből egy oldalon csak egy darabot illik használni.
-
#883
Dreamweaver7
csendes tag
szmegma
#882
Dreamweaver7
csendes tag
Igen, a HTML-ben lévőre, ott is az inline CSS-re, ez a sorközi, bár inline-nak nevezni jobb. A W3Schools stíluslapokkal foglalkozó oldalán sok információt megtalálsz a CSS kiértékelési sorrendjével kapcsolatban is, ajánlom elolvasni.
Egyébként lehet a HTML-ben CSS nyugodtan, csak vigyázni kell vele. Kis weblapoknál nem probléma, mert fejben tartható, mit hova tett az ember, de már egy pár oldalból álló lap esetén is érdemes inkább külső fájlba tenni. Sokkal átláthatóbb lesz és sokkal könnyebben megtalálja az ember az esetleges hibákat.
Én is jártam már úgy, hogy lusta voltam a külső CSS-be új osztályt, azonosítót adni egy-egy elemnek, hanem csak beírtam a HTML elemebe a style="" meghatározást, azután később sokáig keresgéltem, hogy ez miért is így néz ki vajon, ahogy nem kellene.
Szóval a lényeg az, hogy a programkód legyen átlátható és követhető, az elnevezések pedig kifejezőek, ezzel a későbbiekben sok munkát megspórol az ember. A W3Schools oldalt mindenképp ajánlom HTML információforrásként. Ha esetleg hozzájutsz, olvasd el a Virginia DeBolt - HTML és CSS - Webszerkesztés stílusosan című könyvet, én se vagyok még nagyon profi web fejlesztésben, de számomra is érthető volt.
Sok sikert!
Ja és Boldog Karácsonyt!
-
#887
Dreamweaver7
csendes tag
Forza_JUVE
#884
Dreamweaver7
csendes tag
válasz
Forza_JUVE
#884
üzenetére
Szia!
Nekem is van még mit tanulnom HTML/CSS terén és a kérdésedre nem tudom igazán a választ. Ha ilyesmi két oszlopos elrendezést szeretnél, amilyet írtál, gondolkodj el az alábbi megoldáson, lehet megfelel neked is.
A HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Dreamweaver7">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<title>Teszt HTML oldal</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_container">
<div id="header">
<p>Fejléc</p>
</div>
<div id="middle_section">
<div id="content_right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit.</p>
</div>
<div id="content_left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
</div>
<div class="clearer">
</div>
</div>
<div id="footer">
<p>Lábléc</p>
</div>
</div>
</body>
</html>A CSS:
body,div,html,p
{
border: none;
padding:0;
margin:0;
}
.clearer
{
clear:both;
}
#page_container
{
}
#header
{
background-color:#333333;
color:#ffffff;
font-size:40px;
height:100px;
text-align:center;
width:auto;
}
#middle_section
{
background-color:#00ff00;
margin:0 0 0 0;
}
#footer
{
background-color:#666666;
color:#ffffff;
font-size:40px;
height:100px;
text-align:center;
width:auto;
}
#content_left
{
background-color:#009900;
float:none;
margin:0 200px 0 0;
}
#content_right
{
background-color:#00bb00;
float:right;
width:200px;
}Képernyőfotók keskeny és széles ablakkal, így ugyanúgy látszik a viselkedése, mintha valamelyik oszlopba több vagy éppen kevesebb szöveget tennénk:
Az oszlopok viselkedése széles ablaknál
Az oszlopok viselkedése keskeny ablaknál
Én ilyen megoldást tudok rá, de én is még tanulom a HTML/CSS-t.
[ Szerkesztve ]
-
#889
Dreamweaver7
csendes tag
Forza_JUVE
#888
Dreamweaver7
csendes tag
válasz
Forza_JUVE
#888
üzenetére
Szívesen, amit linkeltél, az sokkal profibb megoldás, mint az enyém, köszi, könyvjelzőztem.
-
#894
Dreamweaver7
csendes tag
Lacces
#893
Dreamweaver7
csendes tag
A "miniblock" osztály float:left tulajdonsága miatt a "miniblocks" azonosítójú div magassága 0 px, azért nem látszik.
A "<div class="clear"></div>" részt tedd be a "miniblocks" azonosítójú div végére így:
<body >
<div id="wrapper">
<div id="content">
<div id="logo">
</div>
<div class="clear"></div>
<div id="miniblocks" >
<div class="miniblock">
<span>Teszt1</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek»»</a></p>
</div>
<div class="miniblock">
<span>Teszt2</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. .. <a href="#">részletek»»</a></p>
</div>
<div class="miniblock">
<span>Teszt3</span>
<p>
A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek»»</a></p>
</div>
<div class="clear"></div>
</div>
</div><!-- end of content -->
</div><!-- end of wrapper -->
</body>Így már látszik a fehér háttér, kipróbáltam.
szerk: A span tulajdonságaihoz tedd hozzá a "display:block;" sort, így középre igazodik.
[ Szerkesztve ]
Új hozzászólás Aktív témák
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: Ozeki Kft.
Város: Debrecen