Autor Zpráva
Strike008
Profil *
Ahoj, můžete mi někdo poradit? Už jsem bezradný... Zakládám jeden web na CMS Drupal, a použil jsem template (vlastní vytvořit neumím), který mi naprosto vyhovuje svým vzhledem. Jediné co mi na něm vadí je jeho pohyblivá šířka. Můžete mi poradit, jak tomuto layoutu nastavit fixní šířku 980px (tohle jsem ještě zvládl), ale s tím, aby byl layout zarovnaný na středu obrazovky? Mě se ho povedlo zmenšit jen tak, že byl zarovnaný k levému okraji. Už jsem opravdu vyzkoušel vše, co mne napadlo, tak prosím vás, jestli byste někdo byl ochotný mi pomoci... Tady je obsah css souboru...

/* $Id: style.css,v 1.23.2.19 2008/05/26 13:57:21 hswong3i Exp $ */

/**
* Project:
* Contented7
*
* Designer:
* Tom Rowan, http://www.contenteddesigns.org/
* Developer:
* Edison Wong, http://edin.no-ip.com/
*
* Official Contented7 project page:
* http://www.contenteddesigns.org/templates/Contented7/
*
* Drupal Contented7 project page:
* http://drupal.org/project/contented7/
* http://edin.no-ip.com/about-me/projects/contented7/
*/

html {
direction: ltr; /* LTR */
}

/**
* Generic elements
*/
body {
direction: ltr; /* LTR */
color: #333;
background: #EEE;
font-size: 83%;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-weight: normal;
text-align: left; /* LTR */
margin: 0 auto;
padding: 0;
}
input {
font-size: 12px;
font-family: Verdana, sans-serif;
line-height: 100%;
}
textarea, select {
font-size: 12px;
font-family: Verdana, sans-serif;
line-height: 160%;
}
h1, h2, h3, h4, h5, h6 {
margin: .75em 0;
padding: 0;
font-weight: bold;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.39em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1.0em;
}
code, fieldset {
margin: .75em 0;
}
pre {
background: #CCC;
border: 1px solid #DDD;
font-size: 12px;
padding: .75em 1.5em;
}
blockquote {
margin: 1.5em 0;
}
p {
margin: .6em 0 1.2em;
padding: 0;
}
a:link, a:visited {
color: #C63;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
margin: .5em 0 1em;
padding: 0;
}
ol {
margin: .75em 0 1.25em;
padding: 0;
}
ol li, ul li {
margin: .4em 0 .4em .5em; /* LTR */
}
ul.menu, .item-list ul {
margin: .35em 0 0 -.5em; /* LTR */
padding: 0;
}
ul.menu ul, .item-list ul ul {
margin-left: 0; /* LTR */
}
ol li, ul li, ul.menu li, .item-list ul li, li.leaf {
margin: .15em 0 .15em .5em; /* LTR */
}
ul li, ul.menu li, .item-list ul li, li.leaf {
padding: 0 0 .2em 1.5em;
list-style-type: none;
list-style-image: none;
background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em; /* LTR */
}
ol li {
padding: 0 0 .3em;
margin-left: 2em; /* LTR */
}
ul li.expanded {
background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em; /* LTR */
}
ul li.collapsed {
background: transparent url(images/menu-collapsed.gif) no-repeat 0 .35em; /* LTR */
}
ul li.leaf a, ul li.expanded a, ul li.collapsed a {
display: block;
}
fieldset {
padding: .5em;
border: 1px solid #CCC;
}
fieldset ul.clear-block li {
margin: 0;
padding: 0;
background-image: none;
}
dl {
margin: .5em 0 1em 1.5em; /* LTR */
}
dl dd {
margin: 0 0 .5em 1.5em; /* LTR */
}
img, a img {
border: none;
}
table {
font-size: 1em;
width: 100%;
}
thead th {
font-weight: bold;
}
th a:link, th a:visited {
color: #6F9DBD;
}
td, th {
padding: .3em .5em;
}
tr.even, tr.odd, tbody th {
border-width: 1px 0;
}
tr.odd, tr.info {
background-color: #FFF;
}
tr.even {
background-color: #EEE;
}
tr.drag {
background-color: #FFFFF0;
}
tr.drag-previous {
background-color: #FFD;
}
tr.odd td.active {
background-color: #DDECF5;
}
tr.even td.active {
background-color: #E6F1F7;
}
td.region, td.module, td.container, td.category {
border-top: 1.5em solid #FFF;
border-bottom: 1px solid #CCC;
background-color: #D4E7F3;
color: #455067;
font-weight: bold;
}
tr:first-child td.region, tr:first-child td.module, tr:first-child td.container, tr:first-child td.category {
border-top-width: 0;
}
span.form-required {
color: #FFAE00;
}
span.submitted, .description {
font-size: .92em;
color: #898989;
}
.description {
line-height: 150%;
margin-bottom: .75em;
color: #898989;
}
.messages {
margin: .75em 0;
padding: .5em 1em;
}
.messages ul {
margin: 0;
}
.form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item {
margin: .25em 0;
}
#center form {
margin-bottom: 2em;
}
.form-button, .form-submit {
margin: 2em .5em 1em 0; /* LTR */
}
#dblog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
table .form-button, table .form-submit {
margin: 0;
}
.box {
margin: 2.5em 0;
}
.meta,
.meta * {
background: none;
font-weight: normal;
line-height: 20px;
margin: .2em 0 0;
padding: 0;
}
.meta {
color: #AAA;
}

