Skocz do zawartości


 

Zdjęcie

Div na cała stronę a strona mobilna

Div na cała stronę a strona mobilna

  • Proszę się zalogować aby odpowiedzieć
12 odpowiedzi na ten temat

Div na cała stronę a strona mobilna

#1 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 23 marzec 2017 - 13:13

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


  • 0

#2 Fizyda

Fizyda

    Stały użytkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 postów

Napisany 23 marzec 2017 - 13:32

min-width ustawione na body - najprawdopodobniej


  • 0

#3 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 23 marzec 2017 - 13:38

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

  • 0

#4 Fizyda

Fizyda

    Stały użytkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 postów

Napisany 23 marzec 2017 - 13:55

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/


Edytowany przez Fizyda, 23 marzec 2017 - 14:00.

  • 0

#5 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 23 marzec 2017 - 19:56

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>


  • 0

#6 Fizyda

Fizyda

    Stały użytkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 postów

Napisany 23 marzec 2017 - 20:18

Wymiary marginesów masz w %.


  • 0

#7 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 23 marzec 2017 - 20:35

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


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


  • 0

#8 Fizyda

Fizyda

    Stały użytkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 postów

Napisany 23 marzec 2017 - 21:02

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.


  • 0

#9 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 23 marzec 2017 - 21:12

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 


  • 0

#10 Fizyda

Fizyda

    Stały użytkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 postów

Napisany 24 marzec 2017 - 00:36

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.


  • 0

#11 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 24 marzec 2017 - 13:51

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


  • 0

#12 YuuiOut

YuuiOut

    Czasami na forum

  • Użytkownicy
  • 44 postów
  • Firma:NoiseGame

Napisany 25 marzec 2017 - 20:19

reff


  • 0

#13 xorg

xorg

    Webmaster & programista

  • WHT Pro
  • PipPipPipPipPipPipPipPip
  • 2005 postów
  • Skąd:Łódź
  • Firma:Web Systems
  • Imię:Sebastian
  • Nazwisko:Bort

Napisany 30 marzec 2017 - 12:43

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


  • 0





0 użytkowników czyta ten temat

0 użytkowników, 0 gości, 0 anonimowych użytkowników