Naast de body elementen plaatsen (stijlontwikkeling SFB)

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.
Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Ger » 20 jun 2007, 16:12

Ik wil een nieuwe stijl maken, gebaseerd op subsilver2. Overall_header.html alvast iets aangepast, ander logo, en wilde even dit eerste resultaat testen. Dus alles in een nieuwe map via FTP geüpload in de map phpbb3/styles/sfb (sfb is de map waarin alle templatefiles staan).

Maar wat dan? In het beheerderpaneel staat nergens aangegeven hoe ik een nieuwe stijl kan importeren. Waarschijnlijk kijk/doe ik iets verkeerd, maar wat dan?

-edit-
Topictitel gewijzigd ivm verdere vragen
Laatst gewijzigd door Ger op 09 jul 2007, 21:13, 2 keer totaal gewijzigd.

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

Re: Stijl geüpload, maar dan?

Bericht door Johan » 20 jun 2007, 16:17

Bovenin het tabblad "Stijlen"
vervolgens moet daar bij "ongeïnstalleerde stijlen" jouw nieuwe stijl staan,
Je installeert hem.

Als je hem als standaard stijl wilt (neem ik aan) moet je hem bij "opties" op "Maak standaard stijl" zetten :D
Voormalig Support Teamlid

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijl geüpload, maar dan?

Bericht door Ger » 20 jun 2007, 17:19

Mja, dat was ik dus vergeten te melden, daar zie ik hem niet. Ook Ctrl+F5 hielp niet. inmiddels een herstart gedaan, geen resultaat. Daarom verwachtte ik dus dat ik het eerst nog aan phpBB moest vertellen dat ik iets heb geüpload, maar waar dan? :?

ElbertF
Berichten: 5803
Lid geworden op: 12 okt 2004, 08:34
Contacteer:

Re: Stijl geüpload, maar dan?

Bericht door ElbertF » 20 jun 2007, 18:47

Heb je ook het CFG bestand aangepast? Ik weet niet precies hoe phpBB3 naar nieuwe stijlen zoekt, maar dat kan de reden zijn.

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijl geüpload, maar dan?

Bericht door Ger » 20 jun 2007, 22:24

Dat was 'm dus inderdaad. Moest ook voor de imageset, template en team. Thanks!

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 21 jun 2007, 09:58

Maar even de topictitel gewijzigd, dan kan ik hier mijn verdere vragen stellen ipv dit hele forum voor mezelf te kapen. Ik heb namelijk het idee dat ik nog tegen veel vragen ga aanlopen … :)

Nu bijvoorbeeld is mijn vraag hoe ik het forum een vaste breedte kan geven. Hoe geef ik aan dat ik de totale breedte 750 pixels wil laten zijn (met daarachter dus hetgeen wat hier bij phpBB.nl grijs is). En een daarbij komende vraag: als de vensterbreedte van de gebruiker 1280 pixels of meer is (36% van de bezoekers), wil ik graag aan beide zijden een verticale (google) advertentie tevoorschijn laten komen. Bij de andere gebruikers wil ik dit niet doen (want dat is natuurlijk niet erg gebruikersvriendelijk). Hoe doe ik dat?

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 22 jun 2007, 08:59

Voor die Google-ads heb ik een scriptje ontdekt waarmee het wel moet lukken... De forumbreedte heb ik nu op 750 pixels vastgezet, maar nu staat alles helemaal links. Hoe centreer ik dat? Ik zie hiervoor wel mogelijkheiden voor de prosilver stijl, maar ik heb als basis subsilver2. Hoe moet ik die centreren?

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 24 jun 2007, 13:17

Centreren is me nu ook gelukt (heb toch wel een beetje een leercurve ;) ) maar ik heb nu nog 1 probleem over: De logo staat 1 pixel opgeschoven naar rechts. In stylesheet.css stond:

Code: Selecteer alles

#logodesc {
	margin-bottom: 5px;
	padding: 5px 25px;
	background: #000000;
	border-bottom: 1px solid #4787A7;
}
Het stond eerst zo'n 25 pixels naar rechts en nog een stukje omhoog, volgens mij kwam dat door de padding. Die heb ik weggehaald, nu staat er dus dit:

Code: Selecteer alles

#logodesc {
	margin-bottom: 5px;
	background: #000000;
	border-bottom: 1px solid #4787A7;
}
Bij wrapheader staat:

Code: Selecteer alles

#wrapheader {
	min-height: 120px;
	height: auto !important;
	height: 120px;
	width: 750px;
	padding: 0;
	background-color: #000000;
}
Lijkt mij ook goed, of moet ik toch nog iets veranderen, hier of ergens anders?

