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

Jak to przerobić na stronę responsywną?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,301 wizyt
pytanie zadane 27 sierpnia 2018 w HTML i CSS przez DxKKxD Użytkownik (560 p.)

Cześć zrobiłem sobie stronkę ale nie wiem jak przerobić ją na responsywną chodzę od poradnika do poradnika i nic nie działa. Robię wszystko tak jak oni tam piszą nawet poradnik Pana Mirosława nie pomaga.

 

o to kod (i wiem, że wszystko wydaje się takie nie jasne ale dopiero zaczynam :P)

 

TU CSS

body
{
	bbackground-color: #fff;
	background-image: url("white_wall_@2X.png");
	color: #000;
	font-family: 'Open Sans', sans-serif;
    font-size: 17px;
	margin: 0;
}



#bg
{
	opacity: 0.5;
	background-image: url("white_wall_@2X.png");
}

#top
{
	height: 135px;
	width: auto;
	background-color: #f4f7f6;
}

#top1
{
	background-color: #f4f7f6;
	height: 50px;
	color: #747474;
	width: 100%;
	text-align: center;
	position: fixed;
}

#top1 a
{
	text-decoration: none;
	color: #747474;
}

#top1text1
{
	font-size: 12px;
	color: #747474; 
	display: inline-block;
	padding-top: 17px;
	padding-left: 150px;
	display: inline-block;
	width: 40%;
}

#top1text2
{
	font-size: 12px;
	color: #747474;
	display: inline-block;
	margin: 0;
	padding-right: 150px;
	width: 40%;
	display: inline-block;
}

#top2
{
	height: 90px;
	width: 100%;
	box-shadow:0 9px 6px -6px #666;
	background-color: #f4f7f6;
	border-top: 1px solid #cdcbcb;
	top: 1.3229166667cm;
	position: fixed;	
	text-align: center;
}

p.icons
{
	text-align: center-right;
	font-size: 12px;
}

#toplogo
{
	display: inline-block;
	height: 90px;
	color: #006622;
	font-family: 'Merriweather', serif;
	padding-left: 150px;

	
}

h2
{
	font-size: 55px;
    line-height: 90px;
	margin: 0;
}

#topnav
{
	text-align: right;
	height: 90px;
	display: inline-block;
	padding-left: 170px;
}

.menu
{
	list-style-type: none;
	margin: 0;
	font-size: 18px;
	line-height: 200%;
}

.menu > li
{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
}

.menu a
{
	color: #000;
	text-decoration: none;
}

.menu a:hover
{
	color: #006622;
	border-bottom:  3px solid #006622;
}

.link
{
	text-decoration: none;
	color: black;
}

#container
{
	text-align: center;
}

#clear
{
	height: 135px;
	background-color: #f4f7f6;
}

h3
{
	text-align: center;
	font-size: 45px;
	color:  #804200;
}

.text2
{
	text-align: center;
	font-size: 25px;
}

.text1
{
	font-size: 15px;
	text-align: justify;
	margin-left: 300px;
}

#formula
{
	
	border-top: 2px solid #4d2800;
	width: 1500px;
	margin-left: 200px;
}

#basic
{
	width: 905px;
	background-color: #efefef;
	color: #666;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 20px;
	padding: 10px;
	box-sizing: border-box;
	outline: none;
	margin-top: 10px;
}

#basic:focus
{
	-webkit-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	-moz-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	border: 2px solid #a5cda5;
	background-color: #e9f3e9;
	color: #428c42;
}

