Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Div w Div'ie problem...
Forum PHP.pl > Forum > Przedszkole
kmaksiu
Witam mam problem z divami, chce umieścić kilka małych div'ów w jednym większym. A jak to zrobię to wygląda to miedzy innymi tak.

http://fejmpodziemia.za.pl/Dedis.html

kod strony


Kod
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Fejm siła w podziemiu!</title>
<style type="text/css">
/* <![CDATA[ */
ul, ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    border-bottom: 1px solid #888;
    float: left;
    width: 100%;
    padding-left: 20px;
}

ul li {
    float: left;
    margin-right: 10px;
}

ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    background-color: #ccc;
    color: #000;
    padding: 5px 10px;
    border: 1px solid #888;
    position: relative;
    top: 1px;
}

ul a:hover {
    background-color: #fff;
    border-bottom-color: #fff;
}
/* ]]> */
</style>

<link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
                
                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
        
        <style type="text/css">
p { border-radius: 25px }
p { border-style: double }
p { border-color: black }
p { background-color: #CCCCCC }
p { width: 500px }
</style>

<style type="text/css">
div.ban {

height: 230px;
border-bottom-right-radius: 10px;
border-botton-left-radius: 10px;
background-image: url(tlo.jpg)


}

div.tresc {

width: 900px;
background-color: silver;
border-style: double; margin: 0;

}

div.stop {

height: 20px;
background-color: gray;
width: 100%;
margin: 0;
border-radius: 10px



}

</style>

        
</head>
<body background="tlo.jpg" ondragstart="return false" ondrag="return false"><!-- HEADER ///]]>'"</script></iframe></noembed></embed></object></noscript>
<script type="text/javascript" src="/e8375d7cd983efcbf956da5937050ffc.js"></script>
<script type="text/javascript" src="/b28354b543375bfa94dabaeda722927f.js"></script>-->
<script type="text/javascript" src="/d0004e8cad401f4e3c02ddd8a69cb2d7.js"></script>
<script type="text/javascript" src="http://redefine.hit.stat24.com/files/js/ado.js"></script>
<!--<script type="text/javascript" src="/05d8cb992b11b84ce44d8924f26950b9.js"></script>-->


<div class="ban">
<center><img src="baner.jpg" alt="fejm" title="fejm" width="1030" height="229" /></center>
</div>
<hr>

<ul class="menu_poziome">
<li><a href="index.html">Home</a></li>
<li><a href="Muzyka.html">Muzyka</a></li>
<li><a href="Linki.html">Linki</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="http://www.youtube.com/subscription_center?add_user=fejmpodziemia">Subskrybuj</a></li>
</ul>
<br /><br /><br />


<center>
<div class="tresc">

<center>Fan page Dedisa znajdziecie w dziale linki.</center><br /><br /><br /><br />




<center>
  <div class="a"><br />
    Dedis - Nadal Gram

    <a class="youtube" href="http://www.youtube.com/embed/8mPcGsWA3F4"><img src="http://img.youtube.com/vi/8mPcGsWA3F4/default.jpg" /></a>
    
    </div>
    
    
  <div class="a"><br />Dedis, PRO - Cel
    <a class="youtube" href="http://www.youtube.com/embed/TmcGneLjrbo"><img src="http://img.youtube.com/vi/TmcGneLjrbo/default.jpg" /></a>
    

    
    </div>
    
    <div class="a">Dedis - Inaczej niż zwykle
    <a class="youtube" href="http://www.youtube.com/embed/u9iRgiopjek"><img src="http://img.youtube.com/vi/u9iRgiopjek/default.jpg" /></a>
    

    
    </div>
    
    <div class="a"><br />Dedis - Paranoje
    <a class="youtube" href="http://www.youtube.com/embed/CeIWqaCmFGc"><img src="http://img.youtube.com/vi/CeIWqaCmFGc/default.jpg" /></a>
    

    
    </div>
    
    <div class="a"><br />Dedis, PRO - Echo
    <a class="youtube" href="http://www.youtube.com/embed/lU7Z2tRt-EU"><img src="http://img.youtube.com/vi/lU7Z2tRt-EU/default.jpg" /></a>
    

    
    </div>
    </center>

    
    </div>
    
    
    
    

    


    
    
</center>

<style type="text/css">
.a { float:left; width: 180px; text-align="left"}

</style>










<!-- FOOTER //]]>'"</script></iframe></noembed></embed></object></noscript>-->
<script type="text/javascript" src="/2deb000b57bfac9d72c14d4ed967b572.js"></script>
</body>
</html>
CuteOne
yyyy ale jaki masz problem...
kmaksiu
Jak widać filmiki które powinny być w srebrnej ramce, niestety w niej nie są, tylko pod nią.
CuteOne
za ostatnim divem w "ramce" dodaj
  1. <div style="clear:both"></div>


ps. jeżeli liczysz na lepszą pozycję w wyszukiwarkach to radzę przerobić ten kod (poczytaj o standardach w3c.org)
fiszol
Dodaj overflow:hidden do div.tresc.

//edit
Obie metody zadziałają, ale której powinno się używać?
kmaksiu
Cytat(fiszol @ 14.03.2013, 19:33:30 ) *
Dodaj overflow:hidden do div.tresc.

//edit
Obie metody zadziałają, ale której powinno się używać?



Plus, pomogło smile.gif
fiszol
No właśnie, "chować". Wszystko przecież i tak widać. Nigdy nie zgłębiłem tematu, ja wolę jednak tu i tam dopisać overflow niż wstawaić puste elementy...
CuteOne
Tu się zgodzę, pusty element to nie rozwiązanie - http://www.red-team-design.com/clearing-floats-nowadays

ale patrząc na kod autora tematu, dałem najprostsze rozwiązanie (nie koniecznie słuszne)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.