Gebruikersavatar
Stef
Berichten: 9080
Lid geworden op: 04 jun 2003, 20:47

Re: Stijlontwikkeling SFB

Bericht door Stef » 24 jun 2007, 14:44

Als het logo nu op de plek staat en niet 1px verschoven dan staat hij toch goed? :?

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 24 jun 2007, 17:00

Ik ben niet helemaal duidelijk geweest zie ik. Excusé.

Eerst stond het logo meer verschoven dan die ene pixel. Na bovenstaande aanpassing staat het nu wel op de goede hoogte, maar nog 1 pixel teveel naar rechts (ipv 25 pixels eerst).

Gebruikersavatar
Stef
Berichten: 9080
Lid geworden op: 04 jun 2003, 20:47

Re: Stijlontwikkeling SFB

Bericht door Stef » 24 jun 2007, 17:51

Ehm.. zit hij al helemaal tegen de rand aan? Heb je een linkje?

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 24 jun 2007, 20:56

Nee, ik kan niet linken omdat ik in een afgeschermde omgeving werk (alleen bereikbaar met bepaalde IP) omdat alles nog in de knutselfase is. Maar een screendump zal vast ook wel duidelijk zijn. Dit is in IE 7:

Afbeelding

En ik merk zojuist dat het forum in FF 2.0.0.4 niet gecentreerd staat maar geheel links. Dwz, de header helemaal links en het forum zelf iets naar rechts. Zie screendump:

Afbeelding

Voor het gemak maar even hieronder de complete stylesheet.css gezet:
Spoiler: bekijk

Code: Selecteer alles

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
	Style name:		sfb
	Based on style:	subSilver2 
	Original author:	subBlue ( http://www.subBlue.com/ )
	Modified by:		Ger Bruinsma (http://www.swordfactsbenelux.nl)
	
	Copyright 2007 Sword Facts Benelux ( http://www.swordfactsbenelux.nl/ )
    --------------------------------------------------------------
*/

/* Layout
 ------------ */
* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	color: #323D4F;
	background-color: #000000;
	font-size: 55%; /* This sets the default font size to be equivalent to 9px */
	margin: 0;
	text-align: center;
}

#wrapheader {
	min-height: 120px;
	height: auto !important;
	height: 120px;
	width: 750px;
	padding: 0;
	background-color: #000000;
}

#wrapcentre {
	margin: 15px 25px 0 25px;
	width: 750px;
	text-align: left;
}

#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;
	background: #000000;
	border-bottom: 1px solid #4787A7;
}

#menubar {
	margin: 0 25px;
}

#datebar {
	margin: 10px 25px 0 25px;
}

#findbar {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.forumrules {
	background-color: #F9CC79;
	border-width: 1px;
	border-style: solid;
	border-color: #BB9860;
	padding: 4px;
	font-weight: normal;
	font-size: 1.1em;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
}

#pageheader { }
#pagecontent { }
#pagefooter { }

#poll { }
#postrow { }
#postdata { }


/*  Text
 --------------------- */
h1 {
	color: black;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	text-decoration: none;
	text-align: left;
}

h2 {
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	text-decoration: none;
	line-height: 120%;
	text-align: left;
}

h3 {
	font-size: 1.3em;
	font-weight: bold;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	line-height: 120%;
	text-align: left;
}

h4 {
	margin: 0;
	font-size: 1.1em;
	font-weight: bold;
	text-align: left;
}

p {
	font-size: 1.1em;
	text-align: left;
}

p.moderators {
	margin: 0;
	float: left;
	color: black;
	font-weight: bold;
}

.rtl p.moderators {
	float: right;
}

p.linkmcp {
	margin: 0;
	float: right;
	white-space: nowrap;
}

.rtl p.linkmcp {
	float: left;
}

p.breadcrumbs {
	margin: 0;
	float: left;
	color: black;
	font-weight: bold;
	white-space: normal;
	font-size: 1em;
}

.rtl p.breadcrumbs {
	float: right;
}

p.datetime {
	margin: 0;
	float: right;
	white-space: nowrap;
	font-size: 1em;
}

.rtl p.datetime {
	float: left;
}

p.searchbar {
	padding: 2px 0;
	white-space: nowrap;
} 

p.searchbarreg {
	margin: 0;
	float: right;
	white-space: nowrap;
}

.rtl p.searchbarreg {
	float: left;
}

p.forumdesc {
	padding-bottom: 4px;
}

