• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

wyszukiwarka chowa się przy mniejszej rozdzielczości

VPS Starter Arubacloud
0 głosów
383 wizyt
pytanie zadane 17 września 2016 w HTML i CSS przez Mistrz0000000 Bywalec (2,780 p.)
WItam, przerabiam swoją stronę pod bootstrap i jeszcze nie wiem o nim wszystkiego, pomoże mi ktoś to ogarnąć ? Na tej stronie http://polygonlombard.esy.es/oferta/ wyszukiwarka normalnie chowa się pod navbar, więc dodałem margin-top: 80px; i działa, ale na telefonach znowu chowa się pod navbar i w dodatku wcina część pierwszego produktu.
komentarz 17 września 2016 przez Filip2248 Dyskutant (8,840 p.)
Zmień tagi na bardziej dokładne! PROSZĘ!!!

2 odpowiedzi

0 głosów
odpowiedź 17 września 2016 przez nauwalis Mądrala (7,350 p.)
Stron anie jest responsywna, dlatego tak się dzieje. Może to się przyda http://www.infected.pl/web/tutorial-bootstrap-twoja-pierwsza-responsywna-strona.html
komentarz 17 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)
no tyle że działa na tabletach i td, dopiero na telefonie się psuje
komentarz 17 września 2016 przez nauwalis Mądrala (7,350 p.)
To już dziwne, no ale gdyby była responsywna to powinna być na każdym urządzeniu
0 głosów
odpowiedź 17 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Navbar ma jak się domyślam position: fixed; dlatego górny margines wyszukiwarki nie sprawia, że "odpycha" się ona od navbar'a, ale w tym przypadku od góry strony. Navbar ma wysokość 70px, Ty wyszukiwarce dałeś 80px marginesu co ostatecznie sprawia, że względem navbar ma ona 10px odstępu (ale tak naprawdę to margines masz 80px względem góry strony).

Gdy zmniejsza się szerokość strony to w pewnym momencie navbar przechodzi z wysokości 70px na 140px. Zgodnie z tym co napisałem powyżej wyszukiwarka chowa się za navbar'em.

Sam zmień co trzeba w kodzie. Jak coś to pisz :)

komentarz 17 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)
edycja 17 września 2016 przez Mistrz0000000

Zrobiłem to tak:

.siema
{
    margin-top: 80px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .siema {
        margin-top: 150px;
    }
}

i dalej nie działa

komentarz 18 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Hmm. No to sprawdź czy po każdej partii elementów z float: left; masz element z clear: both;. Często dzieje się tak, że gdy nie wyczyścisz float: left'u to strona dziwnie się zachowuje. Tu masz to szczegółowo opisane: http://www.forumweb.pl/porady-i-tutoriale-www/css-clearowanie-czyli-problemy-z-float,47914

komentarz 18 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)
Zrobiłem pod navbarem
i nie działa
komentarz 20 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Masz bardzo dziwną strukturę strony. Na samym początku w tagu body jest div o kasie "navbar" w którym jest div o klasie "container", a pod navbar'em jest znów div "container" w którym jest div navbar - Mind Fuck (przynajmniej tak to wygląda na stronie z użyciem konsoli).

Podaj kod HTML i CSS podstrony "oferta", bo trudno się połapać w konsoli :)

komentarz 20 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)

No więc tu masz kod strony oferta 


<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Polygon Lombard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../css/bootstrap.css" rel="stylesheet">

	<link href='http://fonts.googleapis.com/css?family=Belgrano|Courgette&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

	<link href="../css/bootshape.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">Polygon Lombard</a>
		</div>
		<nav role="navigation" class="collapse navbar-collapse navbar-right">
			<ul class="navbar-nav nav">
				<li><a href="/">Strona Głowna</a></li>
				<li><a href="/oferta/">Oferta</a></li>
				<li><a href="/pomoc/">Pomoc</a></li>
				<?PHP signed_menu() ?>
			</ul>
		</nav>
	</div>
</div>
<?PHP include($dynamic_content); ?>
<div class="footer text-center">
	<p>&copy; 2016 Polygon Lombard. All Rights Reserved</p>
</div><!-- End Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootshape.js"></script>
</body>
</html>

a tu css:

body {
    text-align: center;
    background-image:url('../img/bg.png');
    background-repeat:repeat;
}
p {
    margin: 0 0 20px;
}

.container{
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
}

.content
{
    margin-top: 80px;
}

