[CSS] Plaatsing van elementen blijft problemen geven - Softwareontwikkeling

woensdag 4 juli 2007 11:16

Acties:

Topicstarter

Ik ben bezig met de ontwikkeling van een stylesheet voor een phpBB3 forum. Hiervoor heb ik me begeven op het vlak van CSS, waar ik nog een beginner ben. Wat is het probleem?

Ik heb het forum een fixed width gegeven en gecentreerd. Het is dus altijd 750 pixels breed (even breed als het logo) en daarbuiten is alles zwart. Recht onder het logo moet gewoon het forum komen (logo maakt deel uit van de forumsoftware trouwens). Dit lukt echter niet helemaal, en ik snap niet waarom. Het logo blijft namelijk 1 pixel naar rechts staan tov het forum.

In de code stond:

Cascading Stylesheet:

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

Hierbij stond het logo echter 25 pixels omhoog en naar rechts. Dit leek me aan de padding te liggen, dus heb ik die regel weggehaald. Er staat nu dus:

Cascading Stylesheet:

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

Iets verderop in de stylesheet staat:

Cascading Stylesheet:

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

Dit lijkt mij als beginner toch te kloppen. Toch blijft het 1 pixel opgeschoven. Zie onderstaande screendump in IE7:

Afbeeldingslocatie: http://img211.imageshack.us/img211/8638/headerji3.th.png

Ik heb het ook nog eens bekeken in FF2, om te zien of het misschien een IE probleem was. Daar blijkt het hele forum nog steeds helemaal links te staan, en ok weer het logo 1 pixels naar rechts. Zie screendump:

Afbeeldingslocatie: http://img209.imageshack.us/img209/2621/headernq1.th.png

Ik had het forum gecentreerd door in de stylesheet aan te geven:

Cascading Stylesheet:

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;
}

En bij de elementen waar de tekst links moet staan gewoon weer links uitgelijnd. Zo staat dat uitgelegd bij phpBB-support, maar dat werkt dus niet. Ik heb van tweakers een iets hogere pet op, dus misschien dat jullie zien wat hier verkeerd is?

PS: ik kan geen link geven naar de site, want ik werk in een afgeschermde omgeving die alleen dmv bepaalde IP's te bereiken is. Het forum draait nu namelijk live op de oude software. Ik zou graag voor de duidelijkheid de complete stylesheet.css hier plaatsen, maar ik kan me voorstellen dat dit vanwege het formaat niet gewaardeerd wordt. Kan ik dat hier ergens op een nette manier plaatsen?

Tjolk is lekker. overal en altijd.

woensdag 4 juli 2007 12:06

Acties:

erwin85

Het forum is opgebouwd uit tabellen lijkt mij?

Wat je kan doen, is het hele forum + header in een container div te zetten van 750px breed en in je css de margin: 0 auto; te zetten. Dan zal het in firefox ook gecentreerd worden.

Probeer in de #wrapheader ook je margin op 0 te zetten. Miscchien werkt dat?

Ik hoop dat het zo lukt. Anders laat het maar weten.

woensdag 4 juli 2007 14:06

Acties:

Tjolk

Topicstarter

erwin85 schreef op woensdag 04 juli 2007 @ 12:06:
Het forum is opgebouwd uit tabellen lijkt mij?

Jep.

Wat je kan doen, is het hele forum + header in een container div te zetten van 750px breed en in je css de margin: 0 auto; te zetten. Dan zal het in firefox ook gecentreerd worden.

Klinkt interessant, hoe werkt dat zo'n container div? Lijkt me dat ik dat in de templatebestanden moet weergeven of kan dat ook in de CSS?

Probeer in de #wrapheader ook je margin op 0 te zetten. Miscchien werkt dat?

Ga ik proberen.

Tjolk is lekker. overal en altijd.

woensdag 4 juli 2007 15:27

Acties:

Tjolk

Topicstarter

Ik zit trouwens te zoeken in de CSS guide van W3Cschools, maar ik zie daarin niet hoe ik elementen moet centreren, alleen de teksten enzo. Begrijp ik goed dat dit inderdaad niet kan?

Tjolk is lekker. overal en altijd.

woensdag 4 juli 2007 15:35

Acties:

Verwijderd

Dat doe je door de margins op auto te zetten.

http://www.google.nl/search?q=center+css

woensdag 4 juli 2007 16:44

Acties:

Tjolk

Topicstarter

Bedankt, Bart, met de eerste hit daar moet het lukken. (*schaamt zich omdat hij alleen in het Nederlands gegoogled heeft*)

