[CSS]Header aanpassen

[xenium]

Ben dus wat aan het prullen met een site en kom het volgende probleem tegen...
Ik zou ook mijn <h1>Header Title</h1> een <h2>tag willen zetten met een andere boodschap (voorbeeld 'welkom').

<div id="main">
<!-- ##### Header ##### -->
<div id="header_wrapper">
<div id="breadcrumbs"><? stripslashes(include('breadcrumbs.php')); ?></div>
<div id="header">
  <h1>Header Title</h1>
</div>
</div>

De <div id="main"> wordt helemaal onderaan afgesloten (en staat closing tag staat er dus niet bij).

Hierbij een deel van de CSS code:

#main {
	width:750px;
	color:#666666;
	text-align:center;
	margin:0 auto;
	font-size:80%;
	line-height:130%;
	background-color:#FFFFFF;
}

#header_wrapper, #nav_wrapper, #content_wrapper {
	width:765px;
}

/* top right breadcrumbs */
#breadcrumbs {
	float:right;
	margin:0 10px -12px 0;
	font-size:85%;
}

/* blue wave header image */
#header {
	clear:right;
	background-image:url(images/header-1.gif);
	background-repeat:no-repeat;
	text-align:left;
}
#header h1 { color:#2a56d6; height:115px; margin:0 15px; padding:0; line-height:2em; font-size:180% }

Dus ik declareer:

#header h2 { color:#2a56d6; height:100px; margin:0 15px; padding:0; line-height:2em; font-size:100% }

Wanneer ik mijn CSS file upload en ook mijn pagina aanpas en in de div klasse header mijn boodschap in h2 zet, krijg ik deze h2 tag te zien in mijn in mijn content klasse (dus waar de tekst van mijn website komt te staan).

Kan iemand mij hiermee verder helpen?

Alvast bedankt

 

[WinME]

een visueel voorbeeldje maakt dit soort problemen vaak wel wat helderder. heb je dat voor me?

op dit moment kan ik nog niet begrijpen dat zoiets gebeurt

 

[xenium]

Ik heb eventjes de situatie grafisch voorgesteld met de nodige printscreens...

De afbeelding 'nu' is hoe de situatie nu is en waar ik mijn h2 graag zou hebben.
De afbeelding 'situatie met h2 zonder CSS' is wanneer ik mijn h2 toegevoegd heb en dan krijg je te zien waar mijn h2 staat (zowel in html code als voorbeeld)
De afbeelding 'situatie met h2 met CSS' is wanneer ik een '#header h2' toegevoegd heb aan de CSS code (zowel CSS, HTML code als voorbeeld).

Voor de volledigheid heb ik ook het CSS bestand toegevoegd (deze komt van internet) (style.txt)...

Alvast bedankt...

Groetjes

 

[WinME]

Ten eerste raad ik je aan alleen heading tags te gebruiken voor de hierachie van je website te waarborgen. de <h1> tag voor de titel van de huidige pagina (home, over mij, contact etc) en <h2> voor subtitels enzovoort. Eigenlijk is dit voor search engine optimalisation (SEO).

Aan de andere kant heb je misschien geen zin om het hele (geloof al bestaande layout?) om te gooien en zoek je de simpelste oplossing. Terplekke weet ik alleen geen quick-fix voor dit probleem. Misschien als je me de HTML + CSS stuurt dat ik er zelf een beetje stoeien.

anders ik heb 3 oplossingen voor je, persoonlijke favoriet is oplossing 1 en anders 2

oplossing 1
Je titel + slogan vervangen voor een plaatje. <a href="/" title="Titel - slogan"><img src="images/logo.gif" alt="Titel - slogan" /></a> Bijkomend voordeel hiervan is dat je fancy lettertypes op je logo los kan laten. Daarbij is het nu ook mogelijk voor bezoekers om op het logo te klikken waardoor deze naar de beginpagina worden gebracht, dit zie je vaak op sites. Natuurlijk moet je de image wel nog positioneren met CSS.

oplossing 2
De heading tags voor divjes vervangen.
<div id="title">Titel</div>
<div id="slogan">slogan</div>
Deze ook met CSS opmaken en positioneren,

oplossing 3
De heading tags (<h1> en <h2>) absolute positioneren. Op deze manier blijft je HTML source hetzelfde en moet je alleen de CSS wijzigen. Ik raad dit alleen af (zie eerste alinea)

Ik weet niet hoeveel ervaring je met CSS heb, anders kan ik je erbij helpen

 

[xenium]

