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

wyszukiwarka chowa się przy mniejszej rozdzielczości

0 głosów
639 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 925 wizyt
Dziedziczenie klasy od diva, który pójdzie pod spób przy mniejszej rozdzielczości ekranu
pytanie zadane 29 czerwca 2017 w HTML i CSS przez andrzej-cs Początkujący (300 p.)
–1 głos
0 odpowiedzi 194 wizyt
"Wyrwa" pomiędzy slajdami na stronie + odwrotna kolejność przy mniejszej rozdzielczości
pytanie zadane 21 stycznia 2016 w HTML i CSS przez Bakr Mądrala (6,850 p.)
0 głosów
1 odpowiedź 219 wizyt
Na mniejszej rozdzielczości nie da się nic wpisać
pytanie zadane 20 września 2017 w HTML i CSS przez Mistrz0000000 Bywalec (2,780 p.)

93,608 zapytań

142,531 odpowiedzi

323,004 komentarzy

63,101 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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

Kursy INF.02 i INF.03

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...