Volledige versie bekijken : probleem met de border



mXX
15 May 2011, 17:04
hey,

ik moest voor een opdracht voor school een website maken in xHTML. Is redelijk goed gelukt enkel een klein dingetje dat ik niet juist krijg...

onderaan bij de footer is de border-right niet juist . Ik zou hem graag willen hebben net als de border-right van facebook. Maar lukt me niet zo goed. Heb al enkele zaken geprobeerd maar geen succes

iemand die me een beetje hiermee kan helpen?
site: Welkom op Bhen-Auto (http://home.scarlet.be/makhout/index.html)

btw. wat vinden jullie van de site? Iets dat ik kan verbeteren of beter anders zou doen? Tips zijn altijd welkom http://www.9lives.be/forum/images/smilies/smile.gif

update: het moest ook crossbrowser compatibel zijn. Ik heb het al getest in firefox en IE8. Zouden gebruikers van chrome/safari/... hier mss feedback over geven aub?
_________________

roeba123
15 May 2011, 21:57
Dag mXX

Even een gokje maar zou het probleem met deze lijn niet kunnen opgelost zijn als je in je css:

.footer {
height: 50px;
}
die height erbij zet, dan zal die streep toch over de totale hoogte van het "vakje" lopen zoals bij de id="facebook".


Nu ik denk dat het ook wel nog anders kan, maar dit zou misschien wel een noodoplossing kunnen zijn (als het werkt natuurlijk ;))



Verder wat vind ik van de site:
Zeer mooi gemaakt!
één kleine opmerking weliswaar. Ik zou de wegwijzer die aantoont waar je juist op de pagina begint nog een kleine achtergrond kleur geven, omdat je dit nu bijna niet kunt zien aangezien er net een witte streep van je achtergrond afbeelding er door loopt.

En voor de rest is het toch niet de bedoeling dat die verschillende talen werken? Anders denk ik dat je daar ook nog iets zal moeten aan doen, heh.


Groeten
Roeba

mXX
15 May 2011, 23:05
.footer
{
height:50px;
}



Dat had ik al gedaan, maar dan kwam die border over de volledig footer (werd doorgetrokken)
Had al enkele zaakjes geprobeerd voordat ik hier mee afkwam, probeer het altijd eerst zelf op te lossen ;-)

Dank je voor de feedback. Ik zal dat nog zeker aanpassen. En de talen moeten het inderdaad niet doen :)
Mag ik weten in welke browser je dit hebt gezien?

Merci voor de moeite

nog suggesties?

kurt0015
16 May 2011, 10:30
De oplossing is zeer simpel. Doordat je gebruik maakt van een procentuele padding bovenaan: padding-top: 2.5%; gaat hij deze bij je height optellen. De oplossing is dus als volgt:

.footer {
border-right: 1px solid #FFFFFF;
float: left;
line-height: 56px;
margin: 0 0 0 3%;
padding-right: 3%;
}

We maken hierbij gebruik van line-height om zo de tekst op de juiste positie te zetten. Vermits de hoogte van deze balk nooit veranderd zou je de padding-top ook kunnen omzetten in pixels en deze van je totale hoogte aftellen. Maar deze oplossing leek me veel eenvoudiger en makkelijk in gebruik.

mXX
20 May 2011, 15:59
Heb ik eens geprobeerd, maar zonder succes. De border wordt nog steeds doorgetrokken over de hele footer, jammer genoeg...

kurt0015
21 May 2011, 01:59
Zou je iets meer kunnen vertellen welke browser gebruik je? ik heb deze code namelijk zoals hierboven ingevoerd in firebug in firefox en dit werkte perfect.

Butterflyice
22 May 2011, 08:59
Gebruik maar deze code in de css dan is het gefixed.



.footer
{
float:left;
height:50px;
margin:0.5% 0 0.5% 1%;
border-right:1px solid #FFF;
padding-right:3%;
line-height:50px;
}

.footer a
{
margin-left:18px;
}


suc6 er mee

mXX
22 May 2011, 22:21
Zou je iets meer kunnen vertellen welke browser gebruik je? ik heb deze code namelijk zoals hierboven ingevoerd in firebug in firefox en dit werkte perfect.
ik gebruik firefox 4 (gebruik ook firebug)


Gebruik maar deze code in de css dan is het gefixed.



.footer
{
float:left;
height:50px;
margin:0.5% 0 0.5% 1%;
border-right:1px solid #FFF;
padding-right:3%;
line-height:50px;
}

.footer a
{
margin-left:18px;
}


suc6 er mee

Dank je!! Dit werkt wel :)

Nu heb ik nog enkele zaakjes ontdekt, de site moest cross browser compatible zijn. Overal is alles inorde en behalve bij... ja juist IE :p

IE8: de taal menu komt onder mekaar, ik denk dit op te lossen met een width mee te geven dat hoger is?
IE7: De hover van mijn menu items werken niet (geen border onder en boven) geen ondersteuning voor hovers en/of borders?
IE6: volledig defect precies, hoe dit op te lossen is een raadsel.... geen ondersteuning voor png?

Bedankt voor uw hulp!

Butterflyice
22 May 2011, 23:03
Ik zou alleen ondersteuning maken voor ie8 en ie9
ie7 en ie6 zijn geen goede browsers en de gene die deze nog hebben kan je vb een javasscript melding geven van update je browser naar de versie van ie8 en voor windows 7 ie9

mXX
23 May 2011, 19:49
zou ik ook geen ondersteuning voor bieden... maar is een vereiste voor de opdracht :(

Butterflyice
23 May 2011, 23:07
dan voor ie6 moet je de png fix gebruiken zie link http://homepage.ntlworld.com/bobosola/index.htm
voor de overige issues gewoon uitzonderings regels maken in een aparte style sheet.

mXX
28 May 2011, 10:46
oke beadnkt!! ik geraak momenteel wel verder
bedankt voor de hulp
topîc mag toe :)