• 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ą?

Object Storage Arubacloud
0 głosów
1,099 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,510 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ź 255 wizyt
0 głosów
6 odpowiedzi 923 wizyt
0 głosów
1 odpowiedź 1,293 wizyt

92,660 zapytań

141,553 odpowiedzi

319,992 komentarzy

62,028 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...