Létezik erre külön css-kód?
Mikor gimiben weblapszerkesztést tanultunk, nagyon megfogott, így sokat szórakoztam vele itthon. Most infó 2-ből beadandóként honlapot kell csinálnunk.
Elővettem régi css-fájlomat.
A körítés azért kellett, hogy lássátok, az átlagnál többet tudok, de közel se annyit, mint aki hozzáértőnek nevezhető.
Azt szeretném, hogy az oldal a lap közepén legyen, és ugyanolyan szélesen jelenjen meg akármilyen monitoron. Pl. mint a gyakorikérdések.hu.
A div tag-gel nem tudok bánni.
Ugye nem olyan ronda, ha nem "osztott", hanem egyhasábos az oldal? Mivel a tanárnő kérte, hogy legyen a honlapon belül másik lapra, másik fájlra link, rakok be, de úgy is jön ki szépen.
Felsorolásba raktam be a linkeket, úgy, hogy ugyanazon a lapfülön jelenjen meg, és a felsorolás segítségével mindegyikről elérhető legyen mindegyik.
Kérlek segítsetek, jó így?
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
nincs mit bánni vele
megadsz egy szélességet meg margin: 0 auto-t, hogy középen legyen
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
Beállítasz a div-nek egy fix szélességet és margin: auto
Utána középen lesz és mindenhol ugyanolyan széles lesz. Ebben nincs semmi extra.
Csak div-vel lehet? Mert akkor feladom.... :/
Azt végképp nem értem, hogyan kell használni.
Ez a kérdés, nem értitek? :D
Hogy css fájlban minek és hogyan lehet megadni?
Adtam meg margót, szép nagyon, de más szélességű monitoron rondán kihúzza, ugyebár.
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
Nincs mitől félni. A div elem, egy blokk tipusú konténer elem. A belsejében mint egy dobozban html elemek írhatók, amelyek a div blokk keretein belül fognak élni. Ez egy nagyon szabad felhasználású konténer elem, de használhatsz <p>-t is, ha az jobban tetszik neked. A css formázásoknál, ha a p elemre teszel egy display: block; értéket, nagyjából ugyanúgy fog viselkedni mint egy div.
Ha nem vagy biztos a használatában, próbáld ki a w3schools.com oldalon:
Tehát akkor:
<body>
<div>
{maga a honlap címsorokkal, bekezdésekkel, felsorolásokkal, képekkel}
</div>
</body>
És a css-ben mit írjak a div-hez?
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
Egy egyszerűbb oldalfelépítés:
<div id="page">
<div id="head">
<?php include "head.php"; ?>
</div>
<div id="content">
<div id="leftbar">
<?php include "left.php"; ?>
</div>
<div id="rightbar">
<?php include "right.php"; ?>
</div>
</div>
<div id="foot">
<?php include "foot.php"; ?>
</div>
</div>
CSS:
div {
position: relative;
display: block;
margin: 0px;
padding: 0px;
border: none;
}
#page {
width: 900px;
margin: 0 auto;
}
#head {
width: 900px;
height: 150px;
}
#content {
width: 900px;
}
#content:after {
clear: both;
}
#leftbar {
float: left;
width: 200px;
min-height: 400px;
overflow: hidden;
}
#rightbar {
float: left;
width: 700px;
min-height: 400px;
overflow: hidden;
}
#foot {
width: 900px;
height: 100px;
}
//----------
Nyilván a css-t még lehetne szinesítgetni, de ez az alap. Az include-olt php-kat már rád bízom, azok tartalmazhatnak odaillő szövegeket, sorokat stb...
Na jó, hagyjuk.
Mondtam, hogy kezdő vagyok. :D
De szerintem a tanár se vár olyan nagyon sokat, ha mégis, akkor FrontPage.
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
Csináljuk azzal amit te írtál:
<body>
<div>
{maga a honlap címsorokkal, bekezdésekkel, felsorolásokkal, képekkel}
</div>
</body>
annyi legyen a különbség hogy a divednek adsz egy id-t
<div id="tartalom">
{maga a honlap címsorokkal, bekezdésekkel, felsorolásokkal, képekkel}
</div>
</body>
és akkor css-ben hivatkozol rá (adunk neki egy szélességet is):
div#tartalom{
margin:0 auto;
width:800px;
}
Köszönöm szépen!
Így már szerintem menni fog. Az elkövetkező napokban megpróbálom.
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!