p.topicauthor {
	margin: 1px 0;
	text-align: center;
}

p.topicdetails {
	margin: 1px 0;
}

.postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
	margin: 1px 0;
	color: red;
	font-weight:bold;
}

.postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
	color: green;
	font-weight:bold;
}

.postapprove img, .postreported img {
	vertical-align: bottom;
}

.postauthor {
	color: #000000;
}

.postdetails {
	color: #000000;
}

.postbody {
	font-size: 1.3em;
	line-height: 1.4em;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
}

.postbody li, ol, ul {
	margin: 0 0 0 1.5em;
}

.rtl .postbody li, .rtl ol, .rtl ul {
	margin: 0 1.5em 0 0;
}

.posthilit {
	background-color: yellow;
}

.nav {
	margin: 0;
	color: black;
	font-weight: bold;
}

.pagination {
	padding: 4px;
	color: black;
	font-size: 1em;
	font-weight: bold;
}

.cattitle {

}

.gen {
	margin: 1px 1px;
	font-size: 1.2em;
}

.genmed {
	margin: 1px 1px;
	font-size: 1.1em;
}

.gensmall {
	margin: 1px 1px;
	font-size: 1em;
}

.copyright {
	color: #444;
	font-weight: normal;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
}

.titles {
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: none;
}

.error {
	color: red;
}


/* Tables
 ------------ */
th {
	color: #F9FFF9;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #563300;
	background-image: url('./images/cellpic3.gif');
	white-space: nowrap;
	padding: 7px 5px;
}

td {
	padding: 2px;
}
td.profile {
	padding: 4px;
}

.tablebg {
	background-color: #F9FFF9;
}

