[html, css, js] met font tags :) #28

Zonder compleet codevoorbeeld kan ik je niet helpen, succes dus

Speciaal voor Catch22-:

index.php

styles.css

De rechtermodule loopt niet helemaal rechts door tot aan de rand en ik vroeg me af waar ik de fout maak. Als ik de breedte van een van drie modules 1 px groter maak, dan gaat de laatste naar de volgende regel.

Ja, maar hier kan ik niets mee. Wat staat er om heen, wat voor stijlen hebben die elementen, hoe groot is de parent?

- waarom heeft die middelste een margin:3px en margin-top:3px
- waarom hebben ze position:relative?
- waarom maak je classes aan als je daar ID's invult? Ik zou gewoon deze classnames door ID vervangen en een wrapper class aanmaken met de gedeelde stijlen.

http://www.popkoor2000.nl(...)m-fjt/css/styles.css is de hele CSS-file

En dit is de index.php

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

Kan je hier wat mee? Ik hoop dat dit genoeg informatie is.

quote:

Op maandag 24 september 2012 13:49 schreef Catch22- het volgende:
Ja, maar hier kan ik niets mee. Wat staat er om heen, wat voor stijlen hebben die elementen, hoe groot is de parent?

- waarom heeft die middelste een margin:3px en margin-top:3px
- waarom hebben ze position:relative?
- waarom maak je classes aan als je daar ID's invult? Ik zou gewoon deze classnames door ID vervangen en een wrapper class aanmaken met de gedeelde stijlen.

Margin top hebben ze alledrie, om een buffer te vormen met het stuk erboven.
De middelste heeft een margin om een scheiding aan te brengen met de twee andere modules.
position:relative weet ik niet. Dat stond standaard in deze template.
Ik heb de aanpassingen met classes gedaan omdat geadviseerd werd op de vorige pagina. Volgens mij heb ik die tips goed gebruikt, maar misschien zie ik het verkeerd.

Mja ik heb niet zoveel zin om deze brij te analyseren, want dat is mij iets teveel werk.

Weer een hardnekkig probleempje met de header. Ik heb een header, waarbij ik de navigatie en het logo (rood) in een breedte van 960px in het midden van de pagina wil weergeven.

Dat staat nu wel goed, maar de Wordpress-theme die ik gebruik heeft als feature dat'ie responsive is. Met mijn huidige knutselwerk lukt dat echter niet.


De CSS die ik eraan meegeef is:


De #header-wrapper heb ik zelf toegevoegd om de achtergrond van de header over de volledige breedte door te laten lopen, maar die hoort niet bij het theme. Als ik de width van #header op 960px zet dan wordt het wel correct weergegeven, maar past hij zichzelf niet meer aan aan de schermgrootte.

Als ik de width daar weghaal dan doet hij het wel, maar staat hij dus weer niet in een blok van 960px in het midden van het venster (dan staat de navigatie volledig links, het logo volledig rechts).

Wat doe ik fout?

Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.

quote:

Op maandag 24 september 2012 14:35 schreef boem-dikkie het volgende:
Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.

Hm, dat klinkt wel logisch. Daar moet ik maar eens even induiken dan

quote:

Op maandag 24 september 2012 14:35 schreef boem-dikkie het volgende:
Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.

Hoe zou men dat bijvoorbeeld doen?

quote:

Op maandag 24 september 2012 15:19 schreef InTrePidIvity het volgende:

[..]

Hoe zou men dat bijvoorbeeld doen?

quote:

Op maandag 24 september 2012 14:19 schreef KomtTijd... het volgende:
Als je nou gewoon eens precies doet wat boem-dikkie zegt heh. Wat gaat er dan nog verkeerd?

Oops, dat heb ik nog niet gedaan.
Morgenavond ga ik er mee verder puzzelen. Dank!

quote:

Op maandag 24 september 2012 17:10 schreef lkb9000 het volgende:

[..]
[ code verwijderd ]

Aha! Dankjewel

quote:

Op maandag 24 september 2012 11:31 schreef boem-dikkie het volgende:
Okay als alle blokken dezelfde stijl hebben maar hier en daar een extra padding of margin kun je het zo doen.
[ code verwijderd ]

Je kunt dan de wrapper2 opmaken zoals voor elk blok gelijk:
[ code verwijderd ]

En voor specifieke stijlen zoals bijvoorbeeld het middenste blok doormiddel van de user* class.
[ code verwijderd ]

Dat is het idee van meerdere classes gebruiken.

Je kunt dus in jouw geval een opmaak maken voor het blok met wrapper2, want die is voor elk blok hetzelfde. En voor het middenste blok, waar dus een margin moet, user2 opmaken.

Beste boem-dikkie,
Ik heb geëxperimenteerd met jouw tips. Ik begrijp de strekking en het nut.
Alleen krijg ik nu niet de blokken naast elkaar, maar deels onder elkaar. Zie www.popkoor2000.nl/site

Code index.php

Code styles.css
Heb je een idee wat ik fout doe?

quote:

Op dinsdag 25 september 2012 19:03 schreef KomtTijd... het volgende:
Wanneer besloot je dat je nu geen float:left meer nodig zou hebben?

