Ha van 3 divem egymás mellett és %-os arányban van beállítva a méretük (20%,60%,20%), akkor ezek tökéletesen működnek amíg be nem állítok nekik egy bordert, mert akkor a jobb oldali lecsúszik. Hogy lehetne ezt kiküszöbölni?
válasza:mondjuk mindegyiknek adj egy alap értéket. kb mindenki már 1024pxben tolja.
így oszt ell az egészet. csinálj egy ilyen 960pxel széles divet, az legyen a Page.
azon belül csinálj 3 divet, right,mid,left
és oszt el a 960px-et a right legyen mondjuk 200 a mid 500 a left meg 260.
Utána rakj rájuk 1px bordert mindre. és akkor lekel vond a megadott szélességből.
Right - 198
Mid - 498
Left - 258
Float. left-et ne feledd belerakni mind be.
Üdv Duku
válasza:Úgy lehet kiküszöbölni, hogy nem csinálsz ilyen butaságot. :)
A legokosabb megoldás (amennyiben mindenképpen ragaszkodsz hozzá, hogy a böngésző teljes szélességében terjedjen a weboldalad), ha a két szélső divet fixálod egy méreten (pl.: 200-250pixel ez jó bannerekhez is), a középső div méretét pedig javascipttel állítod be, az oldal indításakor, valamint az átméretezés eseményre.
A két szélső div teljes szélességét leveszed a böngésző ablak teljes szélességéből (document.window.innerWidth), és beállítod a belső div szélességét.
A számításkor ne feledd hozzátenni a border, a padding és a margin szélességét az értékekhez.
válasza:a középre igazítás 0. meganulandó megodlása -sztem-
van egy befoglalo dived, fentebbi példában ez a "Page", amit a koléga 960px-re vesz.
css-be:
#Page {
width: 960px;
margin: 0 auto 0 auto;
}
válasza: válasza:az előzőhöz még annyit hogy cssben:
body-t álítsd be: position:relative
és ezután tedd bele a 3 divet egy külön divbe aminek a mergin: 0 auto 0 auto
Így fogja középre rendezni. Fontos, hogy amennyiben a további elemeket a nagy befoglalo div-en kivülre írod akkor az logikusan már nem lesz középre igazítva. Ez gyakorlatilag az csinálja elviekben, hogy a body részhez igazít amijelen esetben az egész obektum, Aztán lesz egy dived ami az objektumhoz képest (itt is be kell állítanod a position:relatíve) felül-alul 0 két szélen pedig automatikus térközt hoz létre. Ezen belül bármi benne van (akár a 3 dived is) az nem fog kívülre esni.
válasza:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [link]
<html>
<head>
<title>RaimWebSite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="author" content="Raim"/>
<meta name="copyright" content="Raim"/>
<meta name="keywords" content="PHP,HTML,CSS"/>
<meta name="description" content="PHP,HTML,CSS"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<style>
body {
background: #f4f4f4;
padding: 0;
margin: 0;
color: #000;
font-family: tahoma,arial,verdana;
font-size: 11px;
text-align: center;
}
.clr {
clear: both;
}
div#Page {
background: #fff;
width: 960px;
margin: 0 auto;
padding: 0;
border: 1px dotted #000;
}
div#Page div#Left {
float: left;
width: 230px;
min-height: 50px;
}
div#Page div#Mid {
float: left;
width: 500px;
min-height: 200px;
}
div#Page div#Right {
float: left;
width: 230px;
min-height: 50px;
}
</style>
<body>
<div id="Page">
<div id="Left">
Itt akármit írhatsz.
</div>
<div id="Mid">
Itt akármit írhatsz.
</div>
<div id="Right">
Itt akármit írhatsz.
</div>
<div class="clr"></div>
</div>
</body>
</html>
válasza:Előző voltam.
Amit írtam azt így is fellehet építeni.
Üdv Duku
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, 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!