.catdiv {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: white url('./images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
	background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

.cat {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #F9FFF9;
	background-image: url('./images/cellpic1.gif');
	text-indent: 4px;
}

.row1 {
	background-color: #ECFFCC;
	padding: 4px;
}

.row2 {
	background-color: #ECFCC6;
	padding: 4px;
}

.row3 {
	background-color: #EEFFCC;
	padding: 4px;
}

.rowgood {
	background-color: #C2D6CD;
	padding: 4px;
}

.rowneutral {
	background-color: #CAC1D7;
	padding: 4px;
}

.rowbad {
	background-color: #D7C1C3;
	padding: 4px;
}

.spacer {
	background-color: #EEFFCC;
}

hr {
	height: 1px;
	border-width: 0;
	background-color: #EEFFCC;
	color: #EEFFCC;
}

.legend {
	text-align:center;
	margin: 0 auto;
}

/* Links
 ------------ */
a:link {
	color: #116611;
	text-decoration: none;
}

a:active,
a:visited {
	color: #66FF66;
	text-decoration: none;
}

a:hover {
	color: #116611;
	text-decoration: underline;
}

a.forumlink {
	color: #069;
	font-weight: bold;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.2em;
}

a.topictitle {
	margin: 1px 0;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
}

a.topictitle:visited {
	color: #5493B4;
	text-decoration: none;
}

th a,
th a:visited {
	color: #FFA34F !important;
	text-decoration: none;
}

th a:hover {
	text-decoration: underline;
}


/* Form Elements
 ------------ */
form {
	margin: 0;
	padding: 0;
	border: 0;
}

input {
	color: #333333;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	padding: 1px;
	border: 1px solid #A9B8C2;
	background-color: #FAFAFA;
}

textarea {
	background-color: #FAFAFA;
	color: #333333;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.3em; 
	line-height: 1.4em;
	font-weight: normal;
	border: 1px solid #A9B8C2;
	padding: 2px;
}

select {
	color: #333333;
	background-color: #FAFAFA;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	border: 1px solid #A9B8C2;
	padding: 1px;
}

option {
	padding: 0 1em 0 0;
}

.rtl option {
	padding: 0 0 0 1em;
}

input.radio {
	border: none;
	background-color: transparent;
}

.post {
	background-color: white;
	border-style: solid;
	border-width: 1px;
}

.btnbbcode {
	color: #000000;
	font-weight: normal;
	font-size: 1.1em;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	background-color: #EFEFEF;
	border: 1px solid #666666;
}

.btnmain {
	font-weight: bold;
	background-color: #ECECEC;
	border: 1px solid #A9B8C2;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnlite {
	font-weight: normal;
	background-color: #ECECEC;
	border: 1px solid #A9B8C2;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnfile {
	font-weight: normal;
	background-color: #ECECEC;
	border: 1px solid #A9B8C2;
	padding: 1px 5px;
	font-size: 1.1em;
}

.helpline {
	background-color: #DEE3E7;
	border-style: none;
}


/* BBCode
 ------------ */
.quotetitle, .attachtitle {
	margin: 10px 5px 0 5px;
	padding: 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #A9B8C2;
	color: #333333;
	background-color: #A9B8C2;
	font-size: 0.85em;
	font-weight: bold;
}

.quotetitle .quotetitle {
	font-size: 1em;
}

.quotecontent, .attachcontent {
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #A9B8C2;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	background-color: #FAFAFA;
	color: #4B5C77;
}

.attachcontent {
	font-size: 0.85em;
}

.codetitle {
	margin: 10px 5px 0 5px;
	padding: 2px 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #A9B8C2;
	color: #333333;
	background-color: #A9B8C2;
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

.codecontent {
	direction: ltr;
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #A9B8C2;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	color: #006600;
	font-size: 0.85em;
	font-family: Monaco, 'Courier New', monospace;
	background-color: #FAFAFA;
}

.syntaxbg {
	color: #FFFFFF;
}

.syntaxcomment {
	color: #FF8000;
}

.syntaxdefault {
	color: #0000BB;
}

.syntaxhtml {
	color: #000000;
}

.syntaxkeyword {
	color: #007700;
}

.syntaxstring {
	color: #DD0000;
}


/* Private messages
 ------------------ */
.pm_marked_colour {
	background-color: #000000;
}

.pm_replied_colour {
	background-color: #A9B8C2;
}

.pm_friend_colour {
	background-color: #007700;
}

.pm_foe_colour {
	background-color: #DD0000;
}


/* Misc
 ------------ */
img {
	border: none;
}

.sep {
	color: black;
	background-color: #FFA34F;
}

table.colortable td {
	padding: 0;
}

pre {
	font-size: 1.1em;
	font-family: Monaco, 'Courier New', monospace;
}

.nowrap {
	white-space: nowrap;
}

.username-coloured {
	font-weight: bold;
}

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 26 jun 2007, 09:04

Iemand?

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Stijlontwikkeling SFB

Bericht door Ger » 05 jul 2007, 09:49

Goed, het centreren in firefox is nu ook goed gegaan. Het heeft me wel wat aanpassingen in de code gekost, maar nu zou het, ongeacht welke browser (behalve NN4) goed moeten zijn. Wat heb ik gedaan?

In de body heb ik de text-align op center; gezet. Vervolgens heb ik een containerdiv gemaakt waarbij ik de marges links en rechts op auto; heb gezet en daar de text-align op left gezet. Het relevante stuk uit mijn CSS ziet er nu zo uit:

Code: Selecteer alles

/* Layout 
 ------------ */ 
* { 
    /* Reset browsers default margin, padding and font sizes */ 
    margin: 0; 
    padding: 0; 
} 

html { 
    font-size: 100%; 
} 

body { 
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */ 
    font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif; 
    color: #323D4F; 
    background-color: #000000; 
    font-size: 55%; /* This sets the default font size to be equivalent to 9px */ 
    width: 750px; 
    text-align: center; 
} 

#container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 55em; 
    text-align: left; 
} 

#wrapheader { 
    min-height: 120px; 
    height: auto !important; 
    height: 120px; 
    width: 750px; 
    padding: 0; 
    background-color: #000000; 
} 

#wrapcentre { 
    margin: auto auto auto auto; 
    width: 750px; 
} 

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

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

#logodesc { 
    width: 750px; 
    margin-bottom: 5px; 
    background: #000000; 
    border-bottom: 1px solid #4787A7; 
    }
Om die container te laten werken moet dat natuurlijk ook in de html worde opgenomen. Hiervoor heb ik in overall_header.html de div gestart en in overall_footer.html geëindigd. Voor het nageslacht en de anderen die hier tegenaan lopen: dit doe je zo:

############################################################################################
OPEN: overall_header.html

Code: Selecteer alles

FIND:
<div id="wrapheader"> 

BEFORE, ADD:
<div id="container">

OPEN: overall_footer.html

Code: Selecteer alles

FIND:
</body>

BEFORE, ADD:
</div>
save/close all files
############################################################################################

Blijf ik alleen nog zitten met dat logo dat die verdomde 2 pixels (niet 1 zoals ik eerst dacht, maar 2) die dat logo opgeschoven is ten opzichte van al het andere. Zoals je kunt zien in de screenshots in mijn vorige post is het niet die border onder het logo dat is verschoven, maar het logo zelf. Ten opzichte van die border en al het andere. Er moet dus iets zijn met die border of een table, dus het lijkt me ook dat er iets mis is met het stukje #logodesc in de CSS maar ik zie het toch echt niet.

