jednoduchá a validní dvousloupcová sazba html

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod Fenix 31. 8. 2006 17:08

Už dělám web nějký ten pátek, ale na tuhle primitivní věc nemám žádné řešení bez workaroundů, hacků a složitostí. Mluvím samozřejmě o div/css layoutu.

Rád bych měl validní jednoduchou dvousloupcovou sazbu podle modelu

Obrázek

Tedy chci,
  • aby levý navigační sloupec měl fixní šířku, pravý zabíral zbytek stránky (i celý prostor pro stránku má fixní šířku, ale tomu nemusí být).
    t/*:m]
  • aby oba dva sloupce měly "svůj" barevný prostor až do patičky, a to i v případě, že je v pravém sloupci více i měně textu (na délku), než v levém

    img]http://kdf.mff.cuni.cz/~janek/_obrazky_forum/dc_1.gif[/img]Obrázek
  • aby to chodilo správně v IE a Gecku ( a asi i Opeře, i když se o ní víc mluví, než používá)
    o/*:m]
  • A v ideálním případě, aby to celé mělo minimální výšku, ale tady narážíme na nepodporu min-height v IE téměř určitě. Nebo ne?

    rimg]http://kdf.mff.cuni.cz/~janek/_obrazky_forum/dc_3.gif[/img]


Prošel jsem řadu webů o webdesignu pro webu, ale prakticky všude se řeší pouze možnost, že "levé" menu má svou vlastní výšku a v případě, že je "pravý" obsah stránky delší, objeví se pod ním pozadí té pravé části, nebo mají oba dva nezávislou výšku a objevuje se pod nimi pozadí celé stránky. A pokud se někde tváří, že tento problém řeší, pak mi obvykle jejich řešení nefungovalo

Díky moc za vaše řešení.
Fenix
Junior

Odeslat příspěvekod Sislik 31. 8. 2006 17:15

a co si stahnout nejakej hotovej design, treba tady http://oswd.org/
stahnes si CSS a ukazkovou stranku a pripadne nejakou tu grafiku
a pak si to muzes upravit k obrazu svemu :)
Sislik
Pokročilý
Uživatelský avatar

Odeslat příspěvekod Computer Lama 31. 8. 2006 17:19

Napadla mě taková komplikovanější věc ... Potřeboval by jsi na to ale PHP ... Vytvořil by jsi stránku (Třeba "index.php" ...),Do které by jsi inportoval další tři stránky ... Stánku s hlavyčkou, další stránku s patičkou, a stránku rozdělenou na rámi (frame), s pevnou šířkou sloupců ...
Počítač na rozdíl od člověka udělá vždy a do puntíku přesně to, co jste mu řekli. Ne vždy to je ale to, co jste mu chtěli říct...
Computer Lama
Junior
Uživatelský avatar

Odeslat příspěvekod Fenix 31. 8. 2006 17:24

dík, PHP je samozřejmost, ale řešení s frame není pro mne řešení. Přiznám se, že frames mne ani nenapadly, že bych je měl napsat do zadání jako to, co nechci. Ne, mluvím opravdu o jedné stránce.

ten seznam designu, to je docela dobrej nápad. Jen se v něm musím zorientovat ... já strešně nerad používám něco, čemu nerozumím.
Fenix
Junior

Odeslat příspěvekod dan1 31. 8. 2006 17:36

dan1
Junior

Odeslat příspěvekod Johny[CZ] 1. 9. 2006 07:32

index.php
Kód: Vybrat vše
<body><div class="all">
<div class="top">
Nějakej top
</div>

<div class="menu"><? include "pages/menu.php"; ?></div>

<div class="main">
  <?
    if (isset($_GET[view])) {
   $clanek="pages/".$_GET[view].".php";
   include $clanek;
    }
    else {
   echo 'Úvodní stránka';
    }
  ?>
</div>
<div class="paticka">
paticka
</div>
</div>
</body>
[/co
CSS:

Kód: Vybrat vše

body {
   margin: 0px auto 20px auto;
   width: 738px;
   text-align: center;
}

div.all {
   margin: 0px auto 20px auto;
   width: 738px;
}

div.menu {
   width: 170px;
   margin-top: 20px;
   margin-left: 10px;
   float: left;
   text-align: left;
}

div.main {
   width: 508px;
   margin: 20px 20px 20px 20px;
   float: left;
   text-align: left;
}

div.paticka {
   clear: both;
   width: 738px;
   text-align: center;
}



Je tam i spousta zbytečností (margin apod.)...
Johny[CZ]
Junior
Uživatelský avatar

Odeslat příspěvekod Team 1. 9. 2006 09:49

I don't think, I drink.
Team
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků