Skocz do zawartości
YuuiOut

Div na cała stronę a strona mobilna

Polecane posty

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 : 23624693116878935714.png

 

Nazwa :84465093841941532719.png

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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;
}

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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 przez Fizyda (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Jeszcze mam taki jeden mały problem na to : 43695252798916514614.png

 

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>

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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


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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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 :

 

13344971952180793315.png

 

a na juz normalnym podglądzie wyglada to tak :

 

83542380549770234251.png

 

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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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;
}

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×