Relevant stukje uit overall_header.html:

Code: Selecteer alles

<div id="container"> 

<div id="wrapheader"> 

    <div id="logodesc"> 
        <table width="100%" cellspacing="0"> 
        <tr> 
            <td align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td> 
        </tr> 
        </table> 
    </div>
Wat is de fout?

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Ger » 09 jul 2007, 21:16

Die fout is door wat lelijke code verholpen. kom ik op het volgende punt:

Nu ik de forumbreedte vast heb staan op 750px; wil ik graag links en rechts wat extra elementen tonen. Die wil ik ter hoogte van de body laten beginnen, dus net onder de header. Eigenlijk bij iedere pagina (mits een bepaalde hoogte). Kan ik dat eenvoudig in de templatefiles wijzigen, en zo ja welke dan? Of moet ik in iedere templatefile een aanpassing maken?

Gebruikersavatar
Stef
Berichten: 9080
Lid geworden op: 04 jun 2003, 20:47

Re: Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Stef » 13 jul 2007, 17:50

Als die blokken op iedere pagina hetzelfde mogen zijn dan zou je het in overall_header.html kunnen doen. Bijvoorbeeld:

Code: Selecteer alles

<div id="links"> *blokken* </div>
<div id="rechts"> *forum*
De div rechts sluit je af in overall_footer.html. Door gebruik te maken van float in je CSS zou dit gemakkelijk moeten kunnen.

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Ger » 13 jul 2007, 23:11

Als ik het goed begrijp (maar ik ben nog vrij vers in de wereld van div's en CSS) krijg ik zo alleen links ruimte voor een extra element, en rechts niet. Klopt? Liefst heb ik ze aan beide kanten, kan dat ook?

Gebruikersavatar
Stef
Berichten: 9080
Lid geworden op: 04 jun 2003, 20:47

Re: Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Stef » 14 jul 2007, 01:02

Klopt, even ruw en snel, volgensmij moet je er dan ook wel uitkomen.

Overall_header:

Code: Selecteer alles

<div id="linkerkolom" style="float: left; width: 150px;"> * linkerkolom *</div>
<div id="center" style="float: left;">
Overall_footer:

Code: Selecteer alles

</div>
<div id="rechterkolom" style="float: left; width: 150px;"> * rechterkolom *</div>

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Ger » 15 jul 2007, 11:57

Bedankt, lijkt me vrij simpel. Ik ga er vandaag of morgen mee aan de slag, laat wel weten wat het resultaat is.

Gebruikersavatar
Ger
Berichten: 4864
Lid geworden op: 03 jan 2006, 22:23
Locatie: 192.68.1.100
Contacteer:

Re: Naast de body elementen plaatsen (stijlontwikkeling SFB)

Bericht door Ger » 15 jul 2007, 16:35

Hij doet het niet echt. Links komt het wel tevoorschijn, rechts krijg ik het niet voor elkaar. Het komt zelfs niet tevoorschijn in de bron.

Ik denk dat het iets te maken heeft met mijn container nav het centreren, maar na een uur klooien ben ik er nog niet uit. Stukje uit mij CSS:
Spoiler: bekijk

Code: Selecteer alles

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
	color: #323D4F;
	background-color: #000000;
	font-size: 55%; /* This sets the default font size to be equivalent to 9px */
	width: 100%;
}

#container {
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	text-align: left;
}

#wrapheader {
	min-height: 120px;
	height: auto !important;
	height: 120px;
	width: 750px;
	padding-left: 100px;
	background-color: #000000;
	
}

#linkerkolom {
	float: left; 
	width: 100px;
	position: relative;
	left: -100px;
}

#wrapcentre {
	margin: auto auto auto auto;
	width: 750px;
}

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

#rechterkolom {
	float: right;
	width: 100px;
	position: relative;
	right: -100px;
}
Stukje uit overall_footer:
Spoiler: bekijk

Code: Selecteer alles

<div id="wrapfooter">
	<!-- IF U_ACP --><span class="gensmall">[ <a href="{U_ACP}">{L_ACP}</a> ]</span><br /><br /><!-- ENDIF -->
	<span class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
	<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
	<!-- IF DEBUG_OUTPUT --><br /><bdo dir="ltr">[ {DEBUG_OUTPUT} ]</bdo><!-- ENDIF --></span>
</div>
<div id="rechterkolom">
    <font color="white">123test</font>
    </div>
</div>
</body>
</html>

Plaats reactie