Ten eerste raad ik je aan alleen heading tags te gebruiken voor de hierachie van je website te waarborgen. de <h1> tag voor de titel van de huidige pagina (home, over mij, contact etc) en <h2> voor subtitels enzovoort. Eigenlijk is dit voor search engine optimalisation (SEO).

Aan de andere kant heb je misschien geen zin om het hele (geloof al bestaande layout?) om te gooien en zoek je de simpelste oplossing. Terplekke weet ik alleen geen quick-fix voor dit probleem. Misschien als je me de HTML + CSS stuurt dat ik er zelf een beetje stoeien.

anders ik heb 3 oplossingen voor je, persoonlijke favoriet is oplossing 1 en anders 2

oplossing 1
Je titel + slogan vervangen voor een plaatje. <a href="/" title="Titel - slogan"><img src="images/logo.gif" alt="Titel - slogan" /></a> Bijkomend voordeel hiervan is dat je fancy lettertypes op je logo los kan laten. Daarbij is het nu ook mogelijk voor bezoekers om op het logo te klikken waardoor deze naar de beginpagina worden gebracht, dit zie je vaak op sites. Natuurlijk moet je de image wel nog positioneren met CSS.

oplossing 2
De heading tags voor divjes vervangen.
<div id="title">Titel</div>
<div id="slogan">slogan</div>
Deze ook met CSS opmaken en positioneren,

oplossing 3
De heading tags (<h1> en <h2>) absolute positioneren. Op deze manier blijft je HTML source hetzelfde en moet je alleen de CSS wijzigen. Ik raad dit alleen af (zie eerste alinea)

Ik weet niet hoeveel ervaring je met CSS heb, anders kan ik je erbij helpen

Ik ken eigenlijk bijna niets van CSS, maar zoals je zegt kan ik misschien best voor oplossing 1 gaan, ook al ben ik niet zo heel goed in het maken van grafische dingen (maar een stom tekstje zal wel lukken). Ook was ik aan het denken voor oplossing 2 en heb een paar dingen geprobeerd, maar die image blijft altijd op dezelfde plaats staan, dus dit lukt mij niet.

Als ik voor oplossing 1 zou kiezen, hoe moet ik dit dan opvangen in CSS, dus dat de afbeelding gepositioneerd wordt in CSS?

 

[WinME]

Ik ken eigenlijk bijna niets van CSS, maar zoals je zegt kan ik misschien best voor oplossing 1 gaan, ook al ben ik niet zo heel goed in het maken van grafische dingen (maar een stom tekstje zal wel lukken). Ook was ik aan het denken voor oplossing 2 en heb een paar dingen geprobeerd, maar die image blijft altijd op dezelfde plaats staan, dus dit lukt mij niet.

Als ik voor oplossing 1 zou kiezen, hoe moet ik dit dan opvangen in CSS, dus dat de afbeelding gepositioneerd wordt in CSS?

Je heading tag(s) vervangen voor de image tag (zoals die uit mijn vorige post), en de volgende CSS code toevoegen aan je stylesheet:

img { border: 0;}
#header img {position: absolute; left: 30px; top: 30px;}

met het aantal pixels moet jezelf ff stoeien. laat me even weten of het gelukt is op deze manier.

 

[xenium]

Je heading tag(s) vervangen voor de image tag (zoals die uit mijn vorige post), en de volgende CSS code toevoegen aan je stylesheet:

img { border: 0;}
#header img {position: absolute; left: 30px; top: 30px;}

met het aantal pixels moet jezelf ff stoeien. laat me even weten of het gelukt is op deze manier.

Ik heb dit zojuist geprobeerd en heel hard bedankt, maar dit geeft toch nog geen goed resultaat.
Op de screenshop 'situatie nu met image' kan je zien dat de wave (die andere afbeelding) achter het logo komt te zitten...

Dit heb ik mijn CSS file bijgestoken:

img { border: 0;}
#header img {position:relative; left: 0px; top: 0px;}

Hopelijk weet iemand hiervoor een oplossing.

Alvast bedankt

 

[WinME]

in je stylesheet #header een height meegeven.

#header {
	clear:right;
	background-image:url(images/header-1.gif);
	background-repeat:no-repeat;
	text-align:left;
	height: 100px;
}

ook met deze aantal pixels moet je ff stoeien. succes

 

[xenium]

in je stylesheet #header een height meegeven.

#header {
	clear:right;
	background-image:url(images/header-1.gif);
	background-repeat:no-repeat;
	text-align:left;
	height: 100px;
}

ook met deze aantal pixels moet je ff stoeien. succes

Heel hard bedankt, het werkt... Moest mijn logo nog aanpassen (ietske verkleinen), want het kwam nog steeds over die wave (header-1)...

Groetjes