.navbar {
    background-image:url('../img/bg.png');
    background-repeat:repeat;
}
.jumbotron {
    background-color: transparent;
    padding: 70px 0 0 0;
}
.footer {
    margin-top: 40px;
    padding: 40px 0;
}
.event {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 30px;
}
.event + .event {
    padding-top: 30px;
}
.event .date {
    margin-bottom: 7px;
    color: #2a6496;
}

.faq
{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.banner
{
    margin-top: 10px;
    width: 90%;
}

.newline
{
    margin-top: 10px;
}

.siema
{
    margin-top: 80px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .siema {
        margin-top: 150px;
    }
}

.menus
{
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.center
{
    margin-left: auto;
    margin-right: auto;
}

.circle
{
    background-color: #fff;
    color: #888;
    height: 100px;
    width: 100px;
    border: 2px dashed #333;
    display: flex;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.circle span
{
    font-size: 30px;
    display: block;
    text-align: center;
    font-weight: 700;
    margin: 0 auto;
}

.line
{
    border-bottom: 1px solid lightgray;
    margin-top: 50px;
    margin-bottom: 10px;
}

.my
{
    font-family: sans-serif;
    border: 2px dashed #0CB3EB;
    border-radius: 10px;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.navbar-nav > a{
    transition: 0.5s;
}

.footerfix
{
    margin-botton: 0;
}

.navbar-nav > li > a:hover
{
    transition: 0.2s;
    color: #1FE0B7 !important;
}

.my-text
{
    font-size: 17px;
    font-family: sans-serif;
}

.span-backlight
{
    color: #0CB3EB;
}


#custom-search-input {
    width: 50%;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 0;
}

.btn-form
{
    position: relative;
    left: 0;
    top: -5px;
}

.form-inline
{
    width: 40%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}



.input-sm
{
    width: 40%;
}

select
{
    float: left;
}

.search
{
    margin-top: 80px;
}

.btn-v2
{
    height: 34px;
}

.text-contact
{
    font-family: sans-serif;
    width: 25%;
    float: left;
    margin-left: 4.162%;
    margin-right: 4.162%;

}

.wrapper {
    margin-top: 80px;
    margin-bottom: 80px;
}

.nice-text
{
    font-family: 'Courgette', cursive;
    font-size: 30px;
    line-height: 20px;
    padding: 25px 15px;
    color: #1FE0B7 !important;
    margin-bottom: 20px;
}

.nice-text:hover
{
    text-decoration: none;
}

.row
{
    margin-bottom: 20px;
}

.form-signin {
    max-width: 380px;
    padding: 15px 35px 45px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.form-signin-heading,
.checkbox {
    margin-bottom: 30px;
}

.checkbox {
    font-weight: normal;
}

.wrapper .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
@include box-sizing(border-box);
}

input{
    margin-bottom: 10px;
}

.wrapper .alert-danger
{
    margin-bottom: 10px;
    font-size: 18px;
    border-radius: 10px;
}
.wrapper .alert-success
{
    margin-bottom: 10px;
    font-size: 18px;
    border-radius: 10px;
}

.text-left
{
    text-align: left;
    word-wrap: break-word;
}

.font-25
{
    font-size: 25px;
}

nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}

.main{
    padding: 10px 10px 0 10px;
}

@media (min-width: 765px) {

    .main{
        position: absolute;
        width: calc(100% - 40px);
        margin-left: 40px;
        float: right;
    }

    nav.sidebar:hover + .main{
        margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
        text-align: center;
        width: 100%;
        margin-left: 0px;
    }

    nav.sidebar a{
        padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
        border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
        border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
        padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #777;
    }

    nav.sidebar{
        width: 200px;
        min-height: 20%;
        height: auto;
        float: left;
        margin-bottom: 0px;
    }

    nav.sidebar li {
        width: 100%;
    }

    nav.sidebar:hover{
        margin-left: 0px;
    }

    .forAnimate{
        opacity: 0;
    }
}

.table
{
    width: 81%;
}

th
{
    text-align: center;
}

.navbar{
    clear: both !important;
}

@media (min-width: 1330px) {

    .main{
        width: calc(100% - 200px);
        margin-left: 200px;
    }

    nav.sidebar{
        margin-left: 0px;
        float: left;
    }

    nav.sidebar .forAnimate{
        opacity: 1;
    }
}

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
}

nav:hover .forAnimate{
    opacity: 1;
}
section{
    padding-left: 15px;
}

a reszta cssa to bootstrap

Podobne pytania

0 głosów
3 odpowiedzi 511 wizyt
–1 głos
0 odpowiedzi 158 wizyt
0 głosów
1 odpowiedź 170 wizyt

93,018 zapytań

141,982 odpowiedzi

321,283 komentarzy

62,365 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...