Clau4x
(Claudiu)
aprilie 23, 2015, 11:28pm
1
Am si eu 2 mici probleme.
Dupa cum se poate vedea si in imagine am o dunga alba sub navbar si nu stiu de la ce e.
Tind sa cred ca este un box-shadow pe nav bar, dar cand am folosit box-shadow: none; pe navbar in css nu s-a schimbat nimic, lucru care a mers pe link-urile de la butoane (text-shadow: none;) care si ele la randul lor aveau un drop shadow prestabilit.
Se poate vedea si aici problema de la pct.1
Dar aici am alta buba
Am folosit:
.navbar-brand,
.navbar-nav li a {
line-height: 60px;
height: 60px;
padding-top: 0;
}
ca sa redimensionez navbar-ul, dar acel buto collaps s-a “descentrat”
Cum fac sa-l pozitionez pe centru navbar-ului.
Lucas
(Razvan Lucas)
aprilie 24, 2015, 5:39am
2
Ce clase ai folosit pentru navbar? Pune si o structura html
1 Like
Daca ai putea sa pui site-ul undeva live sa putem sa vedem exact ce si cum ar fi de mare ajutor sau macar posteaza html-ul si css-ul undeva. Pana atunci nu prea stiu daca chiar putem sa te ajutam. Eventual daca nu ai un domeniu la dispozitie, pune-l pe koding.com sau pe codepen si posteaza linkul aici.
1 Like
yox64
(Werner Banyacskay)
aprilie 24, 2015, 7:40am
4
Foloseste Inspect Element la ambele probleme si sigur o sa gasesti rezolvare. Foloseste-te de tool-urile care ti le pune la dispozitie browserul.
2 Likes
Clau4x
(Claudiu)
aprilie 24, 2015, 2:37pm
5
http://claudiux4x.zz.mu/NoName/
Am urcat acum pe un host fisierele
dabuno
(Bogdan)
aprilie 24, 2015, 2:56pm
6
primul border alb este de la clasa:
.navbar-fixed-top {
border-width: 0 0 1px;
}
pare ca asa e standard de la bootstrap. ca indent preformatted text by 4 spacessa-l schimbi o metoda e sa ajustezi clasa navbar-toggle.
momentan e:
.navbar-toggle {
#other css rules...
margin-top: 8px;
}
schimbat in 13px pare centrat la mine
1 Like
fără prea multă bătaie de cap.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
adaugi un <center> </center>
<center><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button></center>
KISS
Clau4x
(Claudiu)
aprilie 24, 2015, 3:15pm
8
Centrat pe height nu pe width
Ms oricum
1 Like
atunci încearcă aşa:
button, input, optgroup, select, textarea {
margin: 50%; aici pui 50%
font: inherit;
color: inherit;
}
şi la navbar-toggle un float left
.navbar-toggle {
#other css rules...
margin-top: 8px;
float:left;
}
iamntz
(Ionuț Staicu)
aprilie 24, 2015, 3:34pm
10
@Clau4x : scoate proprietățile astea din css:
.navbar-brand, .navbar-nav li a {
line-height: 60px;
height: 60px;
padding-top: 0;
}
1 Like
Clau4x
(Claudiu)
aprilie 24, 2015, 4:00pm
11
Daca le scot cum maresc dimensiunea navbar-ului?
1 Like
iamntz
(Ionuț Staicu)
aprilie 24, 2015, 4:23pm
12
padding-top/bottom pe navbar-header
.
1 Like
Clau4x
(Claudiu)
aprilie 29, 2015, 8:16pm
13
Revin cu o alta problema
Am incercat sa fac fac un text, dintr-o anumita clasa responsiv in functie de dimensiunea ecranului.
Am cautat pe google si am gasit ceva, dar nu merge, la mine arata asa:
@media (max-width: @screen-md) {
.slogan {
font-size: 72px;
}
}
@media (max-width: @screen-sm) {
.slogan {
font-size: 56px;
}
}
@media (max-width: @screen-xs) {
.slogan {
font-size: 26px;
}
}
Care e greseala?
Multumesc !
PocsanJr
(Catalinul)
aprilie 29, 2015, 9:42pm
14
Poti folosi si jQuery pentru a modifica marimea font-ului in functie de dimensiunea ecranului.De asemenea poti folosi doar javascript, este destul de usor.
Exemplu foarte simplu folosind jQuery:
<!doctype html>
<html lang="en">
<head>
<title>Window resize example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$(window).resize(function(){
if($(window).width() > 1000) {
$('p').css('font-size', '300%');
}
});
});
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Exemplu acesta este doar ca o idee, (screen-sm, screen-md si screen-xs probabil au niste valori dupa care poti modifica exemplul mai sus ).
Clau4x
(Claudiu)
aprilie 29, 2015, 10:24pm
15
Da, dar daca vreau numai pentru anumite clase cum fac?
$(‘clasa_mea’).css(‘font-size’, ‘300%’);
si in loc de 1000, pot sa pun screen-md sau screen-xs? sau trebuie pun exact valorile care le foloseste bootstrap-ul?
PocsanJr
(Catalinul)
aprilie 29, 2015, 10:48pm
16
Pentru clase faci in felul urmator:
$(’.clasaMea’).css(‘font-size’, ‘100px’);
Trebuie sa pui valorile folosite de bootstrap.
Uite aici niste informatii -> Link
Clau4x
(Claudiu)
aprilie 29, 2015, 10:53pm
17
Presupun ca pot sa pun mai multe if-uri in functia aia nu?
Ceva gen:
$(document).ready(function() {
$(window).resize(function(){
if($(window).width() > 1992) {
$('.clasa_mea').css('font-size', '72px');
}
if($(window).width() > 768) {
$('clasa_mea').css('font-size', '55px');
}
if($(window).width() > 480) {
$('clasa_mea').css('font-size', '36px');
}
if($(window).width() > 320) {
$('clasa_mea').css('font-size', '25px');
}
});
});
si daca bag toata chestia asta intr-un fisier .js nu e mai ok?
PocsanJr
(Catalinul)
aprilie 29, 2015, 11:00pm
18
Da, dar parca mai bine este o structura de control cu mai multe ramnificatii, deoarece, gandeste-te, tu verifici mai multe optiuni, dar tie iti trebuie doar o singura optiune in functie de dimensiunea ecranului.
if ($(window).width() > 1992) {
//...
} else if ($(window).width() > 768) {
//...
} else if ($(window).width() > 480) {
//...
} else if ($(window).width() > 320) {
//...
} else {
//...
}
PocsanJr
(Catalinul)
aprilie 29, 2015, 11:05pm
20
Cu placere, daca mai ai alte probleme, te ajut cu mare drag.