Roztiahnutelna stranka

Roztiahnutelna stranka

Duch

4. 1. 2008 #1

Caute,
V CSS som pomerne zaciatocnik, takze snad prepacite banalitu otazky(keby bol cas, tak to riesim sam, ale cas ma pomerne tlaci). Mam stranku http://elf90.szm.sk/stranka/index.html (na stranke je ponechane len to najdolezitejsie) na ktorej mam div ohraniceny a dalsi div -> menu, chcel by som, aby ten div pod nim bol vzdy dostatocne dlhy na to,aby pokryl to menu. Mozno robim len nejaku blbst.
Vopred vdaka za radu.

Nahlásit jako SPAM

IP: 91.127.17.–

Manq0

Věrný člen

5. 1. 2008 #2

Nezadávej šířku.

Nahlásit jako SPAM

IP: 85.71.63.–

(x)HTML & CSS kodér webových stránek → http://manq.name

Petroff0

Věrný člen

7. 1. 2008 #3

To zahorak : . . . .velmi častý problém:
=> uvnitř máš blok plovoucí:
div.menu {
float:right; width:180px; height:500px;
margin-top : 230px;
margin-right: 40px;
}
=> a jeho obal plovoucí není (kdyby byl, tak by menu obalil)
.container {
left:20px; ( ??? u normálního divu je použití LEFT bez účinku )
margin:0px;
width:770px;
border:5px solid;
height:100%;
}
<div class="container">
<div class="menu"> </div>
</div>
--------------------------------------------------------------------------------------------------------
Nabízím ti 2 způsoby řešení (oboje je 100%ní v Opeře9 FF2 IE6/7):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Deviant production</title>

<style type="text/css">

body { background-image: url(obrazky/pozadie.jpg); margin:0; padding:0 }



/*=============================== 1.způsob =========================*/

.container {

   margin: 0px auto; /* s dovolením vystředěno */

   width:770px;

   border: 5px solid;

   /* height:100% <-netřeba */     /* <<<< Metoda A >>>>  */

    overflow:auto;                /* <<< (jednodušší) >>> */

}

/*===================================================================*/

div.menu {

   float:right;

   width:180px;

   height:500px;

   margin-top : 230px;

   margin-right: 40px;

   border: 1px solid rgb(236,34,2);

   border-width: 5px 0px 5px 0px;

   background-color:#000000;

 }



div.banner{

   position:absolute;

   left:27px;

   top:10px;

}



div.skvrna{

    position:absolute;

	left:506px;

	top:110px;

}

</style>

</head>



<body>

<div class="container">

    <div class="menu"> </div>

</div>



<div id="szmad"></div> <script type="text/javascript">document.write('<scr'+'ipt src="http://szm.sk/reklama.phtml?URL='+document.location.href+' type="text/javascript"><\/sc'+'ript>');</script>

</body>

</html>



/*================================= 2.způsob (HTML zůstane beze změny) ==========================*/

.container {

   margin: 0px auto; /* s dovolením vystředěno */

   width:770px;

   border: 5px solid black;

   height:100%;                /* <<<< Metoda B >>>>  */

}                             /* <<< (Ashlettovo ukončení obtékání) >>> */

.container:after { /* tohle se postará o obalení v FF/Opeře (náhrada za overflow:auto) */

content:'.';

display:block;

height:0;

visibility:hidden;

clear:both;

}

/*=================================================================================================*/

P.S.
Chyběla ti DOCTYPE a pak pár drobností => opravil jsem (validace teď hlásí: 0 chyb)
Ze spanu <span id="szmad"></span> jsem udělal div;
je lepší necpat bloky do řádkového prvku (ikdyž to DOCTYPE=html nevadí)
>>>ALE POZOR<<<
Mícháš dohromady neslučitelné věci -> nemůžeš mít prvek absolutně pozicovaný a zároveň plovoucí:

div.obsah1{

  position:absolute;

  left:16;      /* musí px */

  float:left;

}

div.obsah2{

  position:absolute;

  left:16;       /* musí px */

  float:left;

}

div.ls{

  position:absolute;

  left:0px;

  float:left;

}

div.rs{

  position:absolute;

  left:743px;

  float:right;

}