Logo in de midden

[meertje]

Hallo, ik ben een beginneling op het gebied van CMS Made Simple. Ik vind het een mooi systeem, erg tevreden. Maar ik ben bezig het aan te passen, kleuren en dergelijke. Ik heb een logo gemaakt en in de code gezet. Maar nu staat hij niet in de middel. Hij staat links en ik wil de logo in de middel hebben. Hoe doe ik dat. Ik wil ook graag de kleuren van het logo gebruiken in de verdere layout van de site. Hoe kom ik achter de kleurcode?
Alvast bedankt.

Meertje

[meertje]

Heb je voor ons de URL van je site zodat dit iets duidelijker is?
zal iets moeten worden als

SvenA

De site waar ik mee bezig ben is www.rkpctoekomst.nl
Het is een site voor een basisschool. Ik heb voor CMS Made Simple gekozen omdat je gebruikers kunt aanmaken. En rechten geven. Zodat ik in grote lijnen de site kan beheren maar de kinderen en leerkrachten er zelf dingen op kunnen zetten. De de site moet wel een beetje "basisschool" zijn. Kleuren en dergelijke. Ik hoor het graag hoe ik verder moet

Meertje

[meertje]

Je moet via CSS hetvolgende aanpassen:

Code: Select all

div#header h1 a {

/* you can set your own image here */

   background: #385c72 url (images/cms/logo1.gif) no-repeat 0 12px; 

   display: block;

   height: 80px;             /* adjust according your image size */

   text-indent: -999em;  /* this hides the text */

   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */

}

waar nu images/cms/logo1.gif staat moet je de locatie van jouw logo zetten.
waar nu height: 80px staat moet je de 80px aanpassen aan de hoogte van jouw logo.

Ik surf nu met FF en ik zie jouw logo niet staan. In IE6 is dit wel OK.
Het is mij niet helemaal duidelijk hoe je het logo nu in je site gezet hebt.

SvenA

Waarom is het logo niet zichbaar in FF? Wat moet ik daarvoor veranderen?
Ik heb het volgende gedaan in Layout: Left sidebar + 1 column en Layout: Top menu + 2 columns heb ik het aangepast op de volgende manier:
/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 80px;    /* adjust according your image size */
   background: white;           
}

div#header h1 a {
/* you can set your own image here */
   background: white url (uploads/images/Logo Concept.jpg) no-repeat 0 0px;
   display: block;
   height: 80px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */

En vervolgens gekoppeld aan via CCS aan Left simple navigation + 1 column want dat is de standaard sjabloon die ik gebruik.

12px heb ik op 0px gezet, want dan verschuift het logo mooi verticaal.

Ik hoop dat je wat met deze info kunt.
Bedankt tot zo ver. Ik wil graag van je hulp gebruik maken.

Meertje

[meertje]

Ik heb de oplossing gevonden voor het FF probleem.

De naam van je jpg bestand bevat een spatie en blijkbaar heeft FF hier een probleem mee.
Dus in de naam van je jpg bestand moet je de spatie weghalen ofwel moet je in je CSS zetten:

Code: Select all

uploads/images/Logo%20Concept.jpg 

Het logo is nu inderdaad zichtbaar in FF. dus dat is opgelost. Voor het probleem van het logo heb ik het volgende bedacht. Een logo gemaakt op de volle breete. in mijn geval 950x95PX.

Bedankt voor de hulp.

Meertje

[RonnyK]

Volgens mij zou de ....

no-repeat 0 12px;

vervangen kunnen worden door:

no-repeat auto 12px;

aangezien de eerste parameter de horizontale positie bepaalt.

Ronny

[bojon]

Ik loop tegen hetzelfde probleem aan bij het plaatsen van het logo in het midden:

Met het gegeven antwoord dacht ik iets te kunnen.

no-repeat auto 12px;

- Ik heb een image gemaakt voor de hele achtergrond voor de site;

body {
   background-image: url(images/cms/bg.png);   
   color: #333;
   margin:1em;
}

- logo gemaakt met de volgende instellingen:

div#header {
   height: 120px;
   background: inherit;
   border-bottom: 1px solid #FFF;       
}

div#header h1 a {
   background:  url(images/cms/logo1.png) no-repeat;
   display: block;
   height: 120px;           
   text-indent: -999em; 
   text-decoration:none;
}

* Zet ik ook maar iets als ( 0 1px) achter repeat dan verdwijnt de image, dus ook met (auto 0px). 
* Zelfs als ik background tracht te veranderen in background-image is het logo niet meer zichtbaar.

Wat ik graag zou willen zien is dat het logo in het midden van het scherme geplaatst wordt ongeacht de grootte van het scherm.
Wie kan mij meer inzicht geven!

Bedankt alvast voor de moeite.
Bojon

[Dee]

Code: Select all

div#header h1 a {
/* you can set your own image here */
   background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px; 
   display: block;
   height: 80px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Code: Select all

background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px; 

veranderen in

Code: Select all

background: #385C72 url(images/cms/logo1.gif) no-repeat center 12px; 

[edit]
Kijk hier of hier voor meer inzicht.
[/edit]

Grtz,
D

[bojon]

Beste Dee

De w3 school had ik al doorgespit maar blijkbaar onvoldoende. Deze tip werkt.


Dank je Dee
Bojon