Zdravím, potřeboval bych poradit s tvorbou layoutu stránky pomocí css. Z obázku http://img140.imageshack.us/my.php?image=webqa4.jpg je vidět jak by to mělo přibližně vypadat - nahoře klasický hover menu, ty dvě černý linky + kolečko je obrázek na pozadí, kterej by měl menu vizuálně oddělovat od obsahu v čeveným boxu. Potřebuju aby klik na linky z menu zobrazil v tom červeným prostoru obsah externího html souboru(při zachování zobrazení menu a pozadí z hlavní stránky) - vpodstatě jako tag iframe, nebo <object data="....html" width="..." height="..."> ale pomocí css pozicování.
Díky
Fórum › CSS
Obdoba rámů v CSS
![](img/forum_vlakno_help_vyreseno.png)
Vypadá to celkem jednodušše: uděláš si externí soubor css, kde určíš hodnoty menu a té červené oblasti, pak to pomocí DIV dáš do html.
Mohlo by to vypadat takhle:
body { color: #000 background-color: #FFF; }
.menu { margin-left: 50px; margin-right: 50px; margin-top:20px; }
.red { margin-left: 50px; margin-right: 100px; margin-top: 30px; background-color: #FF0000; }
a html(pouze body):
<div class="menu">text menu</div>
<div class="red">text červené oblasti</div>
To Ashwood: myslim, zes vynechal tu zakladni vec o kterou mu slo, o ty "ramy" :)
jestli to chces ciste bez framu, a podobnych veci, tak tridu red v css dopln o(doplneni Ashwoodova kodu...):
width: 000px;
height: 000px;
overflow: auto;
overflow ti umozni aby se obsah divu scrolloval a div mel stale stejne rozmery, problem je v tom, ze se ti reloadne stranka pri kliknuti na odkaz v menu
jo framy... dík za doplnění ;)
Dík za odpovědi, ale problém je trochu jinde. Ten obrázek, je jen ilustrační jak má vypadat layout a ta červená oblast jen zvýraznění toho, o co mi hlavně jde (červenej box si dovedu udělat). O co mi jde, je jak do toho DIV [podtrzene]nalinkovat položky z menu[/podtrzene]
iframem bych to dělal takhle:
definice menu:
<UL>
<LI><A HREF="polozka1.html" TARGET="obsah">polozka1</A>
<LI><A HREF="polozka2.html" TARGET="obsah">polozka2</A>...
definice červený oblasi:
<IFRAME frameborder="0"
SRC="defaultni_obsah.html"
NAME="obsah"
WIDTH=80% HEIGHT=450>
</IFRAME>
ale jak to udělat pomocí CSS - ergo jak dát DIVu atribut ekvivalentní NAME aby se do něho pak dalo odkazovat skrz TARGET nebo něco podobnýho.
To HAL: no jeste by to slo javascriptem, bud tam primo javascriptem nacitat obsah, coz ti asi neporadim, protoze to nevim, nebo jeste vetsi "prasarna" - nacist si vse s display: none; a display: block; dat jen tomu, co se ma zobrazit ... ale jak rikam, tohle reseni nedoporucuju(mozna to dynamicke nacitani obsahu by nebylo od veci...)
To HAL:Myslím, že by to bolo výhodnejšie cez CSS stačí nastaviť boxu výšku a šírku a pridať overflow:scroll. Takto by to bolo oveľa jednoduchšie ako cez iframe alebo js.
![](img/forum_nove_psp_new.png)
Přidej příspěvek
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
![](/img/smile/1.gif)
![](/img/smile/2.gif)
![](/img/smile/3.gif)
![](/img/smile/4.gif)
![](/img/smile/5.gif)
![](/img/smile/6.gif)
![](/img/smile/7.gif)
![](/img/smile/8.gif)
![](/img/smile/9.gif)
![](/img/smile/10.gif)
![](/img/smile/11.gif)
![](/img/smile/12.gif)
![](/img/smile/13.gif)
![](/img/smile/14.gif)
![](/img/smile/15.gif)
![](/img/smile/16.gif)
![](/img/smile/17.gif)
![](/img/smile/18.gif)
![](/img/smile/19.gif)
![](/img/smile/20.gif)
![](/img/smile/21.gif)
![](/img/smile/22.gif)
![](/img/smile/23.gif)
![](/img/smile/24.gif)
![](/img/smile/25.gif)
![](/img/smile/26.gif)
![](/img/smile/27.gif)
![](/img/smile/28.gif)
![](/img/smile/29.gif)
![](/img/smile/30.gif)
![](/img/smile/31.gif)
![](/img/smile/32.gif)
Uživatelé prohlížející si toto vlákno
Podobná vlákna
Obdoba QStackedWidget C++ Qt — založil Midnight
Více rámů — založil Ladík
Okno bez rámu — založil David
Učím se CSS - kontrola CSS souboru — založil marpit
Moderátoři diskuze