Gehele layout 'tegen' bovekant aan

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Forumregels

LEES: Richtlijnen voor Support. Vul de support template in!
phpBB3.0.x
Verschaf iemand geen servertoegang tenzij het niet anders kan. Maak altijd eerst een volledige backup en verander de inloggevens na afloop. Eigen risico.
Plaats reactie
t1mm3h
Berichten: 9
Lid geworden op: 12 jan 2009, 10:19

Gehele layout 'tegen' bovekant aan

Bericht door t1mm3h » 12 jan 2009, 18:12

Ik heb de stijl: 2Unilever geinstalleerd.

Bij deze stijl zit er standaard een 'open' ruimte tussen de header en de bovenkant van de pagina.
Deze lege ruimte wil ik verwijderen zodat de header direct tegen de bovenkant van de site zit.

Er staat in de stylesheet.css een stukje waarmee het probleem opgelost moet kunnen worden, maar ik weet niet hoe.

Dit is het stukje code:

Code: Selecteer alles

#ipbwrapper{ 
	margin: 0px auto 0px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
	margin-top: 0px
	text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
	/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
	width: 827px;
}
Zoals te lezen is namelijk: also applies a 20px gap at the top and bottom of the board.
Dat wil ik dus op een manier weg hebben.

Wie kan mij vertellen hoe?

Semi_Deus
Berichten: 326
Lid geworden op: 13 jun 2007, 23:50
Locatie: Zeist
Contacteer:

Re: Gehele layout 'tegen' bovekant aan

Bericht door Semi_Deus » 12 jan 2009, 18:54

Dit is wat je nodig hebt denk ik:

Code: Selecteer alles

#ipbwrapper{ 
   margin: 0px auto;
   margin-top: 0px
   text-align: left;
   width: 827px;
}
Afbeelding

t1mm3h
Berichten: 9
Lid geworden op: 12 jan 2009, 10:19

Re: Gehele layout 'tegen' bovekant aan

Bericht door t1mm3h » 12 jan 2009, 19:13

Dat had ik ook al geprobeerd met margin-top 0px maar helaas, werkt niet.

Jim
Berichten: 3900
Lid geworden op: 21 feb 2007, 14:53
Locatie: Groningen
Contacteer:

Re: Gehele layout 'tegen' bovekant aan

Bericht door Jim » 12 jan 2009, 19:19

Heb je je thema's vernieuwd na het uitvoeren van de wijziging?
Beheerderspaneel -> Stijlen -> Thema's -> Vernieuw
Jim Mossing Holsteyn - Beheerder
Documentatie | Algemene voorwaarden | Wiki

Heb je suggesties over het verbeteren van phpBB.nl of andere site-gerelateerde vragen? Stuur me een PB!

t1mm3h
Berichten: 9
Lid geworden op: 12 jan 2009, 10:19

Re: Gehele layout 'tegen' bovekant aan

Bericht door t1mm3h » 12 jan 2009, 19:55

Jim schreef:Heb je je thema's vernieuwd na het uitvoeren van de wijziging?
Beheerderspaneel -> Stijlen -> Thema's -> Vernieuw
Ja.

Gebruikersavatar
Johan
Berichten: 2376
Lid geworden op: 05 mei 2007, 15:24
Locatie: memberlist.php

Re: Gehele layout 'tegen' bovekant aan

Bericht door Johan » 12 jan 2009, 20:15

Post eens wat meer CSS? Ik denk dat het fout zit in de body (was bij prosilver wel zo, dacht ik) :)
Voormalig Support Teamlid

t1mm3h
Berichten: 9
Lid geworden op: 12 jan 2009, 10:19

Re: Gehele layout 'tegen' bovekant aan

Bericht door t1mm3h » 12 jan 2009, 20:28

Johan schreef:Post eens wat meer CSS? Ik denk dat het fout zit in de body (was bij prosilver wel zo, dacht ik) :)

Code: Selecteer alles

body {
	background: #FFF;
	color: #666666;
	font-family: Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
	font-size: 10px;
	line-height: 135%;
	margin: 0px;
	padding: 0px; /* required for Opera to have 0 margin */

}

#wrapheader {
	min-height: 120px;
	height: auto !important;
	height: 120px;
/*	background-image: url('./images/background.gif');
	background-repeat: repeat-x;*/
/*	padding: 0 25px 15px 25px;*/
	padding: 0;
}

#wrapcentre {
	margin: 15px 25px 0 25px;
}

#wrapfooter {
	text-align: center;
	clear: both;
}

#wrapnav {
	width: 100%;
	margin: 0;
	background-color: #ECECEC;
	border-width: 1px;
	border-style: solid;
	border-color: #A9B8C2;
}

#logodesc {
	margin-bottom: 5px;
	padding: 5px 25px;
	background: #D9DFE4;
	border-bottom: 1px solid #4787A7;
}

#menubar {
	margin: 0 25px;
}

Gebruikersavatar
Johan
Berichten: 2376
Lid geworden op: 05 mei 2007, 15:24
Locatie: memberlist.php

Re: Gehele layout 'tegen' bovekant aan

Bericht door Johan » 12 jan 2009, 21:40

Probeer eens wat te spelen met de paddings van de #wrapheader :)
Voormalig Support Teamlid

Semi_Deus
Berichten: 326
Lid geworden op: 13 jun 2007, 23:50
Locatie: Zeist
Contacteer:

Re: Gehele layout 'tegen' bovekant aan

