Div na cała stronę a strona mobilna

YuuiOut · Marzec 23, 2017

Witam mam mały problem chciałbym zrobić strone aby była dopasowana do przeglądarki na komputerze nie na telefonie chodzi o coś takiego że jak na nazwa.pl wejdziemy na strone jest na cała strone rozciągnieta, a jak wybierzemy ustawienia developerskie czyli sprawdzimy jak ta strona wyglada mobilnie to jej nie ma ona nadal jest rozciagnieta na cala stronę nie ma po prostu wersji mobilnej tylko trzeba przesuwać jakby miala ustawiona width: 1300px; daje przyklad, i wychodze z zapytaniem jak to zrobić bo jak ja pisze to jest okej na przegladarce ale jak przechodze do podgladu na telefon to mam jedno pod drugim, tak jak widać na zdjęciu, a chce aby po prostu była na całość a nie mobilnie tak jak na nazwa.pl, pozdrawiam i proszę o szybką odpowiedź,

Moje :

Nazwa :

Fizyda · Marzec 23, 2017

min-width ustawione na body - najprawdopodobniej

YuuiOut · Marzec 23, 2017

Nic się nie zmieniło

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
	<div class="wrapper">
		<div class="content-top">
			<div class="content-left">
				Numer : 555.555.555, e-mail : twojastrona@nazwa.pl, Czat Online
			</div>
			<div class="content-right">
				Zaloguj lub zarejestruj się
			</div>
		</div>
	</div>
  </body>
</html>

css :

body {
	padding: 0;
	margin: 0;
	min-width: 1000px;
}
.wrapper {
	min-width: 1000px;
}


/* CONTENT TOP */

.content-top {
	width: 100%;
	height: 55px;
	background-color: red;
	position: absolute;
}
.content-left {
	font-size: 12px;
	color: white;
	padding: 20px;
	float: left;
}
.content-right {
	float: right;
	font-size: 12px;
	color: white;
	padding: 20px;
}

Fizyda · Marzec 23, 2017

Bo masz pływające obiekty które są niejako wyrywane z drzewa dom przez co masz pusty wrapper - na zajmuje miejsca czyli się nie rozciąga.

1) Jak masz wrappera to tylko na nim ustawiaj min-width lub witdh

2) Musisz sprawić by floaty były we wrapperze, np. dodając do content-top overflow: hidden - taki trik css

EDIT:

sorki co innego jesz jeszcze problemem, wyrwałeś zawartość nie floatem, a position: absolute; wywal tą regułę i będzie działało.

Jak ustawisz to co wcześniej pisałem możesz zrezygnować z ustawianie wysokości dla content-top bo pływające elementy wrócą na swoje miejsce.

Tutaj masz przykład ze zrobionym wszystkim o czym wspomniałem: https://jsfiddle.net/6kf6mwq7/

Edytowano Marzec 23, 2017 przez Fizyda (zobacz historię edycji)

YuuiOut · Marzec 23, 2017

Jeszcze mam taki jeden mały problem na to :

nie chce mi się dorównać do strony a tylko podchodzi pod wyszukiwanie.

css :

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');

body {
  padding: 0;
  margin: 0;
  min-width: 1000px;
}
.wrapper {
  min-width: 1000px;
}
a {
  text-decoration: none;
  color: black;
}
li {
    list-style-type: none;
}

/* header */
.header {
    float: left;
    width: 100%;
    background-color: #ede6e6;
    overflow: hidden;
    border-bottom: 1px solid rgba(157, 157, 157, 0.61);
}
.header-contact {
    float: left;
    font-size: 12px;
    font-family: 'Fira Sans Condensed', sans-serif;
}
.header-contact ul {
    display: inline-block;
    float: left;
    margin-left: 0px;
}
.header-contact li {
    float: left;
    display: inline-block;
    padding-left: 10px;
    margin-top: 7px;
    padding-right: 10px;
    border-right: 1px solid #c7c7c7;
}
.header-contact a {
    color: #919191;
    text-decoration: none;
}
.header-contact a:hover {
    color: rgba(145, 145, 145, 0.72);
}
.header-users {
    float: right;
    font-size: 12px;
    font-family: 'Fira Sans Condensed', sans-serif;
}
.header-users ul {
    float: right;
    margin-right: 45px;
}
.header-users li {
    float: left;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 7px;
    border-right: 1px solid #c7c7c7;
}
.header-users a {
    color: #919191;
    text-decoration: none;
}
.header-users a:hover {
    color: rgba(145, 145, 145, 0.72);
}

