Header probleempje

[odil]

Ik ben bezig om het logo over de ganse breedte van de header te krijgen en het is bijna gelukt, hij is ook mooi te zien in alle resoluties maar zoals je ziet zijn er rondom nog blauwe randen te zien, hoe krijg ik die weg of hoe krijg ik het logo mooi over de ganse breedte.

het forum: www.hond-en-baas.be

[Derky]

Je moet een background-image instellen voor

Code: Selecteer alles

<div class="headerbar">

dan krijgt deze ook vanzelf hippe, afgeronde randen.

[odil]

Waar plaats ik die code en moet ik er iets aan toevoegen?

[Derky]

Het makkelijkste is om in overall_header.html even te zoeken naar:

Code: Selecteer alles

		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

En dit te veranderen in:

Code: Selecteer alles

		<div class="headerbar" style="background-image:url('./styles/prosilver/imageset/site_logo.gif');">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo" style="display:block; width:822px; height:120px;"></a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

En daarna de template verversen in het ACP.

[odil]

Het is gelukt maar rechts herhaald hij denk ik het logo?
Moet ik het logo groter maken of iets aan de code veranderen?

http://www.hond-en-baas.be/forum/

+++ EDIT ++

Ik moest dus nog iets veranderen in common.css

#wrap {
padding: 0 20px;
min-width: 650px;
}


vervang dat met het volgende:

#wrap {
padding: 0 20px;
min-width: 650px;
width: 800px;
margin: 0 auto;
}


Maar nu zit ik nog met die blauwe rand tussen het logo en het menu? (onder het logo)

[Derky]

Het ziet er al een stuk beter uit, je zou even deze code:

Code: Selecteer alles

 background-repeat:no-repeat; background-position:top center;

kunnen toevoegen na:

Code: Selecteer alles

background-image:url('./styles/prosilver/imageset/site_logo.gif'); 

(wel een spatie ertussen)

[odil]

Ik heb het hopelijk juist gedaan?
Ik zie geen betering, alles blijft hetzelfde?


<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
<div id="page-header">
<div class="headerbar" style="background-image:url('./styles/prosilver/imageset/site_logo.gif'); background-repeat:no-repeat; background-position:top center;">
<div class="inner"><span class="corners-top"><span></span></span>

<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo" style="display:block; width:900px; height:130px;"></a>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>


+++ EDIT +++


Het was mijn fout dat ik die blauwe rand nu onderaan kreeg
Ik veranderde in de overall.html de hoogte van de header in de maat van het logo en dat mocht ik niet doen.
De hoogte in overall.html moest 120 pixels zijn terwijl het logo 135 pixels hoog moest zijn (900x135)



Het was ook de bedoeling om als je veranderd van pagina dat je dan telkens een ander logo te zien kreeg.

Zie de wiki: http://wiki.phpbb.nl/Willekeurig_logo_(phpBB3)

Dit moest ik zoeken.

{SITE_LOGO_IMG}

En veranderen in:

<img src="{T_IMAGESET_PATH}/site-logo-{SITE_LOGO_RANDOM}.png" alt="Logo" title="Logo" />

Maar door de code aan te passen om het logo over de hele breedte te krijgen is dit stukje nu verdwenen?

{SITE_LOGO_IMG}

Nu kan ik dus mijn logo niet aanpassen om random te laten werken?
Iemand hier een oplossing voor.