Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Div w Div'ie problem...
kmaksiu
post 14.03.2013, 19:05:21
Post #1





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 3.03.2013

Ostrzeżenie: (10%)
X----

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>
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
CuteOne
post 14.03.2013, 19:23:45
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----

yyyy ale jaki masz problem...
Go to the top of the page
+Quote Post
kmaksiu
post 14.03.2013, 19:29:54
Post #3





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 3.03.2013

Ostrzeżenie: (10%)
X----

Jak widać filmiki które powinny być w srebrnej ramce, niestety w niej nie są, tylko pod nią.
Go to the top of the page
+Quote Post
CuteOne
post 14.03.2013, 19:33:06
Post #4





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----

za ostatnim divem w "ramce" dodaj
[HTML] pobierz, plaintext 
  1. <div style="clear:both"></div>
[HTML] pobierz, plaintext


ps. jeżeli liczysz na lepszą pozycję w wyszukiwarkach to radzę przerobić ten kod (poczytaj o standardach w3c.org)

Ten post edytował CuteOne 14.03.2013, 19:34:49
Go to the top of the page
+Quote Post
fiszol
post 14.03.2013, 19:33:30
Post #5





Grupa: Zarejestrowani
Postów: 449
Pomógł: 16
Dołączył: 25.05.2004
Skąd: Gorzów Wlkp.

Ostrzeżenie: (0%)
-----

Dodaj overflow:hidden do div.tresc.

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

Ten post edytował fiszol 14.03.2013, 19:34:25


--------------------
\o/
Go to the top of the page
+Quote Post
kmaksiu
post 14.03.2013, 19:35:39
Post #6





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 3.03.2013

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
fiszol
post 14.03.2013, 19:37:57
Post #7





Grupa: Zarejestrowani
Postów: 449
Pomógł: 16
Dołączył: 25.05.2004
Skąd: Gorzów Wlkp.

Ostrzeżenie: (0%)
-----

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...


--------------------
\o/
Go to the top of the page
+Quote Post
CuteOne
post 14.03.2013, 19:40:34
Post #8





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----

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)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 20:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn