[Joomla] Logo (background image) centreren in CSS template

[Verwijderd]

Even kort en krachtig.

Mijn custom banner wil niet naar behoren centreren in mijn standaard Joomla 1.5 layout.

Website: http://www.mind-bending.nl
Banner: http://www.mind-bending.nl/images/logos/Mind-bending.nl.png
Theme: rhuk_milkyway

Hoe ik de standaard banner moet veranderen daar ben ik inmiddels achter. Echter wil deze niet precies in het midden terecht komen na het editten van het template.css bestand. Onderstaand een voorbeeld uit de code van dit bestand:

code:

/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

body {
    margin: 0px 0px 0px 0px;
    font-size: 76%;
}

a:link, a:visited {
    text-decoration: none;
    font-weight: normal;
}

a:hover {
    text-decoration: underline;
    font-weight: normal;
}

input.button {
 cursor: pointer;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
}

div, p, table, td, th {
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.3em;
    font-size: 1em;
    color: #333;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
    padding: 10px 0;
    margin-bottom: 1px;
}

div.center {
  text-align: center;
}

div#wrapper {
    margin-left: auto;
    margin-right: auto;
}

body.width_medium div#wrapper {
    width: 950px;
}

body.width_small div#wrapper {
    width: 773px;
}

body.width_fmax div#wrapper {
    min-width: 750px;
    max-width: 1050px;
}

div#header_l {
    position: relative;
}

div#header_r {
    height: 90px;
    padding-left: 370px;
    padding-right: 30px;
    padding-top: 25px;
    overflow: hidden;
    text-align: left;
}

div#logo {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    width: 298px;
    height: 75px;
    background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
    margin-left: 30px;
    margin-top: 25px;
}

div#newsflash {
    width: auto;
    margin-left: 350px;
    margin-right: 30px;
    border: 1px solid #00f;
}

div#tabarea {
    background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
    margin: 0 11px;

}

div#tabarea_l {
    background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
    padding-left: 32px;
}

div#tabarea_r {
    height: 42px;
    background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
    padding-right: 1px;
}

div#footer_r {
    padding-top: 10px;
    height: 47px;
    overflow: hidden;
}

div#footer_r div {
    text-align: center;
    font-size: .90em;
    color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited  {
    color: #999;
}

div#footerspacer {
    height: 10px;
}

#pathway {
    padding: 0px 10px 8px;
    width: auto;
    margin-right: 250px;
    text-align: left;
}

#search {
    float: right;
    width:320px;
    margin-top: -20px;
    margin-right: 20px;
    height: 40px;
    overflow: hidden;
    text-align:right;
}

#area {
    padding: 0;
}

#whitebox {
    margin: 0 21px 0px 21px;
    background: #fff;
    width: auto;
}

#whitebox div {
    text-align: left;
}

#whitebox_t {
    background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}

#whitebox_tl {
    background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}

#whitebox_tr {
    height: 10px;
    overflow: hidden;
    background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}

#whitebox_m {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: auto;
    padding: 1px 8px;
}

#whitebox_b {
    margin-top: -5px;
    background: url(../images/mw_content_b.png) 0 100% repeat-x;
}

#whitebox_bl {
    background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}

#whitebox_br {
    height: 13px;
    background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

td.pill_l {
  background: url(../images/mw_menu_cap_l.png) no-repeat;
  width:  20px;
  height: 32px;

}

td.pill_m {
  background: url(../images/mw_menu_normal_bg.png) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}

td.pill_r {
  background: url(../images/mw_menu_cap_r.png) no-repeat;
  width:  19px;
  height: 32px;
}

#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}

#pillmenu li {
    float: left;
    background: url(../images/mw_menu_separator.png) top right no-repeat;
    margin: 0;
    padding: 0;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
    float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
}

#pillmenu a#active_menu-nav {
    margin-top:2px;
    height: 21px;
    line-height: 21px;
    background-position: 0 0;
}

#leftcolumn {
    padding: 0;
    margin: 0;
    width: 20%;
    float:left;
}

#maincolumn,
#maincolumn_full {
    margin-left: 20%;
    padding-left: 15px;
    width: 75%;
}

#maincolumn_full {
    margin-left: 0;
}

table.nopad {
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

table.nopad td.middle_pad {
    width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
    background: #fffebb;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2em;
    padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
    padding: 0;
    font-family:Helvetica ,Arial,sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    vertical-align: bottom;
    color: #666;
    text-align: left;
    width: 100%;
}

h2, .contentheading {
    padding: 0;
    font-family: Arial, Helvetica,sans-serif;
    font-size: 1.4em;
    font-weight: normal;
    vertical-align: bottom;
    color: #333;
    text-align: left;
    width: 100%;
}

table.contentpaneopen h3 {
    margin-top: 25px;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1.5em;
  padding-left: 0px;
    margin-bottom: 10px;
    text-align: left;
}

/* small text */
.small {
    font-size: .90em;
    color: #999;
    font-weight: normal;
    text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
    font-size: .90em;
    color: #999;
    font-weight: normal;
    text-align: left;
}

.createdate {
    height: 20px;
    vertical-align: top;
    font-size: .90em;
    color: #999;
    font-weight: normal;
    vertical-align: top;
    padding-bottom: 5px;
    padding-top: 0px;

}

a.readon {
    margin-top: 10px;
    display: block;
    float: left;
    background: url(../images/mw_readon.png) top right no-repeat;
    padding-right: 20px;
    line-height: 14px;
    height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
    background-color: #f6f6f6;
}

.ol-background {
    background-color: #666;
}

.ol-textfont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.ol-captionfont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #f6f6f6;
    font-weight: bold;
}
.ol-captionfont a {
    color: #0B55C4;
    text-decoration: none;
    font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
    padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
    display: block;
    height: 20px;
}

.article_column {
    padding-right: 5px;
}

.column_separator {
    border-left: 1px dashed #e0e0e0;
    padding-left: 10px;
}

td.buttonheading {

}

.clr {
    clear: both;
}

td.greyline {
  width: 20px;
  background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}

div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
    display: block;
    height: 20px;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background: #efefef;
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane {
    margin: 0;
    padding: 0;
    width: auto;
}

table.contentpaneopen li {
    margin-bottom: 5px;
}

table.contentpaneopen fieldset {
    border: 0;
    border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
    margin-top: 25px;
}

table.contentpaneopen h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

/* module control elements */
table.user1user2 div.moduletable {
    margin-bottom: 0px;
}

div.moduletable, div.module {
  margin-bottom: 25px;
}

div.module_menu h3 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #eee;
    margin: -23px -4px 5px -5px;
    padding-left: 10px;
    padding-bottom: 2px;
}

div.module_menu {
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}

div.module_menu div div div {
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 15px;
    width: auto;
}

div.module_menu div div div div {
    background: none;
    padding: 0;
}

div.module_menu ul {
    margin: 10px 0;
    padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
    font-weight: bold;
}

#leftcolumn div.module {
    padding: 0 10px;
}

#leftcolumn div.module table {
    width: auto;
}

/* forms */
table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
    width: 145px;
    border: 1px solid #ccc;
    margin: 15px 0 10px 0;
}

input#mod_login_username,
input#mod_login_password {
    width: 116px;
}

input#mod_login_username.openid {
    background: url(../images/login-bg.gif) 0 50% no-repeat;
    padding-left: 20px;
    width: 100px;
}

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
    margin-top: 5px;
}

table.paramlist td.paramlist_key {
    width: 128px;
    text-align: left;
    height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size : 14px;
    color : #c30;
    text-align: center;
    width: auto;
    background-color: #f9f9f9;
    border: solid 1px #d5d5d5;
    margin: 3px 0px 10px;
    padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
    padding: 4px;
    font-size: 11px;
}

.bannerfooter_text {
    padding: 4px;
    font-size: 11px;
    background-color: #F7F7F7;
    text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
    text-align: left;
}

/* Frontend Editing*/
fieldset {
    border: 1px solid #ccc;
    margin-top: 15px;
    padding: 15px;
}

legend {
    margin: 0;
    padding: 0 10px;
}

td.key {
    border-bottom:1px solid #eee;
    color: #666;
}

/* Tooltips */
.tool-tip {
    float: left;
    background: #ffc;
    border: 1px solid #D4D5AA;
    padding: 5px;
    max-width: 200px;
}

.tool-title {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-weight: bold;
    margin-top: -15px;
    padding-top: 15px;
    padding-bottom: 5px;
    background: url(../../_system/images/selector-arrow.png) no-repeat;
}

.tool-text {
    font-size: 100%;
    margin: 0;
}

/* Debug */
#system-debug     { color: grey; background-color: white; padding: 10px; margin: 10px; }
#system-debug div { font-size: 11px;}

Mijn vraag is eigenlijk of iemand weet welke opties ik eventueel kan gebruiken om de banner hard te centreren in het midden van de pagina. Ook bij het scalen van resoluties dient deze exact in het midden te staan!

Zelf heb ik al meerdere opties geprobeerd door middel van enkele Nederlandse CSS tutorials, maar de gegeven opties lijken de banner nou niet echt volledig in het midden te plaatsen. Wat ik graag zou hebben is dat het midden van het plaatje ook in het midden van de website komt te staan. Niet dat de linkerzijde van het plaatje in het midden begint, en de banner vervolgens de site uit floept...

Zou iemand mij een stukje voorbeeld code kunnen geven zodat ik dit vervolgens kan toepassen in de site?

Als ik het goed heb moet het volgende stukje code ge-edit worden:

code:

div#logo {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    width: 298px;
    height: 75px;
    background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
    margin-left: 30px;
    margin-top: 25px;
}

Dit zijn de regels 89 tot en met 99.

[BtM909]

Dus 748 regels code hier neerplempen en dan verwachten dat wij die ene regel voor je gaan uitpuizen? Overigens kan je code een taal meegeven, dus [code=css][/] geeft al een beter beeld

Ik zou zeggen probeer het opnieuw, post alleen relevante code en het liefst een testcase

Een volledige Joomla genereerde pagina is geen testcase

[ Voor 14% gewijzigd door BtM909 op 14-08-2007 22:40 ]