Bericht door Semi_Deus » 13 jan 2009, 00:38

Code: Selecteer alles

#ipbwrapper{ 
   margin: 0px auto;
   margin-top: 0px //Dit is dubbelop
   text-align: left;
   width: 827px;
} 
Die 2e margin is eigenlijk dubbelop, omdat het hetzelfde effect als: margin: 0px auto;
margin: 0px auto, zorgt er alleen ook nog voor dat de stijl gecentreerd wordt.

Kan je misschien ook even je overall_header.html plaatsen, je css ziet er opzich goed uit, maar als de div's misschien in een verkeerde volgorde staan kan het alsnog fout gaan. :?
Afbeelding

t1mm3h
Berichten: 9
Lid geworden op: 12 jan 2009, 10:19

Re: Gehele layout 'tegen' bovekant aan

Bericht door t1mm3h » 13 jan 2009, 08:53

De divs uit de overall_header.html ->

Code: Selecteer alles

<div id="ipbwrapper">
<div id="header">
			<div id="logo">
				<a href="{U_INDEX}">

					<img src="{T_THEME_PATH}/images/header.jpg"/></a>
			</div>
			<div id="top_menu"><ul class="menu" /></div>	
			<div id="menu"><ul class="menu">
			<li id="current" class="active item1"><a href="{U_INDEX}"><span>Home</span></a></li>
			<li class="item1"><a href="{U_FAQ}"><span>{L_FAQ}</span></a></li>
			<li class="item2">	<!-- IF S_DISPLAY_MEMBERLIST --><a href="{U_MEMBERLIST}"><span>{L_MEMBERLIST}</span></a><!-- ENDIF --></li>
			<li class="item3"><!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH}"><span>{L_SEARCH}</span></a><!-- ENDIF --></li>
			<li class="item4">	<!-- IF S_USER_LOGGED_IN --><a href="{U_PROFILE}"><span>{L_PROFILE}</span></a><!-- ENDIF --></li>
			</ul></div>			
		</div>

<div id="userlinksguest">
	<!-- IF not S_USER_LOGGED_IN -->
	<p class="pcen"><b>Welkom</b>(  <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>)
		<!-- ELSE -->
			<!-- IF S_USER_LOGGED_IN -->
	<p class="pcen"><b>Welkom </b> ( <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><span class="login">{L_LOGIN_LOGOUT}</span></a>&nbsp;<!-- ENDIF --> ) <br />
	<!-- IF S_DISPLAY_SEARCH -->
	<p class="searchbar">
		<span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
		<!-- IF S_USER_LOGGED_IN -->
		<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
		<!-- ENDIF -->
	</p>
	<!-- ENDIF -->

	<br style="clear: both;" />
	<!-- ENDIF -->
		<!-- ENDIF -->
	</p>
</div>

<div id="navstrip"><a href='{U_INDEX}'>{L_INDEX}</a></div>
<div style="padding:10px;padding-top:5px;border:1px solid #e3e3e3;">
Het is me gelukt! :lol:

Aangepast naar:

Code: Selecteer alles

#logo {	
	position: absolute;
	left: 0;
	top: 0px;
	width: 827px;
	height: 52px;
}

#menu {
	position: absolute;
	top: 52px;	
	background: #fb6400;
	width: 825px;
	height: 23px;
	color: #fff;
	border-top: 4px solid #E3E3E3;
	border-bottom: 6px solid #E3E3E3;
}

#header {
	position: relative;
	left: 0;
	top: 0;
	height: 75px;
}
Dus naar aanleiding van aanpassingen in de height van deze divs.

Bedankt voor de reacties in ieder geval ;)

Nou heb ik wel nog een vraagje, ik heb een navigatie menu bovenin, met de volgende css code:

Code: Selecteer alles

#menu {
	position: absolute;
	top: 52px;	
	background: #fb6400;
	width: 825px;
	height: 23px;
	color: #fff;
	border-top: 4px solid #E3E3E3;
	border-bottom: 6px solid #E3E3E3;
}
nou wil ik de achtergrond van deze div een afbeelding geven. De afbeelding is precies 825*23px.
Als ik de code verander naar:

Code: Selecteer alles

#menu {
	position: absolute;
	top: 52px;	
	background-image: url (images/navbar.jpg);
	width: 825px;
	height: 23px;
	color: #fff;
	border-top: 4px solid #E3E3E3;
	border-bottom: 6px solid #E3E3E3;
}
Echter als ik dan mijn pagina ververs wordt de menu balk gewoon een witte kleur.
Ik weet niet waardoor het komt maar het lijkt alsof; of het plaatje niet goed geplaatst wordt, of gewoon niet gevonden wordt, of dat er een andere code mijn plaatje overschrijft ofso?

Gebruikersavatar
Johan
Berichten: 2376
Lid geworden op: 05 mei 2007, 15:24
Locatie: memberlist.php

Re: Gehele layout 'tegen' bovekant aan

Bericht door Johan » 13 jan 2009, 15:37

url('images/navbar.jpg'); wel?
Voormalig Support Teamlid

Gebruikersavatar
Paul
Beheerder
Beheerder
Berichten: 20297
Lid geworden op: 23 okt 2003, 11:38
Locatie: Utrecht
Contacteer:

Re: Gehele layout 'tegen' bovekant aan

Bericht door Paul » 13 jan 2009, 17:14

t1mm3h, graag niet dubbelposten. Ik heb je posts nu samengevoegd.

Plaats reactie