PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

InLine style omzetten naar style sectie werkt niet

Door Harry H Arends op 16-08-2017 20:40
2.484 views
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;">[/code]
Dit werkt dus, echter als ik dit naar mijn styles overzet werkt het niet. Het staat zo in mijn HTML
nav {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}
Wat kan hier fout gaan
B
Bart V B
16-08-2017 20:57 gewijzigd op 16-08-2017 21:01
Het is een class, dus je moet er een punt voorzetten:

.nav {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


edit, verkeerd gelezen..
Probeer dit eens:

#nav {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}

En dan in je html code:

<nav id="nav" .... >
P
Pipo Clown
16-08-2017 22:16
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:


.navbar {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


of


.navbar-inverse {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}




[size=xsmall]Toevoeging op 16/08/2017 22:16:58:[/size]

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:


.navbar {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


of


.navbar-inverse {
    border-radius: 25px 0px 0px 25px;
    border: 2px solid #006400;
}


Harry H Arends
17-08-2017 08:39
Heb beide geprobeerd zonder resultaat
- Ariën -
17-08-2017 08:42
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.
E
E vH
17-08-2017 10:14
"Heb beide geprobeerd zonder resultaat"

Dan ligt het waarschijnlijk aan de opbouw van je script, uitgaande dat je html pagina er ongeveer zo uitziet:

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

.navbar {
    border-radius: 25px 0px 0px 25px !important;
    border: 2px solid #006400 !important;
}
E
E vH
17-08-2017 12:13 gewijzigd op 17-08-2017 12:21
je hebt nu:

/*.navbar {
    border-radius: 0px 0px 0px 0px;
    border: 2px solid #006400;
}  */


Wijzig dit eens in:

.eigenclass {
    border-radius: 25px 0px 0px 25px; 
    border: 2px solid #006400;
}


en dan dit:

<nav class="navbar navbar-inverse" style="border-radius: 25px 0px 0px 25px; border: 2px solid #006400;">


in:

<nav class="navbar navbar-inverse eigenclass">


Zal je ongetwijfeld de juiste richting op helpen :)
- Ariën -
17-08-2017 13:09
En vermijd altijd het gebruik van inline styles:

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.

Reageren

Inloggen om te reageren