/* logo and search */

.underheader {
    min-width: 1000px;
    overflow: hidden;
    margin: 0 auto;
}
.logo-top {
    float: left;
    width: 250px;
    height: 120px;
    padding: 10px;
    margin-left: 5%;
    margin-top: 2%;
    background-color: red;
}
.search-product {
    width: 350px;
    overflow: hidden;
    float: left;
    margin-top: 5%;
    margin-left: 7%;
}
input.input-search-product {
    width: 350px;
    height: 55px;
    border: 1px solid rgba(183, 183, 183, 0.39);
    box-shadow: -1px 6px 20px -13px rgba(0,0,0,0.75);
    border-radius: 2px;
    transition: 0.55s;
}
input.input-search-product::-webkit-input-placeholder {
    padding-left: 5px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #c9c9c9;
}
.menu-users {
    float: right;
    width: 350px;
    overflow: hidden;
    margin-top: -6.5%;
    margin-right: 5%;
}
.menu-users ul{
    float: right;
}
.menu-users li {
    float: left;
    display: inline-block;
    padding: 16px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 1px;
    border: 1px solid #e2e2e2;
    background-color: #f4f4f4;
}
.menu-users a {
    color: #767676;
    text-decoration: none;
}
.menu-users li,a:hover {
    color: #848484;
}
.menu-users li span {
    font-size: 13px;
    color: #939393;
}
.show-loggin {
    display: none;
    width: 220px;
    min-height: 130px;
    position: absolute;
    background-color: #f4f4f4;
    margin-top: 1.4%;
    border-radius: 1px;
    border: 1px solid #e2e2e2;
    ;
}
input.input-login {
    width: 90%;
    height: 35px;
    padding: 10px;
    margin-top: 5px;
    margin-left: 5%;
    border: 1px solid rgba(183, 183, 183, 0.39);
    box-shadow: -1px 6px 20px -13px rgba(0,0,0,0.75);
    border-radius: 2px;
    transition: 0.55s;
}
.button-loggin-show {
    float: right;
    margin-top: 3%;
    margin-right: 5%;
    border: none;
    border-radius: none;
    width: 115px;
    height: 35px;
}

/* MENU */

.menu {
    float: left;
    width: 100%;
    height: 45px;
    background-color: red;
    margin-top: 3%;
}

html :

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CMSnet.pl - Twoje centrum projektów</title>

    <!--- style --->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="style/style.css" rel="stylesheet">
    
    <!--- script --->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    jQuery(document).ready(function($){
      op = function(obj) {
        $(obj).stop().slideToggle();
        };
    });
    </script>
</head>
  <body>
      <div class="wrapper">
        <div class="header">
            <div class="header-contact">
                <ul>
                    <li><a href="#">Partnerstwo</a></li>
                    <li><a href="#">Współpraca</a></li>
                    <li><a href="#">Kontakt z nami</a></li>
                </ul>
            </div>
            <div class="header-users">
                <ul>
                    <li><a href="#">Pomoc</a></li>
                    <li><a href="#">Live Chat</a></li>
                </ul>
            </div>
        </div>
        <div class="underheader">
            <div class="logo-top">
                <img src="#" />
            </div>
            <div class="search-product">
                <input type="search" placeholder="Szukaj produktu" class="input-search-product" />
            </div>
            <div style="clear: both;"></div>
            <div class="menu-users">
                <ul>
                    <li><a href="#" onClick="op('#zaloguj');"><span class="glyphicon glyphicon-user"></span> Zaloguj się</a>
                        <div id="zaloguj" class="show-loggin">
                            <input type="text" placeholder="Twój login"  class="input-login"/>
                            <input type="password" placeholder="Twoje hasło" class="input-login"/>
                            <input type="button" value="Zaloguj się" class="button-loggin-show" />
                        </div>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-plus"></span> Rejestracja</a></li>
                </ul>
            </div>
        </div>
        <div class="menu">
            
        </div>
      </div>
  </body>
</html>

Fizyda · Marzec 23, 2017

Wymiary marginesów masz w %.

YuuiOut · Marzec 23, 2017

Ale w jakiej klasie ?? bo tam duzo tego mam ^^

Aale widzisz pozmieniałem wszystko na px, i nadal :

Fizyda · Marzec 23, 2017

Na tym screenie nic nie widać.