Tjolk is lekker. overal en altijd.

woensdag 4 juli 2007 22:26

Acties:

Tjolk

Topicstarter

Het centreren is gelukt, na enigzins spelen met de em. Ik blijf alleen nog met dat lichtjes versprongen logo zitten. Het leek me op het oog 1px, maar na een screendump op een grid bekeken te hebben blijkt het 2px naar rechts te staan. Ik heb al geprobeerd de padding op -2px te zetten, maar het lukt maar niet.

Ook in de templatefiles zie ik niet wat er verkeerd is.

Een stukje uit de CSS:

Cascading Stylesheet:

/* 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;
    }

Een stukje uit overall_header.html:

HTML:

<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>

Ik zie toch echt nergens staan dat het logo opgeschoven moet worden. Toch is het zo, zowel in IE7 als FF2. Zie screendump:

Afbeeldingslocatie: http://img529.imageshack.us/img529/2690/headervk6.th.png

Zoals je kunt zien 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, dus het lijkt me ook dat er iets mis is met het stukje #logodesc in de CSS maar ik zie het toch echt niet.

Wat doe ik fout?

Tjolk is lekker. overal en altijd.

donderdag 5 juli 2007 08:41

Acties:

Verwijderd

Probeer eens cellpadding=0 in the <table> te zetten.

donderdag 5 juli 2007 10:45

Acties:

rapidgorgon

Ambitious, but rubbish

Het lijkt me dat je een overflow hebt aan de rechterkant (om dit te testen kan je in #logodesc "overflow: hidden;" toevoegen).
Waarschijnlijk wordt deze veroorzaakt door de tabel rond je afbeelding. Waarom je een tabel gebruikt met 1 cel en eigenschappen die je anders ook kan toekennen, blijft me eigenlijk een raadsel. (Lees: doe die tabel weg en kijk eens wat dat geeft

)

donderdag 5 juli 2007 11:07

Acties:

erwin85

Ik zie toch echt nergens staan dat het logo opgeschoven moet worden. Toch is het zo, zowel in IE7 als FF2. Zie screendump:
[afbeelding]

Zoals je kunt zien 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, dus het lijkt me ook dat er iets mis is met het stukje #logodesc in de CSS maar ik zie het toch echt niet.

Wat doe ik fout?

Ik zou het eigenlijk moeten nabouwen om te kijken wat het probleem is. Waarschijnlijk is het een padding probleem wat Ssyn al zei.

Ik zou trouwens de table rond de header weg halen. Is een beetje overbodig.

EDIT: rapidgorgon was mij net voor

donderdag 5 juli 2007 14:43

Acties:

Tjolk

Topicstarter

Uh, ja, nu jullie het zeggen: ik snap het nut van die tabel ook niet. Maar goed, op die manier zitten er wel meer rare zaken in phpBB. Hopelijk heb ik vanavond nog even tijd om jullie voorstellen te testen, zoniet dan wordt het morgen.

Tjolk is lekker. overal en altijd.

donderdag 5 juli 2007 23:11

Acties:

Tjolk

Topicstarter

Ik zat vandaag eens bij andere resoluties te kijken, en het forum wordt niet goed uitgelijnd. Het lijkt hem gek genoeg te zitten in de breedte van de container:

Cascading Stylesheet:

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

Die staat op 55 em; als ik daarmee speel schuift het op naar links of rechts. Met 55 em staat het goed bij een resolutie van 1024px breed maar dus niet bij andere resoluties. Hoe kan ik zorgen dat het ongeacht de vensterbreedte altijd goed staat?

Over het verschoven logo: padding helpt niet, tabel weghalen ook niet. Er veranderd letterlijk niets. Andere suggesties?

Tjolk is lekker. overal en altijd.

vrijdag 6 juli 2007 10:13

Acties:

rapidgorgon

Ambitious, but rubbish

Voorlopig laatste ingeving: Zit er toevallig geen zwarte border om je afbeelding heen van 1px breed?

Andere opmerking,

Cascading Stylesheet:

#wrapheader {
    min-height: 120px;
    height: auto !important;
    height: 120px;
}

Waarom overschrijf je "min-height: 120px; height: auto" meteen met "height: 120px"? Als je hem 120px hoog wil, kan de rest daar wel weg.

vrijdag 6 juli 2007 10:26

Acties:

Mad Marty

Je bent slimmer als je denkt!

rapidgorgon schreef op vrijdag 06 juli 2007 @ 10:13:
Voorlopig laatste ingeving: Zit er toevallig geen zwarte border om je afbeelding heen van 1px breed?

Daar gok ik ook op.
Zet een 'border: 0px;' bij je <img>

Rail Away!

vrijdag 6 juli 2007 12:44

Acties:

erwin85

SFB schreef op donderdag 05 juli 2007 @ 23:11:
Ik zat vandaag eens bij andere resoluties te kijken, en het forum wordt niet goed uitgelijnd. Het lijkt hem gek genoeg te zitten in de breedte van de container:
Cascading Stylesheet:
1
2
3
4
5
6
#container {
    margin-left: auto;
    margin-right: auto;
    width: 55em;
    text-align: left;
} 
Die staat op 55 em; als ik daarmee speel schuift het op naar links of rechts. Met 55 em staat het goed bij een resolutie van 1024px breed maar dus niet bij andere resoluties. Hoe kan ik zorgen dat het ongeacht de vensterbreedte altijd goed staat?

Over het verschoven logo: padding helpt niet, tabel weghalen ook niet. Er veranderd letterlijk niets. Andere suggesties?

Gebruik px inplaats van em. In px is alles in vaste breedte, ongeacht de resolutie van je scherm. Ik zou dat ongveer 750px breedte gebruiken, is het nog goed te zien op een 800x600 beeldscherm.

Of wil je dat het forum schaalbaar wordt?

text-align: left; zou je weg kunnen laten.

zondag 8 juli 2007 16:10

Acties:

Tjolk

Topicstarter

Werkt niet helaas. Als ik de pixelbreedte 750px geef dan zet-ie het in de hoek. Ik heb ook al geprobeerd de marges aan beide kanten op 50% te zetten maar dat werkt ook niet.
Ik vraag me ook af waarom die em niet fatsoenlijk werkt. Door die te varieren blijft het stuk evengroot, maar wordt het alleen maar verplaatst.

text-align: left; is nodig om te zorgen dat alle tekst weer links staat. In de body heb ik namelijk aangegeven dat alles gecentreerd moet worden om op die manier de elementen te centreren.

Tjolk is lekker. overal en altijd.

zondag 8 juli 2007 19:10

Acties:

erwin85

SFB schreef op zondag 08 juli 2007 @ 16:10:
Werkt niet helaas. Als ik de pixelbreedte 750px geef dan zet-ie het in de hoek. Ik heb ook al geprobeerd de marges aan beide kanten op 50% te zetten maar dat werkt ook niet.
Ik vraag me ook af waarom die em niet fatsoenlijk werkt. Door die te varieren blijft het stuk evengroot, maar wordt het alleen maar verplaatst.

text-align: left; is nodig om te zorgen dat alle tekst weer links staat. In de body heb ik namelijk aangegeven dat alles gecentreerd moet worden om op die manier de elementen te centreren.

Ow ik zie dat je de body ook op 750px breed hebt gezet. Haal dat is weg of zet het op 100%. Want een box die 750px breed is die in de body van 750px zit gaat natuurlijk niet

zondag 8 juli 2007 19:16

Acties:

Verwijderd

heb je al een keer geprobeerd te valideren? misschien gebruik je wel css tags diehelemaal niet van toepassing zijn op het element waar je hem op toe wilt passen.

zondag 8 juli 2007 22:48

Acties:

Tjolk

Topicstarter

erwin85 schreef op zondag 08 juli 2007 @ 19:10:
[...]

Ow ik zie dat je de body ook op 750px breed hebt gezet. Haal dat is weg of zet het op 100%. Want een box die 750px breed is die in de body van 750px zit gaat natuurlijk niet

Zo had ik dat bij de eerste google-hit voor centreren met CSS gezien ja: body op 750px; container op 55 em;. Ik dus braaf gedaan, en dat heeft me een paar avonden klooien gekost. Nu de bosy op 100% gezet en de container op 750px; en het lijkt te werken!

Het blijft ook goed bij 800x600, de zwarte marges vallen mooi weg. Bedankt!

Dat 2-pixelprobleem bij het logo heb ik nu min of meer omzeild trouwens. Ik heb een negatieve marge gegeven van -2px;. Vervolgens de border-bottom die er stond (en ik toch al weg wilde halen) verwijderd. Nu staat het goed, al vraag ik me nog steeds af waardoor het in vredesnaam ontstaan is...

In elk geval bedankt voor iedereen die me geholpen heeft!

Tjolk is lekker. overal en altijd.

zondag 8 juli 2007 23:13

Acties:

BtM909

Watch out Guys...

Als je als laatste reageert en wilt weer een reactie plaatsen binnen 24 uur, gebruik dan even de edit van je vorig bericht

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1

Reageer