| Autor | Zpráva | ||
|---|---|---|---|
| Turek Profil * |
#1 · Zasláno: 26. 11. 2010, 23:14:46
Zdravím, prosím o pomoc s tímto webem: http://turek.bloguje.cz/
Jde o to že jednotlivé příspěvky se skládají do kaskády a nejsou zarovnané pod sebou. Prostě bych chtěl aby 2. i 1. příspěvek byl horizontálně zarovnán jako ten horní (3.) Už se s tím trápím 2 dny, a nemůžu na to dojít, kde v tom je chyba. Jen se mě povedlo že byly všechny příspěvky zarovnané na kraji, ale bez odsazení, takže jakoby nic... Díky za pomoc, a nebíjte mě prosím, dá se říct že začínám =)) Tady je výpis CSS stylu v kterém by to mělo být. (měl by to být ten "column 2") Zbytek jde dohladat ve zdrojáku. /* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto;
margin-right: auto;
}
/* main container */
#main{width: 780px;}
/* links above the logo / footer */
#links, #footer
{ padding: 10px 21px 0px 19px;
width: 720px;
height: 26px;
font-size: 94%;
text-transform: uppercase;
}
#links{text-align: right;}
#footer{text-align: center;}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ width: 760px;
height: 100px;
text-align: left;
}
#logo h1
{ margin: 0px;
padding: 41px 0px 0px 19px;
font-size: 150%;
letter-spacing: .2em;
}
#logo h2
{ margin: 0px;
padding: 0px 0px 0px 29px;
}
/* navigation menu */
#menu
{ height: 42px;
width: 760px;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li a
{ display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
/* main content */
#content
{ width: 760px;
height: auto;
padding: 0px;
overflow: hidden;
}
/* column 1 - contains sidebar items */
#column1
{ width: 207px;
float: right;
padding: 16px 0px 15px 0px;
}
.sidebaritem
{ text-align: left;
width: 188px;
float: left;
margin: 0px 0px 25px 0px;
}
.sbihead
{ height: 14px;
width: 188px;
padding: 5px 0px 5px 19px;
text-transform: uppercase;
}
.sbihead h1
{ padding: 0px;
margin: 0px;
font-weight: bold;
font-size: 112%;
}
.sbicontent{padding: 14px 8px 8px 19px;}
.sbicontent p
{ line-height: 14px;
padding: 0px 0px 8px 0px;
}
.sbilinks{padding: 0px;}
.sbilinks ul{margin: 0px auto;}
.sbilinks li
{ margin: 0px;
float: left;
list-style: none;
}
.sbilinks li a , .sbilinks li a:hover
{ float: left;
height: 16px;
text-decoration: none;
padding: 5px 0px 4px 19px;
width: 188px;
border: 0px;
}
/* column 2 - page content */
#column2
{ text-align: justify;
width: 512px;
float: center;
padding: 12px 3px 15px 19px;
}
#column2 h1
{ padding: 6px 0px 4px 0px;
margin: 0px 0px 12px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px dashed;
}
.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}
/* additional colour scheme selections */
#colour{margin: 0px 0px 20px 0px;}
#colour a, #colour a:hover{border: 0px;}
.blue
{ background: #FFFFFF url(blue.png) no-repeat left center;
color: #109CEF;
padding: 0px 40px 0px 20px;
}
.green
{ background: #FFFFFF url(green.png) no-repeat left center;
color: #94C65A;
padding: 0px 40px 0px 20px;
}
.purple
{ background: #FFFFFF url(purple.png) no-repeat left center;
color: #CE5AEF;
padding: 0px 40px 0px 20px;
}
.orange
{ background: #FFFFFF url(orange.png) no-repeat left center;
color: #FF9C21;
padding: 0px 40px 0px 20px;
}
|
||
| panther Profil |
#2 · Zasláno: 26. 11. 2010, 23:19:12
Turek:
změň id="column2" na class="column2" a v CSS pak měj toto:
.column2 {padding: 12px 3px 15px 19px}
.column2 .column2 {padding-left: 0;}Jestli jsem tě tedy pochopil. Změnu ID na CLASS jsem uvedl proto, že id jako unikátní identifikátor má být na stránce jen jednou. |
||
| Turek Profil * |
#3 · Zasláno: 27. 11. 2010, 00:30:40
No... moc jsi mě nopomohl
při změně id="column2" na class="column2" se úplně zruší css styl tohoto textu, a zůstane tam jen samotný text a když jsem přepsal css na: #column2 { width: 512px; padding: 12px 3px 15px 19px; padding-left: 0; } (ten width tam musí být, kvůli omezení šířky) tak mě vzniklo to samé, jak když jsem předtím přepsal tu 19ku na 0 .. - zarovnalo se to sice na levý kraj, ale je to úplně bez odsazení nelepeno na kraji :/ takže fakt nevím... |
||
| yFang Profil |
#4 · Zasláno: 27. 11. 2010, 00:32:36
Turek:
„při změně id="column2" na class="column2" se úplně zruší css styl tohoto textu, a zůstane tam jen samotný text“ Musíš pak také změnit v css # na . |
||
| Turek Profil * |
#5 · Zasláno: 27. 11. 2010, 00:47:02
yFang:
díky moc =) |
||
| Turek Profil * |
#6 · Zasláno: 27. 11. 2010, 01:15:02
A ještě malý detail ale.. kousek se mě posunula spodní lišta (v css jako footer) - ale jen na hlavní stránce, na stránce s jakýmkoliv přispěvkem je dobře.
když jsem ji zkoušel taky předělat na ten class, tak se to pos** ještě víc... V tom css je totiž, zdá se mě nějak moc těch nastavení ohledně té lišty, a určitě by to šlo napsát stručněji |
||
|
Časová prodleva: 13 let
|
|||
0