Uhh, nooit
Is dat de domme fout? Let me check it!
-edit-
Ja dus, dat was dom van me. Had ik zelf kunnen bedenken. Nu eens zien of het probleem met het doorlopen naar rechts is opgelost als ik de getallen aanpas.

-edit-op-edit-
Ik heb nu ook de tips van KomtTijd en boem-dikkie gebruikt. Alleen zie ik dat ik nog steeds niet de gehele breedte van het middenstuk kan gebruiken.
Als ik de blokken 1px breder maak, gaat het laatste blok naar de volgende regel. Exact hetzelfde probleem dus als gisteren toen ik deze laatste verbeteringen van boem-dikkie nog niet gebruikt had.
Het blijft een onopgelost raadsel


Het gaat dus om dit rare gat (rechts, niet erboven) dat ik niet kan opvullen door de blokken iets breder te maken.

[ Bericht 9% gewijzigd door -J-D- op 25-09-2012 19:12:37 ]

quote:

Op dinsdag 25 september 2012 19:04 schreef -J-D- het volgende:

[..]

Uhh, nooit
Is dat de domme fout? Let me check it!
-edit-
Ja dus, dat was dom van me. Had ik zelf kunnen bedenken. Nu eens zien of het probleem met het doorlopen naar rechts is opgelost als ik de getallen aanpas.

-edit-op-edit-
Ik heb nu ook de tips van KomtTijd en boem-dikkie gebruikt. Alleen zie ik dat ik nog steeds niet de gehele breedte van het middenstuk kan gebruiken.
Als ik de blokken 1px breder maak, gaat het laatste blok naar de volgende regel. Exact hetzelfde probleem dus als gisteren toen ik deze laatste verbeteringen van boem-dikkie nog niet gebruikt had.
Het blijft een onopgelost raadsel

[ afbeelding ]
Het gaat dus om dit rare gat (rechts, niet erboven) dat ik niet kan opvullen door de blokken iets breder te maken.

Nee hoor. Je sluit je div #header pas af ná die blokken, wat dus betekent dat hij wrapped om die blokken, en je header is net zo breed als dat je blokken nu zijn. Verander de width van je div#header maar eens naar 20px groter (als voorbeeld). Als je dan je blokken breder maakt, of meer margin, blijven ze wel netjes naast elkaar staan op de gewenste breedte.

Hmmmz, ik snap een beetje wat je bedoelt, maar nog niet helemaal. Ik ga wat klooien met die waarde van header en van de blokken om te zien of ik het passend krijg.
Dank voor de tip.

Ik weet niet of ik dat moet doen, met mijn beperkte kennis van CSS

Mijn oplossing was meer als voorbeeld waarom je daar een ruimte hebt. Sluit je header af wanneer hij moet afsluiten. En als je een wrapper wil, maak dan een extra div die om alles heen zit met een duidelijke naamgeving.

Ben bang dat dit probleem boven mijn pet gaat. Als ik met het veel gepuzzel met getallen niet tot de oplossing kom, zal ik dus me veel meer moeten verdiepen in de opbouw, qua wrapper/header en CSS in het algemeen. Best karwei, ben ik bang. Zeker nu ik, misschien niet op een elegante wijze, het zaakje zo voor elkaar heb dat het op 2 mm nauwkeurig er goed genoeg uitziet. Met wat geschuif
met getallen, heb ik alleen links nog een ruimteprobleem, alleen nu iets teveel ipv te weinig blok.

-edit-
Hebbes. Vast niet elegant, vast niet volgens de manier hoe het moet, maar het werkt.

Op naar het volgend probleem. Het werkend krijgen van rounded corners in IE.
Maar goed, daar ga ik eerst een paar uur op puzzelen voordat ik jullie weer lastig val.

[ Bericht 20% gewijzigd door -J-D- op 25-09-2012 19:52:16 ]

Op deze site zie je de mogelijkheid om een bericht in het gastenboek achter te laten.
Het invulveld voor het bericht zelf is echter heel klein. Mijn vraag is hoe ik deze groter kan maken.

Al onderzocht:
* Standaard instellingen van Easy Guestbook (in Joomla) biedt die mogelijkheid niet.
* Met Web Developer wel gevonden dat bij dat vak de volgende regel thuis hoort:
<textarea name="gbtext" id="gbtext" class="inputbox" style="width:245px;" rows="15" cols="50"></textarea>

Als ik echter inputbox een grotere waarde geeft geldt dat voor ELK invulveld en dat is niet de bedoeling.
Mijn eigen gedachten:
Misschien moet ik wel een inputbox2 kan aanmaken waarbij die waarde groter is. Ik kan echter niet vinden waar ik een aanpassing moet maken in de bestanden van Easybook om dat veld te laten verwijzen naar inputbox2 ipv de gewone.

Iemand adviseerde mij om een override te maken. Onderstaande code heb ik toegevoegd aan styles.css.
Helaas verandert dat niets bij mij.

Iemand een idee wat ik kan doen?

een textarea moet je row="" en cols="" geven

style.css, regel 260 krijgt hij 20px hoogte.

[ Bericht 38% gewijzigd door Catch22- op 01-10-2012 12:45:56 ]