Autor Zpráva
lukasfigo
Profil
Dobrý den, mám problém s divy. Potrebuju dosahnout pomoci divu nasledujiciho vysledku:
[img][/img]
Ale text mi "vyleza" z jednotlivych divu...Nedari se mi to udelat tak aby se tak nedelo, nevite nekdo jak to udelat?
prikladam Zdrojak:



<body>
    <form id="form1" runat="server">

        <div id="wrap">
            <div class="top_corner">

            </div>
            <div id="main_container">
                <div id="header">
                    <div id="logo">
                        TADY BUDE LOGO
                    </div>
                    <div id="menu">
                        Tude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENU
                    </div>
                </div>
                <div class="middle_banner">
                    <div class="featured_slider">
<!-- začátek slide banneru -->
                        <div id="featured_border" class="jcarousel-container">
                            <div id="featured_wrapper" class="jcarousel-clip">
                                <ul id="featured_images" class="jcarousel-list">
                                <li><img src="images/slider_photo.jpg" alt="" height="280" width="965" /></li>
                                <li><img src="images/slider_photo2.jpg" alt="" height="280" width="965" /></li>
                                <li><img src="images/slider_photo3.jpg" alt="" height="280" width="965" /></li>
                                <li><img src="images/slider_photo2.jpg" alt="" height="280" width="965" /></li>
                                </ul>
                            </div>
                            <div id="featured_positioner_desc" class="jcarousel-container">
                                <div id="featured_wrapper_desc" class="jcarousel-clip">
                                    <ul id="featured_desc" class="jcarousel-list">
                                    </ul>
                                </div>
                            </div>
                            <ul id="featured_buttons" class="clear_fix">
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                        </div>
<!-- konec slide banneru -->
                    </div>
                </div>
            </div>
        </div>      
<!---------------------------------konec banneru-------------------------------->
             <div id="wrap2">
            <div class="spodek_mezera">
            </div>
            <div id="main_container2">
                <div id="spodni_cast">
                    <div id="leve_menu">
                        PrihlaseniA
                    </div>
                    <div id="obsah_stred">
                        Tady bude MENUTady bude MENUTa bude MENUTady bude MENUTa bude MENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTadyMENUTady bude MENUTa bude MENUTady bude MENUTa bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENUTady bude MENU
                        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                            <!--OBSAH-->
                        </asp:ContentPlaceHolder>
                    </div>
                </div>           
            </div>   
            
<!---------------------------------Patička-------------------------------->
            <div class="footer">
                <div class="copyright">
                </div>
                <div class="footer_links">
                </div>
            </div>
          </div> 
    </form>
</body>


a CSS:


body {
background:url(images/bg.gif) repeat;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
}
p{
text-align:justify;
line-height:19px;
padding:0px;
margin:0px;
}
h2{
padding:0px 0 10px 0; margin:0px; color:#B52025; font-size:20px; font-weight:normal;
}

#wrap{
width:977px;
margin:auto auto auto auto;
}
.top_corner{
width:976px;
height:15px;
background:url(images/top_bg.gif) no-repeat center bottom;
}
#main_container{
width:977px;
background:url(images/center_bg_repeat.gif) repeat-y center;
}
#header{
width:960px;
margin:auto;
height:90px;
}
#logo{
padding:10px 0 0 20px;
float:left;
}
/*----------------------menu-------------------------*/
#menu{
width:530px;
float:right;
padding:40px 0 0 0;
}


/*-----------------middle_banner----------------------------*/
.middle_banner{
width:977px;
height:304px;
background:url(images/middle_banner_bg.gif) no-repeat center;
}
/*----------------------slider---------------------------*/
.featured_slider { width:965px; margin:auto; float:left; margin:18px 0 0 6px; }
ul, li{
padding:0px;
margin:0px;
list-style:none;
}
/** ----------------------------------------------------- **/
#featured_border { position: relative; border: none; padding:0px; height:280px; margin: 0px; }
#featured_wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
#featured_images { position: absolute; left: 0; top: 0; }
#featured_images li { float: left; }
#featured_positioner_desc { width:965px; height: 280px; position: absolute; top: 0px; left: 0px; }
#featured_wrapper_desc { width: 100%; height:280px; position: relative; overflow: hidden; }
#featured_desc { position: absolute; left: 0; bottom: 0;  padding:0px; margin:0px; }
#featured_desc li { width: 965px; float: left;padding:0px; margin:0px; }
#featured_desc li div { margin:0px 0 0px 0px; padding:10px; width:945px;  background: url(images/featured-desc-bg.png); }
#featured_desc li h2 {
color:#FFFFFF;
font-size:18px;
padding:0px 0 5px 0;
margin:0px; 
}
#featured_desc li p {
        color: #FFFFFF;
        font-size: 12px;
        padding: 0px 0 10px 0;
        margin: 0px;
        line-height: 18px;
}


#featured_buttons { position: absolute; top: 15px; right: 15px; width: auto; padding:0; list-style:none;}
#featured_buttons li { width: 22px; height: 22px; background: url(images/featured-button-off.png); float: left; margin-left: 3px; text-align:center; font-size:12px; color:#FFFFFF; line-height:22px; cursor: pointer; }
#featured_buttons li.clicked { background: url(images/featured-button-on.png); }
/**/


