InLine style omzetten naar style sectie werkt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Harry H Arends

Harry H Arends

16/08/2017 20:40:48
Quote Anchor link
In mijn navigatie wil ik de omlijning rond hebben. Daarvoor de style aangpast:[code}<nav class="navbar navbar-inverse" style="border-radius: 25px 0px 0px 25px; border: 2px solid #006400;">
Dit werkt dus, echter als ik dit naar mijn styles overzet werkt het niet. Het staat zo in mijn HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
nav {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}
Wat kan hier fout gaan
 
PHP hulp

PHP hulp

21/09/2019 22:14:03
 
Bart V B

Bart V B

16/08/2017 20:57:46
Quote Anchor link
Het is een class, dus je moet er een punt voorzetten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.nav {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


edit, verkeerd gelezen..
Probeer dit eens:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
#nav {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}

En dan in je html code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<nav id="nav" .... >
Gewijzigd op 16/08/2017 21:01:21 door Bart V B
 
Pipo Clown

Pipo Clown

16/08/2017 22:16:28
Quote Anchor link
Je geeft het element 2 verschillende classes mee, navbar & navbar-inverse.

Ik zou dan ook één van de 2 onderstaande declaraties verwachten in je stylesheet:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.navbar {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


of

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.navbar-inverse {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}




Toevoeging op 16/08/2017 22:16:58:

Je geeft het element 2 verschillende classes mee, navbar & navbar-inverse.

Ik zou dan ook één van de 2 onderstaande declaraties verwachten in je stylesheet:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.navbar {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


of

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.navbar-inverse {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}
 
Harry H Arends

Harry H Arends

17/08/2017 08:39:25
Quote Anchor link
Heb beide geprobeerd zonder resultaat
 
- Ariën -
Beheerder

- Ariën -

17/08/2017 08:42:04
Quote Anchor link
Hmm... ben je bekend met de WebDevelopers tool van je browser om je elementen op je pagina te inspecteren?
Daarmee kan je per HTML-element zien welke CSS er gebruikt wordt en welke overerving er eventueel gebruikt of genegeerd wordt.
 
Elmar vH

Elmar vH

17/08/2017 10:14:14
Quote Anchor link
"Heb beide geprobeerd zonder resultaat"

Dan ligt het waarschijnlijk aan de opbouw van je script, uitgaande dat je html pagina er ongeveer zo uitziet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<html>
--> jouw eigen custom.css (waarin je dus je eigen code toevoegd )
--> Bootstrap.css
--> body
</html>


Kan het zo zijn; dat je de css bestanden moet omdraaien?
Dus eerst boostrap.css inladen en daarna je eigen css bestanden.
Ik heb het sterke vermoeden dat "boostrap" jou css overruled.

Je zou het wellicht kunnen oplossen door het zo toe te passen (niet de meest elegante manier):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.navbar {
    border-radius: 25px 0px 0px 25px !important;
    border: 2px solid #006400 !important;
}
 
Harry H Arends

Harry H Arends

17/08/2017 12:11:03
Quote Anchor link
DE pagina is hier te vinden
 
Elmar vH

Elmar vH

17/08/2017 12:13:58
Quote Anchor link
je hebt nu:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
/*.navbar {
    border-radius: 0px 0px 0px 0px;
    border: 2px solid #006400;
}  */


Wijzig dit eens in:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.eigenclass {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


en dan dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<nav class="navbar navbar-inverse" style="border-radius: 25px 0px 0px 25px; border: 2px solid #006400;">


in:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<nav class="navbar navbar-inverse eigenclass">


Zal je ongetwijfeld de juiste richting op helpen :)
Gewijzigd op 17/08/2017 12:21:45 door Elmar vH
 
- Ariën -
Beheerder

- Ariën -

17/08/2017 13:09:10
Quote Anchor link
En vermijd altijd het gebruik van inline styles:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
style="border-radius: 25px 0px 0px 25px; border: 2px solid #006400;"

Dit zorgt vaak voor verwarring en bijzondere effecten met de overerving van CSS.
Gebruik dus bij sterke voorkeur een .css stijlblad.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.