| Autor | Zpráva | ||
|---|---|---|---|
| snop Profil |
#1 · Zasláno: 8. 10. 2012, 00:17:11
Pěkný den mám na webu nějaký wrapper div a uvnitř toho mám dva DIVy s paramtrem inline-block, abych jim mohl definovat výšku, šířku atd. Ale jenom u prvního mám definovanou napevno šířku u druhého ji nechci dávat na pevno, ale pokud se mi do toho druhého (nepevného) dostane hodně textu, tak se ten div objeví na dalším řádku, což je nežádoucí. Pro představu je zde i css. Kde menu je ten první a levý div a content je ten druhý, undertopbar je ten obalovací a topbar je listicka nahoře
Díky!!! CSS: /*
Document : syle.css
Created on : 1.10.2012, 21:07:55
*/
root {
display: block;
}
#topbar {
background-color: #505050;
width: 100%;
height: 25px;
left: 0px;
top: 0px;
position: absolute;
}
#topbar a, #topbar{
color: #DDDDDD;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#undertopbar {
left: 0px;
top: 25px;
position: absolute;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
word-break: keep-all;
}
#menu, #content {
margin-top: 15px;
position: relative;
vertical-align: top;
display: inline-block;
}
#menu a {
display: block;
text-decoration: none;
color: #505050;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
padding-left: 10px;
padding-right: 40px;
padding-bottom: 15px;
} |
||
| peta Profil |
#2 · Zasláno: 8. 10. 2012, 09:04:06
Mas ukazku? Tato cast kodu je zajimava, nicmene bez prislusneho html prilis obecna.
Povídání o živých ukázkách Tez mi neni jasne z popisu, co to presne dela a co to ma delat. "div objeví na dalším řádku" - slovo div tam nikde neni "position: relative;" - pokud neco napozicujes relativne, tak si to zachovava svoji pozici bez napozicovani. Takze, pokud by se to normalne zalomilo na dalsi radek, tak se to zalomi. Pokud to nemas obklopene dalsim prvkem s position absolute, relative a nemas u tomo napsane left:0; top:0;, napr. |
||
| snop Profil |
Omlouvám se, zde je html včetně css. Jsou to kompletní kódy, abych na něco nazpoměl. Díky za ochotu!
BTW: Živá ukázka to sice není, ale jde o to, že ještě není kam to zveřejnit. HTML: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="login-dialog" title="Přihlásit se" style="display:none"></div>
<div id="topbar">
<table width="100%"><tr>
<td align="left" style="padding-left: 10px;">Nepřihlášený uživatel (N)</td>
<td align="right" style="padding-right: 10px;"><a href="#" id="login-link">Přihlásit se</a></td>
</tr></table>
</div>
<div id="help-btn" location="index">?</div>
<div id="undertopbar">
<div id="menu">
<a href="index.php">Úvod</a>
<a href="contests.php">Soutěže</a>
<a href="users.php">Uživatelé</a>
<a href="help.php?location=general">Nápověda</a>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus augue non sapien. Nullam eget nisl. Duis pulvinar. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Etiam neque. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. In rutrum. Ut tempus purus at lorem. Sed convallis magna eu sem. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Aenean id metus id velit ullamcorper pulvinar. Nulla est. Maecenas lorem. Mauris tincidunt sem sed arcu. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Integer vulputate sem a nibh rutrum consequat. In rutrum. Aenean placerat. Maecenas libero. In rutrum. Integer pellentesque quam vel velit. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Curabitur sagittis hendrerit ante. Duis risus. Suspendisse nisl. Curabitur bibendum justo non orci. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque porta. Aliquam erat volutpat. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed ac dolor sit amet purus malesuada congue. Etiam bibendum elit eget erat. Et harum quidem rerum facilis est et expedita distinctio. Integer lacinia. Maecenas lorem. Curabitur vitae diam non enim vestibulum interdum. Fusce nibh. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Vivamus porttitor turpis ac leo. Mauris dictum facilisis augue. Mauris metus. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce consectetuer risus a nunc. Proin mattis lacinia justo. Nam quis nulla. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Suspendisse sagittis ultrices augue. Pellentesque sapien. Fusce wisi. Suspendisse nisl. Curabitur vitae diam non enim vestibulum interdum. Etiam neque. Maecenas libero. Duis pulvinar. Vivamus ac leo pretium faucibus. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nam sed tellus id magna elementum tincidunt. Aliquam erat volutpat. Fusce nibh. Curabitur sagittis hendrerit ante. Sed convallis magna eu sem. Ut tempus purus at lorem. Duis viverra diam non justo. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce wisi. Duis condimentum augue id magna semper rutrum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer imperdiet lectus quis justo. Praesent id justo in neque elementum ultrices. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Praesent vitae arcu tempor neque lacinia pretium. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
</body>
</html>CSS: (style.css) /*
Document : syle.css
Created on : 1.10.2012, 21:07:55
Author : dvorak.ruda
Description:
Purpose of the stylesheet follows.
*/
root {
display: block;
}
#topbar {
background-color: #505050;
width: 100%;
height: 25px;
left: 0px;
top: 0px;
position: absolute;
}
#topbar a, #topbar{
color: #DDDDDD;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#undertopbar {
left: 0px;
top: 25px;
position: absolute;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
word-break: keep-all;
}
#menu, #content {
margin-top: 15px;
position: relative;
vertical-align: top;
display: inline-block;
}
#menu a {
display: block;
text-decoration: none;
color: #505050;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
padding-left: 10px;
padding-right: 40px;
padding-bottom: 15px;
}
.table-full-border {
border: none;
border-spacing: 0px;
}
.table-full-border th, .table-full-border td {
border: 1px solid black;
border-spacing: 0px;
}
.table-full-border th, .table-full-border td {
padding-left: 5px;
padding-right: 5px;
}
h1, h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-size: larger;
}
.error {
color: red;
font-weight: bold;
font-size: x-large;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.contest-general-info {
vertical-align: top;
display: inline-block;
border: 2px dashed #D0D0D0;
text-align: center;
padding: 3px 15px 3px 15px;
margin: 0px 10px 30px 0px;
}
.contest-general-info p{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#help-btn {
position: absolute;
top: 25px;
right: 0px;
width: 75px;
font-size: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #505050;
text-decoration: none;
}
#set-btn {
position: absolute;
top: 25px;
width: 100px;
text-align: center;
right: 75px;
font-size: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #505050;
text-decoration: none;
} |
||
|
Časová prodleva: 5 dní
|
|||
| snop Profil |
#4 · Zasláno: 14. 10. 2012, 19:39:01
TOP
je to funkcni zde: http://snopec.wz.cz/fsrv/jpw.html Lorem je pod menu, ale potrebuji aby zustal vedle (napravo). |
||
| Petr ZZZ Profil |
Řešil bych to obtékáním. Menu bych dal do jednoho bloku (např.
<ul>) a všechny odstavce textu do jednoho společného <div>u. Oběma blokům musíš definovat šířku (nejlépe v pixelech nebo v procentech), aby obtékání fungovalo.
|
||
| panther Profil |
#6 · Zasláno: 15. 10. 2012, 10:28:25
snop:
pripadne, druha moznost: #menu {float: left; width: ...px}
#content {margin-left: ...px}Levy margin contentu bude stejny jako sirka menu + mezera mezi obema bloky. Display: inline-block na toto nebude dobre pouzit, IE <= 7 neumeji na udelat z blokovych elementu inline-block.
|
||
| snop Profil |
panther:
> #menu {float: left; width: ...px} > #content {margin-left: ...px} Dekuji tohle me nanapadlo uz mi to jde a je to super. Diky a zbavil jsem se i inline divu. |
||
|
Časová prodleva: 12 let
|
|||
0