/*-------------------------------*/
#wrap2{
width:977px;
margin:auto auto auto auto;
}
.spodek_mezera{
width:976px;
height:15px;
background:url(images/top_bg.gif) no-repeat center bottom;
}
#main_container2{
width:977px;
background:url(images/center_bg_repeat.gif) repeat-y center;
}
#header2{
width:960px;
margin:auto;
height:auto;
}
#leve_menu{
padding:10px 0 5px 5px;
float:left;
width:250px;
height:auto;

}
#obsah_stred{
width:690px;
height:auto;
float:right;
padding:10px 5px 5px 5px;
}

/*---------------footer------------------*/
.footer{
clear:both;
width:960px;
margin:auto;
background:url(images/footer_bg.jpg) no-repeat center;
height:65px;
}
.copyright{
float:left;
padding:30px 0 0 15px;
color:#6996c0;
}
.copyright a{
color: #2A1C11;
text-decoration:none;
}
.footer_links{
float:right;
padding:30px 15px 0 0;
}
.footer_links a{
text-decoration:none;
color: #2A1C11;
padding-left:10px;
}
.footer_links a:hover{
text-decoration:underline;
color: #2A1C11;
}
Davex
Profil
Nevidím výsledek a ani nic vylézat. Prosím o odkaz na živou ukázku.
lukasfigo
Profil
Davex:



Tady je příklad: http://2i.cz/9bad3e14c7
Plaváček
Profil
lukasfigo:

Z obrázku se toho moc poznat nedá. Ale jedná dobrá rada by se našla. Zkus používat mezi slovy mezery. Je to běžné v češtině i jiných jazycích. Problém pravděpodobně zmizí sám od sebe.
lukasfigo
Profil
Plaváček:
Nahoře jsou i mé zdrojové kódy atd...Mezery nepomáhají, stále text roztažený mimo div...
Plaváček
Profil
lukasfigo:

Bez živé ukázky (viz výše) ti nikdo nepomůže.
lukasfigo
Profil
Plaváček:
Co je myšleno živou ukázkou? Nahoře jsem dal můj zdroják a CSS, co je ještě potřeba?
Plaváček
Profil
lukasfigo:

Tak ještě jednou: Povídání o živých ukázkách
lukasfigo
Profil
Dokázal by mi prosím někdo poradit i bez toho abych to musel někde zveřejnovat? Myslím si že překopčit si zdroják není nic tak složitého, a byl bych rád kdyby to někdo zkusil a poradil...
margin
Profil *
http://jsfiddle.net/9P6mZ/
http://fiddle.jshell.net/9P6mZ/show/
Co dál?
lukasfigo
Profil
Když to debugnu ve visual studiu, a pustim tak se to roztáhne přes celou plochu, viz, předchozí obrázek...


takle vypadá jestě moje hlavička, ale tam taky nevidím problém:
<head runat="server">
    <title>TJ TUPESY</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />   
     <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <script type="text/javascript" src="js/jquery.core.js"></script>
    <script type="text/javascript" src="js/jquery.superfish.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript" src="js/jquery.scripts.js"></script>
</head>
lukasfigo
Profil
Tak další zjištění: v exploreru OK, v mozille leze text mimo...:/
margin
Profil *
Nevidím nic vyčuhovat, ani ve Firefoxu, ani v jiných prohlížečích.
http://browsershots.org/http://fiddle.jshell.net/9P6mZ/show/
Bez živé ukázky ti nikdo nedokáže poradit.
Plaváček
Profil
lukasfigo:

Tak ještě jednou a z mé strany naposledy. Žádáš radu zdarma, takže to nejmenší, co bys měl udělat, je dodat odkaz na živou ukázku. Nikdo ze zdejších borců nebude ztrácet čas vrtáním se ve fragmentech kódu, které s tvým problémem vůbec nemusí souviset.
peta
Profil
http://2i.cz/9bad3e14c7
Pokud text takto preteka, mas chybne nastavenou width a position. Je mozne, ze ti obrazek width roztahne nebo z jineho duvodu. Pokud das text bez mezer a div nema nastavenou width, tak se automaticky roztahuje do sirky. Pokud width ma, tak vytece text mimo div. To se da overit tak, ze das na konec css pro vsechny divy ramecek.
div {border:1px solid #f00;}
Nekdy taky pomuze smazat css a zacit tam kopirovat po castech css, dokud se projevi problem.
Ja treba prvni, co delam, tak celou stranku obalim divem class=site a nastavim mu sirku. Do nej pak davam ostatni tagy, ktere mi pak nevytecou, obvykle. Pokud jo, je problem s jejich chybnou sirkou a bud u div.site sirku zvetsim nebo to prestavim jinak.

Margin vzal tvuj kod a nic mu tam necouha. Takze v tom kousku neni chyba, asi. Nebo ji zpusobuji neco, co jsi neukazal.
Jinak, ve tvem poslednim kousku kodu je jakysi neexistujici tag ASP. Bylo by fajn, kdyz uz davas html kod, vytahnout ho primo z prohlizece (FF - ctrl+u / nastroje - vyvoj webu - zdrojovy kod), kde je skutecny html, ktery prohlizec pouziva s ne kod pro prekladac z asp.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0