| Autor | Zpráva | ||
|---|---|---|---|
| Kry5 Profil * |
#1 · Zasláno: 4. 3. 2009, 08:18:40
Zdravím vás,
abych se potrénoval v CSS (pořád se učim a hodně toho neumim) udělal jsem si jednoduchou stránku. Mělo to bejt o Twilight (jedna holka, kterou znám chtěla mít vlastní web tak jsem si řekl pro ne? :-D). Vlastně jsem pracoval úplně bez přípravy. A narazil jsem na problém. Udělal jsem si patičku a napozicoval přes absolutní pozicování, ale když nyní píšu text tak místo aby se patička posouvala pořád dolu zůstává na místě a text přes ní přejede (čekal jsem to, ale nevěděl jak jinak to udělat. Kdybyste našli jakékoli další chyby nebo připomínky budu vám jenom vděčný. HTML kód: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection">
<title>Pokusy s CSS</title>
</head>
<body>
<h1>
Edward a Bella Cullens<span><a href="index.html" title="Zpět na úvodní stranu"></a></span>
</h1>
<table>
<tbody>
<tr>
<td>
<h2>Úryvek ze Stmívání</h2>
<p>Nikdy jsem moc nepřemýšlela nad tím, jak umřu – ačkoliv během posledních pár měsíců bych k tomu měla dostatek důvodů – ale i kdybych o tom přemýšlela, takhle bych si to nikdy nepředstavovala.
Zírala jsem bez dechu přes dlouhou místnost do tmavých očí lovce, který mi můj pohled přívětivě opětoval.
Bylo přece dobré zemřít, vyměnit svůj život za život člověka, kterého mám ráda. Dokonce šlechetné. To by mělo stát za uvážení.
Věděla jsem, že kdybych nikdy nepřijela do Forks, nemusela jsem teď čelit smrti. Ale i když jsem byla tak vyděšená, přesto jsem toho rozhodnutí nedokázala litovat. Když vám život nabízí sen naprosto za hranicemi vašich největších očekávání, není rozumné truchlit, když nadejde jeho konec.
Lovec se přátelsky usmál a pomalým krokem se přiblížil, aby mě zabil.
</p>
</td>
</tr>
</tbody>
</table>
<div id="menu">
<ul>
<li><a href="#">Stephania Meyer</a></li>
<li><a href="#">Twilight knihy</a></li>
<li><a href="#">Twilight film</a></li>
<li><a href="#">Twilight povídky</a></li>
</ul>
</div>
<div id="menu2">
<ul>
<li><a href="#">Stmívání</a></li>
<li><a href="#">Nový Měsíc</a></li>
<li><a href="#">Zatmění</a></li>
<li><a href="#">Rozbřesk</a></li>
<li><a href="#">Půlnoční Slunce</a></li>
</ul>
</div>
<p id="paticka">
© 2009 Kryštof Selucký
</p>
</body>
</html>CSS kód: body
{
text-align: center;
background: #C59B6C;
}
#menu ul {
text-align: center;
list-style-type: none;
padding-left: 30px;
position: absolute;
top: 142px;
left: 240px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
background: #A67C52;
display: block;
text-decoration: none;
line-height: 30px;
text-align:center;
width: 205px;
height: 30px;
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #000;
}
#menu ul li a:hover
{
color: #A67C52;
text-decoration: none;
background-color: #66411C;
font-weight: bold;
}
#menu2 ul
{
text-align: center;
list-style-type: none;
padding-left: 30px;
position: absolute;
top: 250px;
left: 240px;
}
#menu2 ul li
{
display: block;
}
#menu2 ul li a
{
background-image: url(img/polozka2.png);
margin-bottom: 5px;
display: block;
text-decoration: none;
line-height: 30px;
text-align: center;
width: 110px;
height: 30px;
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #000;
}
#menu2 ul li a:hover
{
color: #C59B6C;
text-decoration: none;
background-color: #66411C;
font-weight: bold;
}
h1
{
margin: 0 auto;
padding: 0;
position: relative;
width: 900px;
height: 150px;
overflow: hidden;
clear: both;
text-align: center;
color: black;
}
h1 span
{
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 900px;
height: 150px;
margin: 0;
padding: 0;
background-image: url(img/logo.png);
background-repeat: top left no-repeat;
}
h1 span a
{
display: block;
width: 900px;
height: 150px;
}
table
{
position: absolute;
left: 450px;
top: 250px;
width: 650px
}
h3, h2
{
text-align: center;
}
#paticka
{
clear: both;
background-image: url(img/paticka.png);
position: absolute;
top: 600px;
left: 240px;
width: 900px;
height: 30px;
}Opravdu tisíckrát děkuji za VŠECHNY rady, připomínky, odhalené chyby...prostě za jakoukoli pomoc! S přáním hezkého kódu KRY5 |
||
| Kry5 Profil * |
#2 · Zasláno: 4. 3. 2009, 08:19:42
PS: ten text v neviditelné tabulce jsem udělal takto abych měl jednodušší stilování ;-).
|
||
| panther Profil |
#3 · Zasláno: 4. 3. 2009, 08:29:17
Kry5
„Udělal jsem si patičku a napozicoval přes absolutní pozicování, ale když nyní píšu text tak místo aby se patička posouvala pořád dolu zůstává na místě a text přes ní přejede“ A věř tomu, že je to naprosto normální chování prohlížečů. Pozicování = vyjmutí elementu z toku dokumentu, tak proč by přes pozicovaný prvek nemohl jít jiný text? ;-) Tipoval bych, že hledáš Plaváčkovu patičku. |
||
| Kry5 Profil * |
#4 · Zasláno: 4. 3. 2009, 08:40:02
panther: díky zkusim to a kdyžtak pak napíšu ;-)
|
||
| Kry5 Profil * |
#5 · Zasláno: 4. 3. 2009, 08:48:27
No jo, ale naopak tam se řeší, že když je text dlouhý stránka se chová normálně. Ale v tomhle já mám ten asi banální problém :-D.
Mám stránku: Logo Menu Obsah Patička A když já píšu dlouhej text tak ten text jede dál přes patičku a ta zůstává na svém místě, ale já potřebuju aby se patička pořád posouvala dolů a tudíž zůstala dole na konci stránky. Aby se posouvala podle délky obsahu stránky. Je to asi banální problém, ale já moc nevim :-) |
||
| panther Profil |
#6 · Zasláno: 4. 3. 2009, 08:57:05
Kry5
„A když já píšu dlouhej text tak ten text jede dál přes patičku a ta zůstává na svém místě, ale já potřebuju aby se patička pořád posouvala dolů a tudíž zůstala dole na konci stránky. Aby se posouvala podle délky obsahu stránky. Je to asi banální problém, ale já moc nevim :-)“ s dlouhým textem se bude posouvat sama od sebe - pokud nebude pozicována. V pžípadě kratšího textu bude hned za ním, třeba v půlce stránky, jestli to tak vyjde. Ale to jsi, předpokládám, nechtěl, když jsi ji pozicoval.. Plaváčkova patička bude dole vždy a všude - ať bude krátký nebo dlouhý text. |
||
| Kry5 Profil * |
#7 · Zasláno: 4. 3. 2009, 09:07:52
jasně. Takže když ji nepozicuju tak ji mám se posouvá automaticky. Když ji pozicuju tak zase je nahoře. Takže plaváček vyřešil oboje :-D
Díky |
||
|
Časová prodleva: 15 let
|
|||
0