input[type=text],
input[type=tel],
input[type=email]
{
	width: 450px;
	background-color: #efefef;
	color: #666;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 20px;
	padding: 10px;
	box-sizing: border-box;
	outline: none;
	margin-top: 10px;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus
{
	-webkit-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	-moz-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
	border: 2px solid #a5cda5;
	background-color: #e9f3e9;
	color: #428c42;
}

input[type=submit]
{
	width: 300px;
	background-color: #36b03c;
	font-size:20px;
	color: white;
	padding: 15px 10px;
	margin-top: 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	letter-spacing: 2px;
	outline: none;
}

input[type=submit]:focus
{
	-webkit-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	-moz-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
}

input[type=submit]:hover
{
	background-color: rgba(0, 102, 34, 1);
}

footer
{
	background-color: #f4f7f6;
	high: 250px;
	font-size: 18px;
	text-align: center;
	box-shadow:0 -9px 6px -6px #666;
}

.socials
{
	margin: 0;
}

.mail
{
	display: inline-block;
}

.phone
{
	display: inline-block;
	padding-left: 40px;
}

.home
{
	display: inline-block;
	padding-left: 40px;
}

.akapit
{

}

p.rodo
{
	text-align: center;
	font-size: 19px;
	margin: 250px;
	margin-top: 0;
	margin-bottom: 93px;
}

TU HTML

<body>
	
			<div id="top">
				<div id="top1">
					<div id="top1text1">
							Masz pytanie? Napisz do nas: | <a href="mailto:kontakt@email.com">kontakt@email.com</a>
					</div>
					
				<div id="top1text2">
					<p class="icons"><a href="login">Logowanie</a></p>
				</div>
					
				</div>	
				
				<div id="top2">
					
					<div id="toplogo"><h2>Invest KZP</h2></div>
					
					<div id="topnav">
					
						<ul class="menu">
							<li><a href="Strona-Glowna">Start</a></li>
							<li><a href="Lista-Ofert">Lista ofert</a></li>
							<li><a href="Dla-Wlasciciela">Dla Właściciela</a></li>
							<li><a href="Najemca">Najemca</a></li>
							<li><a href="Rozporządzenie-o-Ochronie-Danych-Osobowych">RODO</a></li>
							<li><a href="Kontakt">Kontakt</a></li>
						</ul>
					</div>
					
				</div>
			</div>
	
		<div id="container">
				<div id="text">
					<h3 style="line-height: 0.1cm;">text1</h3>
					<h3 style="line-height: 0.1cm;">text2</h3>
					<h3 style="line-height: 0.1cm;">text3</h3>
					<p class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
									<br>
									<br>
									Pellentesque tempor, orci sit amet lacinia laoreet, lectus metus tristique velit, sit amet aliquet dui mauris at tortor
									<br>
									<br>
									Morbi non ipsum sit amet metus euismod fermentum 
									<br>
									<br>
									Nulla rutrum, lectus vitae tempor aliquam, nisi neque vulputate ligula, . 
									<br>
									<br>
									sed iaculis ipsum tortor in nisi..</p>
				</div>
				
				<div id="formula">
					
					<h3>Wypełnij poniższy formularz, a skontaktujemy się z Tobą 
					<br>
					w ciągu najbliższego dnia roboczego:</h3>
					
					<form action="mailto:kontakt@investkzp.pl" method="post" enctype="text/plain">
						<div id="formula1"><input type="text" placeholder="text" name="cos" />
						<input type="text" placeholder="text" name="cos" /></div>
						<div id="formula2"><input type="tel" placeholder="text" name="cos" />
						<input type="email" placeholder="E-mail" name="E-mail" /></div>
						<textarea id="basic" name="pytanie" cols="40" rows="5" placeholder="Wiadomość"></textarea><br />
						<input type="submit" value="Wyślij" />
					</form>

					<p class="text1">
						Przesyłając dobrowolnie moje dane oświadczam, że zostałem/am poinformowany/a, iż:
						<br>
						a) administratorem danych osobowych w zakresie objętym powyższym formularzem jest firma NAZWA  ul.Wkrótce! ,
						<br>
						b) moje dane osobowe będą przetwarzane w celach związanych z przedstawieniem oferty,
						<br>
						c) mogę żądać od administratora danych osobowych informacji o treści dotyczących mnie danych oraz żądać ich poprawiania,
						<br>
						d) na warunkach określonych w przepisach regulujących zasady przetwarzania danych osobowych mogę żądać zaprzestania przetwarzania
						<br>
						moich danych osobowych oraz zgłosić sprzeciw wobec ich przetwarzania.
						<br>
						
					</p>
			</div>
			
			<footer>
			
			<div class="socials">
				
				<div class="mail">
						<a href="mailto:kontakt@investkzp.pl" class="link"><i class="icon-mail">kontakt@mail.com</i></a>
				</div>
				<div class="phone">
						<i class="icon-phone">000 000 000</i>
				</div>
				<div class="homme">
						<i class="icon-homme"></i>
				</div>
				
			</div>
			
			<div class="info">
				Wszelkie Prawa Zastrzeżone &copy; 2018
			</div>
			
		</footer>
			
		</div>	
			
		
