Re: css layout

From: hyneklipa.cz (mail@hyneklipa.cz)
Date: 02. 12. 2003, 20:57 CET


Tomáš Martínek wrote:
> Zdravim,
> mam mensi problemek. Chtel bych udelat 3 sloupcovy layout, kde 1.
> sloupec by mël 10%, 2. 80% a 3. 15%.
> a chtel bych je zaradit do stranky. ovsem treti sloupec mi nepasuje
> do okolnich a mam tam mezirku mezi 2. a 3.
> Nevite, kde by mohl byt problem?
-------------------------------------------

mam pocit, ze u procent je maximum 100% (ve vztahu k nadrazenemu
prvku, nikoliv pri plneni planu;) ), takze 10+80+15 je trosku vic
(skoro ten plan)

a jeste neco, nikdy nemichejte 'position: absolute;'  a 'float'.
position absolute vyjima prvek z toku dat, takze float na nej nema
zadny vliv (a to neznamena ze tam ma byt)


nechce se mi hrabat v necim kodu, pac ja bych to resil takto:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="cs">
<head>
  <meta http-equiv="content-type"
    content="text/html;charset=iso-8859-2">
 <title>3 columns layout by h! ;)</title>
  <meta http-equiv="content-language" content="cs">
  <meta name="resource-type" content="document">
  <meta name="author" content="all: Hynek Lipa; mail at hyneklipa.cz">
  <meta name="generator" content="h!ynek HandMade">
  <meta name="robots" content="all">
  <style type="text/css" media="screen">
    body {margin:0; padding: 0; color: #fff;}
    #leftcol {
         position: absolute;
         left: 0;
         top: 0;
         width: 10%;
         margin: 0;
         background-color: #f00;
     }

    #rightcol {
         position: absolute;
         left: 85%;
         top: 0;
         width: 15%;
         background-color: #f00;
     }


    #content {
         margin: 0 15% 0 10%;
         background-color: #006;
     }
  </style>
</head>
<body>
     <div id="leftcol">left</div>
     <div id="content">content</div>
     <div id="rightcol">right</div>
</body>
</html>


a posledni pripominka: pokud tam chces ramecky (border), tak radeji
vnor dalsi bezvyznamovy blok do techto definicnich, jinak se s tim
nedomluvis (tech 6-ti px se tezko zbavuje)

enjoy;)

- h! -
http://www.hyneklipa.cz/



This archive was generated by hypermail 2.1.3 : 02. 12. 2003, 20:57 CET