/**
* Special image mapping
*/
blockquote {
padding: 0 0 0 24px; /* LTR */
background: url(images/blockquote.png) left top no-repeat; /* LTR */
border: none;
}
.comment-new h3.title {
float: left; /* LTR */
background: url(images/new.png) right center no-repeat; /* LTR */
padding: 2px 20px 2px 0; /* LTR */
}
.meta .editlink {
float: right; /* LTR */
width: 16px;
height: 16px;
background: url(images/pencil.png) center center no-repeat; /* LTR */
padding: 2px;
}
.meta .submitted {
background: url(images/date.png) left center no-repeat; /* LTR */
font-size: 1em;
padding: 0 0 0 18px; /* LTR */
}
.meta .terms ul.links li {
background: url(images/tag_blue.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.blog_usernames_blog {
background: url(images/user.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.book_add_child {
background: url(images/book.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.book_printer {
background: url(images/printer.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.comment_forbidden {
background: url(images/comment.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.comment_new_comments,
ul.links li.comment_reply,
ul.links li.comment_add {
background: url(images/comment_add.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.comment_delete {
background: url(images/comment_delete.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.comment_edit {
background: url(images/comment_edit.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.comment_comments {
background: url(images/comments.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.node_read_more {
background: url(images/page_white_text.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.statistics_counter {
background: url(images/chart_curve.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}
ul.links li.upload_attachments {
background: url(images/disk.png) left center no-repeat; /* LTR */
padding: 2px 0 2px 18px; /* LTR */
}

/**
* Layout
*/
#header-region {
float: left;
width: 100%;
min-height: 20px;
}
#header-region .block-region {
display: block;
margin: 10px;
padding: .5em;
}
#wrapper {
float: left;
width: 100%;
}
#wrapper #container {
max-width: 1240px;
margin: 0 auto;
padding: 0 10px;
}
#wrapper #container #header {
height: 100px;
color: #EEE;
background: #C63;
}
#wrapper #container #header #logo img {
float: left; /* LTR */
margin: 10px 0 0 10px; /* LTR */
}
#wrapper #container #header #slogan-floater {
float: left; /* LTR */
margin: 10px 0 0 10px; /* LTR */
padding: 0;
}
#wrapper #container #header #slogan-floater .site-slogan {
float: left; /* LTR */
clear: both;
color: #EEE;
background: #C63;
font-size: 83%;
}
/* With 3 columns, require a minimum width of 1020px to ensure there is enough horizontal space. */
body.two-sidebars {
min-width: 980px;
}
/* With 2 columns, require a minimum width of 800px. */
body.no-sidebars,
body.sidebar-left,
body.sidebar-right {
min-width: 760px;
}
/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#center {
float: left;
width: 100%;
padding: 10px 0 0;
}
/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
margin-left: -210px;
}
body.sidebar-right #center {
margin-right: -210px;
}
body.two-sidebars #center {
margin: 0 -210px;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
margin-left: 210px;
}
body.sidebar-right #squeeze {
margin-right: 210px;
}
body.two-sidebars #squeeze {
margin: 0 210px;
}
/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
width: 210px;
float: left;
font-size: 75%;
padding: 10px 0 0;
z-index: 2;
position: relative;
}
#wrapper #container .sidebar .block {
margin: 0 0 10px;
}
#sidebar-left .block {
padding-right: 10px;
}
#sidebar-right .block {
pad
Strike008
Profil *
Myslím, že půjde o nějakou úpravu této části, ale jistý si nejsem...

* Layout
*/
#header-region {
float: left;
width: 100%;
min-height: 20px;
}
#header-region .block-region {
display: block;
margin: 10px;
padding: .5em;
}
#wrapper {
float: left;
width: 100%;
}
#wrapper #container {
max-width: 1240px;
margin: 0 auto;
padding: 0 10px;
}
#wrapper #container #header {
height: 100px;
color: #EEE;
background: #C63;
}
#wrapper #container #header #logo img {
float: left; /* LTR */
margin: 10px 0 0 10px; /* LTR */
}
#wrapper #container #header #slogan-floater {
float: left; /* LTR */
margin: 10px 0 0 10px; /* LTR */
padding: 0;
}
#wrapper #container #header #slogan-floater .site-slogan {
float: left; /* LTR */
clear: both;
color: #EEE;
background: #C63;
font-size: 83%;
Strike008
Profil *
:-( nikdo? Prosím, nemůžete aspoň napsat, čím by to mohlo být? Docela to potřebuju, ale jsem začátečník, tak nevím jak na to :-/
Chamurappi
Profil
Reaguji na Strika008:
:-( nikdo?
Nikdo. Skoro každý, kdo vidí několikastránkový výpis CSS, uteče. Dlouhé zdrojáky nikdo nezkoumá.
Kde je HTML kód, který se tím stylopisem styluje? Možná by šel dohledat, ale to je moc práce.

Kdybys místo kódu vložil odkaz na konkrétní stránku, zřejmě už bys měl dávno odpověď.
Str4wberry
Profil
Reakce na Strike008:
A kde máš nastavenou tu šířku. Měla by být u body, který pomocí margin: 0 auto centruješ.
Strike008
Profil *
Chamurappi: jo, to chápu, omlouvám se, pokud budu mít další dotaz, bude věcnější a bez celého kódu
Str4wberry: dík za nakopnutí správným směrem, udělal jsem tohle (změny jsou tučně) a jede to na všech třech hlavních prohlížeších, tak doufám, že to je správně

/**
* Layout
*/
#header-region {
width: 980px;
min-height: 20px;
margin: 0 auto;
}
#header-region .block-region {
display: block;
margin: 10px;
padding: .5em;
}
#wrapper {
margin: 0 auto;
width: 980px;
Str4wberry
Profil
Jede to na všech třech hlavních prohlížeších, tak doufám, že to je správně,“ napsal Strike008.
Pokud to funguje… Ale zadat tu šířku jen pro body nestačilo?
Strike008
Profil *
Ale zadat tu šířku jen pro body nestačilo?

hm, tak to samozřejmě stačí, jen bych nesměl být magor a nezkoušet to hned složitě... :-) Díky moc za rady!

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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