Wstawiaj kod który można zobaczyć live, nikt nie będzie wprowadzał zmian żeby zobaczyć co obecnie masz oraz kopiował kodu żeby zobaczyć jego efekt i móc debugować (nikt nie ma interpretera kodu w oczach).

W kontenerach które Ci się rozjeżdżają i nie wiem jak dokładnie teraz wygląda Twój kod dlatego nie wiem czemu nadal masz problem.

YuuiOut · Marzec 23, 2017

Chodzi o to że widzisz ten div z logowaniem i rejestracja jest pod wyszukiwarką a chce aby one były dalej a nie pod soba tylko kolo siebie jak jest w kodzie bo na pomniejszonym czyli jakby sprawdzić mobilnie wyglada to tak :

a na juz normalnym podglądzie wyglada to tak :

jeżeli chciałbyś css to ci podeśle

Fizyda · Marzec 23, 2017

jeżeli chciałbyś css to ci podeśle

Spoko, nie musisz, zaraz kończy mi się ładować szklana kula ... na tą chwilę to mogę zgadywać że elementy które Ci się rozjeżdżają są większej szerokości niż strona dlatego zostają zawinięte. Ale to tylko zgaduję, jak już uruchomię szklaną kulę to będę mógł powiedzieć coś więcej i dokładniej.

YuuiOut · Marzec 24, 2017

html :

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CMSnet.pl - Twoje centrum projektów</title>

    <!--- style --->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="style/style.css" rel="stylesheet">
    
    <!--- script --->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    jQuery(document).ready(function($){
      op = function(obj) {
        $(obj).stop().slideToggle();
        };
    });
    </script>
</head>
  <body>
      <div class="wrapper">
        <div class="header">
            <div class="header-contact">
                <ul>
                    <li><a href="#">Partnerstwo</a></li>
                    <li><a href="#">Współpraca</a></li>
                    <li><a href="#">Kontakt z nami</a></li>
                </ul>
            </div>
            <div class="header-users">
                <ul>
                    <li><a href="#">Pomoc</a></li>
                    <li><a href="#">Live Chat</a></li>
                </ul>
            </div>
        </div>
        <div class="underheader">
            <div class="logo-top">
                <img src="#" />
            </div>
            <div class="search-product">
                <input type="search" placeholder="Szukaj produktu" class="input-search-product" />
            </div>
            <div class="menu-users">
                <ul>
                    <li><a href="#" onClick="op('#zaloguj');"><span class="glyphicon glyphicon-user"></span> Zaloguj się</a>
                        <div id="zaloguj" class="show-loggin">
                            <input type="text" placeholder="Twój login"  class="input-login"/>
                            <input type="password" placeholder="Twoje hasło" class="input-login"/>
                            <input type="button" value="Zaloguj się" class="button-loggin-show" />
                        </div>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-plus"></span> Rejestracja</a></li>
                </ul>
            </div>
        </div>
        <div class="menu">
            <nav>
                <ul>
                    <li><a href="#">Strona główna</a></li>
                    <li class="menudrop"><a href="#" class="menudrop-btn">Hosting</a>
                        <div class="menu-dropdown-links">
                            <a href="#">Lite</a>
                            <a href="#">Standard</a>
                            <a href="#">Pro</a>
                        </div>
                    </li>
                    <li class="menudrop"><a href="#" class="menudrop-btn">CMS</a>
                        <div class="menu-dropdown-links">
                            <a href="#">CMS Sklep</a>
                            <a href="#">CMS Filmy</a>
                        </div>
                    </li>
                    <li><a href="#">Własny projekt</a></li>
                    <li><a href="#">Nasze projekty</a></li>
                    <li><a href="#">O nas</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>
        </div>
      </div>
  </body>
</html>

css

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

body {
  padding: 0;
  margin: 0;
  min-width: 1000px;
}
.wrapper {
  min-width: 1000px;
}
a {
  text-decoration: none;
  color: black;
}
li {
    list-style-type: none;
}

