| Autor | Zpráva | ||
|---|---|---|---|
| David123 Profil * |
#1 · Zasláno: 20. 7. 2011, 18:21:34
Ahoj všem,
jsem v CS začátečník a proto budu mít možná triviální dotaz. Jak udělat, aby část pozadí měla šířku okna prohlížeče, v případě, že šířka celé stránky je menší, než celá šířka okna prohlížeče. Mám následující CSS #all {
width: 1000px;
text-align: left;
margin: 0 auto;
}
body {
font-family: Verdana;
font-size: 12px;
color: #000000;
background-color: white;
text-align: center;
}
.header {
width: 1000px;
height: 300px;
background-image: url('header.png');
}
.line {
height: 23px;
background: url('line.jpg');
background-repeat: repeat-x;
}
.content {
width: 950px;
background-color: white;
margin-bottom: 0;
}
.bottom {
background-color: black;
}A HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div class="header"></div>
<div class="line"></div>
<div class="content">
<p>Lorem ipsum... </p>
</div>
<div class="bottom">Paticka</div>
</div>
</body>
</html>Ukázka je zde: http://kolemjdouci.yc.cz/ Jde mi o to, aby ta šedivá čára pod hlavičkou (pod oranžovou částí), případně také černá patička byla přes celou šířku prohlížeče a neměla pouze 1000px, které jsou definovýny v #all. Při zmenšení velikosti okna by se pak horizontální posuvník měl objevovat až v případě, že šířka bude menší než 1000px. Lze tohoto efektu nějak docílit, aniž by bylo nutné u té čáry a u patičky nastavovat nějakou fixní šířku? |
||
| panther Profil |
#2 · Zasláno: 20. 7. 2011, 18:41:31
David123:
nastav pozadí body nebo html, které se přes požadavanou šířku (100%) roztahuje defaultně.
|
||
| David123 Profil * |
#3 · Zasláno: 20. 7. 2011, 19:13:38
Pokud jsem to dobře pochopil, tak mám dát do body jako pozadí obrázek té šedivé čáry s příslušným odsazením od horního okraje (dlouhý obrázek, kde na konci obrázku bude ta šedivá čára tak, aby přesně padla pod tu oranžovou hlavičku) - aspoň tak jsem to zkusil a funguje to. Jak to ale udělat u patičky, kdy je délka stránky vždy jiná (nemůžu tedy použít tento princip). Pokud jsem to pochopil špatně, tak se omlouvám a prosil bych o trochu důkladnější vysvětlení. Díky.
|
||
| panther Profil |
#4 · Zasláno: 20. 7. 2011, 20:13:53
David123:
nastav jí šířku 100%, případně přidej další obal kolem patičky s touto šířkou. |
||
| David123 Profil * |
#5 · Zasláno: 21. 7. 2011, 17:08:10
Ahoj,
měl bych k tomu ještě jeden dotaz. Podařilo se mi natáhnout patičku na celou šířku. Problém ale je, pokud zmenším velikost okna prohlížeče. Jakmile se objeví horizontální šoupátko, tak ta část, která je mimo obrazovku (tzn. ta část, na kterou se dostanu horizontálním scrollováním) chybí - což nevypadá moc pekně. Jak tedy zajistit, aby měla patička stejnou šířku jako celá stránka (tzn. že se patička bude zobrazovat i v té části, kam zasrolluji). Ukázka opět na http://kolemjdouci.yc.cz/ Díky za radu. |
||
| panther Profil |
#6 · Zasláno: 21. 7. 2011, 20:38:40
David123:
min-width |
||
|
Časová prodleva: 13 let
|
|||
0