</body>

 

5 odpowiedzi

+1 głos
odpowiedź 27 sierpnia 2018 przez Danrox Bywalec (2,370 p.)
wybrane 27 sierpnia 2018 przez DxKKxD
 
Najlepsza

Tak jak już napisali Ci inni poczytaj sobie o regułach media w CSS oraz o zasadach mobile first i desktop first . Przydatną rzeczą podczas nauki responsywności może być flexbox, a także grid. Filmik o media query (https://www.youtube.com/watch?v=H7LUUsbpbrg).

Tak jeszcze co do Twojej strony

  1.  Do stylowania strony używaj class, a nie id.
  2.  Nie używaj stylów inline (Oddzielaj css od html).
  3.  
     <p class="text1">
                            Przesyłając dobrowolnie moje dane oświadczam, że zostałem/am poinformowany/a, iż:
                            <br>
                            a) administratorem danych osobowych w zakresie objętym powyższym formularzem jest firma NAZWA  ul.Wkrótce! ,
                            <br>
                            b) moje dane osobowe będą przetwarzane w celach związanych z przedstawieniem oferty,
                            <br>
                            c) mogę żądać od administratora danych osobowych informacji o treści dotyczących mnie danych oraz żądać ich poprawiania,
                            <br>
                            d) na warunkach określonych w przepisach regulujących zasady przetwarzania danych osobowych mogę żądać zaprzestania przetwarzania
                            <br>
                            moich danych osobowych oraz zgłosić sprzeciw wobec ich przetwarzania.
                            <br>
     </p>

    A może tak lista ol ? smiley

  4.  Dlaczego używasz tylko znacznika <footer> ? Spróbuj przebudować swoją stronę tak, aby wykorzystywała więcej znaczników HTML5.

Naucz się nowych rzeczy, a następnie spróbuj jeszcze raz napisać stronę od zera. Jeżeli nie lubisz suchej wiedzy możesz uczyć się poprzez granie w proste gry np. https://flexboxfroggy.com/#pl oraz http://cssgridgarden.com/#pl

Powodzenia yes

 

komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
ooo dzięki wielkie ^^
+2 głosów
odpowiedź 27 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)
Poczytaj trochę o media media queries, pobaw się trochę i powinno pomóc
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
no wlasnie tez to robilem i jakos mi nie idzie :(
komentarz 27 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)
edycja 5 lutego 2020 przez Layoutowiec
To trzeba przerobić samemu i nic nie pomoże ;)

Pobierz sobie jakieś gotowce i ćwicz.

Ja też się z tym męczyłem kilka tygodni ;)
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
boze jakie to trudne
komentarz 27 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)

No cóż nikt nie mówił że będzie łatwo ;) 

Możesz mi wierzyć sam dalej to wszystko przerabiam 

Tutaj masz fajny poradnik (sam się z niego uczyłem laugh):

https://webroad.pl/html5-css3/572-responsywny-web-design-media-queries

komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
dzięki wielkie :D
komentarz 27 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)
Spoko. Chciałem teraz trochę się odkuć bo sam zadałem tutaj bardzo dużo pytań i pasowało by pomóc innym tą zdobytą wiedzą ;)
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
a te @media mam wpisac w css? bo czytam i czytam i nie rozumiem
komentarz 27 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)
Tak. Pobierz sobie przykład z tej strony
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
dobra dzieki
+2 głosów
odpowiedź 27 sierpnia 2018 przez lateM Pasjonat (17,660 p.)

Flexbox? (kurs od podstaw na - kodu_je), albo się z gridem zaprzyjaźnij. 

Czemu .akapit jest pusty? Nawiasy od nowej linii też niepotrzebne moim zdaniem. (Ale to już kwestia indywidualna) 

.akapit
{
 
}

Ps. Nie styluj po id. Stylowania po tagach też się warto oduczyć, ogarnięcie kodu sprawia potem mniej problemów. 

komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
dzięki ale też próbowałem i nic :(. a to miałem usunąć ale zapomniałem
komentarz 27 sierpnia 2018 przez lateM Pasjonat (17,660 p.)
Jak nic? To czemu w kodzie nie ma żadnego @media, ani żadnej klasy z flexa? Responsywności też się nie nauczysz w pół godziny, rzuć okiem na ten kurs, nie śpiesz się, to się nauczysz.
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
bo usunąłem ponieważ jeszcze gorzej to wyglądało i męczę się z tym kilka dni :(
komentarz 27 sierpnia 2018 przez lateM Pasjonat (17,660 p.)
Tak działa uczenie się nowej rzeczy :D kilka dni nie wychodzi, a potem zacznie. Temat jest nieco trudniejszy, ale jeśli myślisz o webdevie, to i tak Cię to nie ominie. Nie marnuj czasu na szukanie szybkiego rozwiązania, usiądź i przerób temat od podstaw. Przy następnym projekcie pójdzie Ci już szybciej i łatwiej.
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
dzieki
+2 głosów
odpowiedź 27 sierpnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Dwie sprawy, po pierwsze staraj się stylować nie w PX ale np. w procentach czy vh/vw.

Po drugie flex owszem fajny, ale i tak nie ominie Cię @media. Poczytaj więc po prostu o tym. Na przykład:

@media all and (min-width: 1000px) {
  .box {
    width: 50%;
    margin: 0 auto;
  }
}

@media all and (max-width: 999px) {
  .box {
    width: 100%;
    margin: 0 auto;
  }
}

czyli dla rozdzielczości 1000px i większej elementy o klasie "box" mają szerokość 50%, a dla mniejszych ekranów są rozciągnięte na 100%. I w ten sposób sobie porób wszystkie Twoje elementy, możesz robić wiele regul @media z różnymi parametrami.

Flex owszem, ale jak obrobisz tę swoją stronkę wg powyższego przykładu to ładnie nauczysz się o co w tym chodzi, a gdy wejdziesz we flexa to zobaczysz, że przy wielu kwestiach nawet nie potrzeba @media.

I generalnie myśl w kategoriach rozdzielczości ekranu a nie tego czy to komputer, smartfon itp. Owszem, w niektórych kwestiach ważny jest rodzaj urządzenia ale na razie nie zaprzątaj sobie tym głowy, pomalutku do celu :)

A jak zrobisz to wrzuć kod na codepen i będziemy szlifować :)

–2 głosów
odpowiedź 27 sierpnia 2018 przez wanderer Gaduła (3,710 p.)
Ty ją od początku powinieneś robić pod kątem responsywności, np. z uzyciem jakiegos frameworka css takiego jak bootstrap :)
komentarz 27 sierpnia 2018 przez DxKKxD Użytkownik (560 p.)
wiem ale nie dawno o tym pomyslalem dopiero

Podobne pytania

0 głosów
1 odpowiedź 273 wizyt
0 głosów
6 odpowiedzi 1,079 wizyt
0 głosów
1 odpowiedź 1,469 wizyt

93,103 zapytań

142,077 odpowiedzi

321,562 komentarzy

62,445 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 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...