/* header */
.header {
    float: left;
    width: 100%;
    background-color: #ede6e6;
    height: 33px;
    border-bottom: 1px solid rgba(157, 157, 157, 0.61);
}
.header-contact {
    float: left;
    font-size: 12px;
    font-family: 'Fira Sans Condensed', sans-serif;
}
.header-contact ul {
    display: inline-block;
    float: left;
    margin-left: 0px;
    margin-top: 0px;
}
.header-contact li {
    float: left;
    display: inline-block;
    padding: 8px;
    border-right: 1px solid #c7c7c7;
}
.header-contact li:hover {
    background-color: rgba(224, 218, 218, 0.88);
}
.header-contact a {
    color: #919191;
    text-decoration: none;
}
.header-contact a:hover {
    color: rgba(145, 145, 145, 0.72);
}
.header-users {
    float: right;
    font-size: 12px;
    font-family: 'Fira Sans Condensed', sans-serif;
}
.header-users ul {
    float: right;
    margin-right: 45px;
    margin-top: 0px;
}
.header-users li {
    float: left;
    display: inline-block;
    padding: 8px;
    border-right: 1px solid #c7c7c7;
}
.header-users li:hover {
    background-color: rgba(224, 218, 218, 0.88);
}
.header-users a {
    color: #919191;
    text-decoration: none;
}
.header-users a:hover {
    color: rgba(145, 145, 145, 0.72);
}

/* logo and search */

.underheader {
    min-width: 1000px;
    overflow: hidden;
    margin: 0 auto;
}
.logo-top {
    float: left;
    width: 250px;
    height: 120px;
    padding: 10px;
    margin-top: 10px;
    margin-left: 25px;
    background-color: red;
}
.search-product {
    width: 640px;
    overflow: hidden;
    float: left;
    margin-top: 40px;
    margin-left: 35px;
}
input.input-search-product {
    width: 640px;
    height: 55px;
    border: 1px solid rgba(183, 183, 183, 0.39);
    box-shadow: -1px 6px 20px -13px rgba(0,0,0,0.75);
    border-radius: 2px;
    transition: 0.55s;
}
input.input-search-product::-webkit-input-placeholder {
    padding-left: 5px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #c9c9c9;
}
.menu-users {
  float: right;
    margin-top: 42px;
    margin-right: 10px;
    
}
.menu-users ul{
    float: right;
}
.menu-users li {
    float: left;
    display: inline-block;
    padding: 15px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 1px;
    border: 1px solid #e2e2e2;
    background-color: #280772;
}
.menu-users a {
    color: white;;
    text-decoration: none;
}
.menu-users li,a:hover {
    color: white;
}
.menu-users li span {
    font-size: 13px;
    color: white;
}
.show-loggin {
    display: none;
    width: 220px;
    min-height: 130px;
    position: absolute;
    background-color: #f4f4f4;
    border-radius: 1px;
    border: 1px solid #e2e2e2;
    margin-top: 20px;
    ;
}
input.input-login {
    width: 90%;
    height: 35px;
    padding: 10px;
    margin-top: 5px;
    margin-left: 5%;
    border: 1px solid rgba(183, 183, 183, 0.39);
    box-shadow: -1px 6px 20px -13px rgba(0,0,0,0.75);
    border-radius: 2px;
    transition: 0.55s;
}
.button-loggin-show {
    float: right;
    margin-top: 7px;
    margin-right: 13px;
    background-color: #280772;
    border: none;
    border-radius: none;
    width: 115px;
    height: 35px;
}

/* MENU */

.menu {
    float: left;
    width: 100%;
    height: 50px;
    background-color: #280772;
    margin-top: 3%;
    font-family: 'Titillium Web', sans-serif;
}
.menu ul {
    float: left;
    overflow: hidden;
}
.menu li {
    float: left;
}
.menu li a, .dropdown-btn {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 15px;
}
.menu li a:hover, .menudrop:hover .menudrop-btn {
    background-color: #1a054b;
    color: white;
}
li.menudrop {
    display: block;
}
.menu-dropdown-links {
    position: absolute;
    background-color: #280772;
    min-width: 150px;
    display: none;
}
.menu-dropdown-links a {
    color: white;
    text-align: left;
    text-decoration: none;
    font-family: 'Titillium Web', sans-serif;
}
.menu-dropdown-links a:hover {
    background-color: #290679;
    color: white;
}
.menudrop:hover .menu-dropdown-links {
    display: block;
}

YuuiOut · Marzec 25, 2017

reff

xorg · Marzec 30, 2017

Wrzuć to na jakąś platformę typu https://jsfiddle.net/ i podaj linka to prędzej ktoś Ci pomoże.

Zaloguj się

Div na cała stronę a strona mobilna

Polecane posty

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Fizyda 34

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Fizyda 34

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Fizyda 34

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Fizyda 34

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Fizyda 34

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

YuuiOut 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

xorg 693

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Utwórz konto

Zaloguj się

Przeglądaj

Aktywność