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

Problem z zapisaniem kodu

VPS Starter Arubacloud
0 głosów
377 wizyt
pytanie zadane 10 października 2016 w HTML i CSS przez Vromix Początkujący (410 p.)

Witam mam problem z zapisaniem kodu pod stronę którą staram sie stworzyć. Pogubiłem sie sam w zapisie, im głębiej pisalem tym bardziej nie wychodziło. Gdyby ktoś mogł zucic okiem i wytknac błedy i najlepiej ich wytlumaczyc jak to zapisac lepiej, prosciej szybciej byłbym wdzieczny. Najlepiej jak wrzuce caly plik z kodem + grafikami.

 

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Website Desinger</title>
	<meta name="viewport" content="width=device-width"> 
	<meta name="description" content="Zobacz wszystko, co powienieneś wiedzieć o paintballu." />
	<meta name="keywords" content="paintball, bron , milsim, military" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700|PT+Sans:400,700&subset=latin-ext" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&subset=latin-ext" rel="stylesheet">

</head>
<body>
<div class="header">
	<nav class="nav">
		<ul>
			<li><a href="#">Strona Główna</a></li>
			<li><a href="#">O Mnie</a></li>
			<li><a href="#">Projekty</a></li>
			<li><a href="#">Kontakt</a></li>
		</ul>
	</nav>
		<div class="logo">
			<img src="img/logo.png" height="250" >
		</div>
</div>
<div id="bg">
	<div class="container">
		<div class="main">
		<h1>I Am </h1>
		<h6><span style="font-size: 18px; font-family: 'Kaushan Script', cursive;">Website desinger</span> </h6>
		<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
		</div>
	</div>
	<div class="middle">
		<div class="title1">
			<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
		</div>
		<div class="title2">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</div>
		<div style="clear: both;"></div>
</div>
	


</body>



</html>

i css

*
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body
{
	color: #333;
	font-size: 19px;
	background-image: url("img/bg1.jpg") ;
	min-height: 100%;
	font-family: 'Lato', sans-serif;
	height: 3528px;
	width: 1920px;
}


.logo
{
	text-align: center;
	padding: 10px;
}

.nav
{

	width: 100%;
	height: 60px;
}

.nav ul
{
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	justify-content: space-between;
	list-style: none;
	height: 60px;
	text-align: center;
	line-height: 300%;


}
.nav li
{
	width: 100%;
	font-family: 'PT Sans', sans-serif;
	height: 60px;
	text-transform: uppercase;

}

.nav a
{
	text-decoration: none;
	color: white;
	height: 60px;
	display: block;
	font-size: 15px;
}

.nav a:hover
{
	background-color: #f7604c;
}


#bg
{

	width: 1920px;
	min-height: 3000px;
	margin-left: auto;
	margin-right: auto;
	background: url(img/1.png) center no-repeat;
	display: block;
    margin-top: -70px;
}

.container
{
	width: 1024px;
	height: 100%;
	text-align: center;
	padding: 140px;
	color: white;
}

.main
{
	width: 512px;
	height: 550px;
	text-align: center;
	margin-left: auto;
	padding-left: 80px;
	padding-top: 50px;
}

.main h1
{
   font-size: 80px;
   text-transform: uppercase;
   font-family: 'PT Sans', sans-serif;
   word-spacing: 5px;
}

.main p
{
	font-size: 14px;
	margin-left: 30px;
	margin-top: 5px;
    text-align: center;
}

.middle
{
	width: 1024px;
	height: 100%;
	text-align: center;
	color: white;
	margin-left: auto;
	margin-right: auto;
}

.title1
{
	width: 482px;
	height: 500px;
	background-color: #666666;
	padding-top: 50px;
	margin-left: auto;
	float: left;
	text-align: center;
	font-size: 15px;
	padding-left: 50px;
}

.title2
{
	width: 482px;
	height: 500px;
	background-color: #666666;
	padding-top: 50px;
	margin-left: auto;
	float: left;
	text-align: center;
	font-size: 15px;
}

Jedym slowem rozmieszczenie w sekcji od Container tak aby to mialo rece i nogi nie wychodzi...

+ plik do pobrania z grafikami uzytymi oraz html i css plik. https://uploadfiles.io/0cc6

komentarz 10 października 2016 przez Boshi VIP (100,240 p.)
Co znaczy ręce i nogi? możesz opisać jaśniej czy mamy się domyślać?
komentarz 11 października 2016 przez Vento Pasjonat (17,120 p.)
komentarz 11 października 2016 przez jpacanowski VIP (101,940 p.)
*
{
    margin: 0px;
    padding: 0px;

Eh, nie rób tak. Nie zeruj marginesów wszystkich elementów. Nie resetuj, tylko normalizuj. http://blog.end3r.com/131/normalize-css-nie-resetuj-normalizuj/

komentarz 11 października 2016 przez Vromix Początkujący (410 p.)
Rece i nogi w znaczeniu rozmieszczenia tak aby zawartosc gorna miala swoje miejsce jak i dolna treść a u mnie jak widac jest rozjechane nie równe marginesy prawe i lewe sa różne nie jest wysrodkowany tekst w zawartości bg.

2 odpowiedzi

+1 głos
odpowiedź 11 października 2016 przez pablop76 VIP (123,060 p.)
edycja 11 października 2016 przez pablop76

Widzę ,że nie dajesz za wygraną :).

Brakuje zamknięcia jednego diva.

Mam dla Ciebie taka propozycję. Dodaj do swojego css obramowanie wszystkich elementów i zobacz za pomocą narzędzia programistycznego w swojej przeglądarce co jest od czego.

*
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border: 1px solid red;
}

Dałeś tło na tło. dwa ogromne bardzo podobne obrazki, moim zdaniem bez powodu. To samo można osiągnąć za pomocą box-shadow dla #bg o szerokości 80%; ( wrażenie trójwymiaru pojemnika) oraz stylizacji każdego pojemnika z osobna. title1 oraz title2 to takie same pojemniki, po co więc dublować style. Ustawienie tak dużej szerokości wygląda dobrze na monitorach FullHD ale nie koniecznie na innych. ( strona jest szersza niż ekran i trzeba ja przesuwać w poziomie )

Moim zdaniem weź kartkę i ołówek i rozplanuj jeszcze raz układ strony( grafika to tylko widoczne biurko z klamotami reszta to CSS ewentualnie jeden obrazek z cieniem, lub użycie gradientu)

komentarz 11 października 2016 przez Vromix Początkujący (410 p.)

Tak nie daje mecze mecze az skoncze.

A co do bg to cień shadow wiem jak dodać 

-webkit-box-shadow: 0px 0px 27px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 27px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 27px 3px rgba(0,0,0,0.75);

Nie wiem jak natomiast zrobic te wyciecia ktore sie tam znajdują oraz gradient dlatego tez dałem zawartosc bg jako element graficzny i na nim chcialem reszte rozmieścić. Co do całej szerokości 1920 faktycznie na full hd dobrze wyglada a nie da sie ustawic zeby skalowało automatycznie do monitora kazdego z uzytkownika ? zeby nie bylo tego dolnego paska przesuwanego prawo lewo ??

co do planu strony jak wygladac w wiekszosci rozplanowalem gorzej wlasnie z zapisem zeby tak samo wyglądało.
A wyglądac mialo tak. Ustawilem border 1 px solid red i chwilke minie zanim zalapie co jest do czego ;

komentarz 12 października 2016 przez pablop76 VIP (123,060 p.)

To jest moja koncepcja tej strony. Nie chodzi, że masz zrobić tak samo ale o ogólny zamysł rozmieszczenia. Numerki to warstwy layautu. Co do skalowania strony na różne urządzenia to musisz zastosować płynny layaut (wartości procentowe) + media queries (zapytania medialne) Wycięcia o których piszesz:  zrobiłbym kwadraty o odpowiednich rozmiarach + border-radius. (50% daje koło).

Możliwe błędy w rysunku. Zawsze wszystko wychodzi w praniu :)

 

komentarz 16 października 2016 przez Vromix Początkujący (410 p.)

Nie mialem ostatio czasu na nadrobienie :( 
Ale dzis juz mam wiec. Przedstawie co zrobilem

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Projekt Strony</title>
	<meta name="viewport" content="width=device-width"> 
	<meta name="description" content="Programista, grafik" />
	<meta name="keywords" content="programista, grafik, html, css" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700|PT+Sans:400,700&subset=latin-ext" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&subset=latin-ext" rel="stylesheet">
	
	
</head>

<body>

<div id="banner_bg">
	<div id="logo"> <img src="img/logo.png" alt="logo">
	</div>
	<nav>
		<ul>
			<li><a href="#">Strona Główna</a></li>
			<li><a href="#">O Mnie</a></li>
			<li><a href="#">Projekty</a></li>
			<li><a href="#">Kontakt</a></li>
		</ul>
	</nav>
	
	<div id="content_top">
		<div id="zawartosc">
			<div id="tekst_1">
				<p>I Am <br />Desinger</p>
			</div>
			<div id="tekst_2">
				<p>I make wonderful things</p>
			</div>
			<div id="tekst_3">
				<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.</p>
			</div>
		</div>
	</div>	
</div>
<section>
	<div id="tlo_srodek">
		<div id="zawartosc_2">
	  		<div id="Title_1">
	  		<h1>Tekst Przykładowy</h1>
	  		</div>
	  		<div id="article">
	  			<h1>Tekst1</h1>
	  			<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.</p>
	  			<div id="button_1"><a href="#">Zobacz Więcej</a></div>
	  			<div style="clear:both;"></div>
	  		</div>
	  		<div id="title2">
	  			<h1>Tekst1</h1>
	  			<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.</p>
	  			<div id="button_1"><a href="#">Zobacz Więcej</a></div>
	  			<div style="clear:both;"></div>
	  		</div>
	  		<div style="clear:both;"></div>

		</div>
		<div id="dolna_grafika">
			<div id="Przykładowe_prace">Prace Przykładowe
			</div>
			<div id="zdjecia">
				<a href="#"><img src="img/obraz.jpg" alt="zdjecie"></a>
				<a href="#"><img src="img/obraz.jpg" alt="zdjecie"></a>
				<a href="#"><img src="img/obraz.jpg" alt="zdjecie"></a>
				<a href="#"><img src="img/obraz.jpg" alt="zdjecie"></a>
			</div>
			<div style="clear:both;"></div>
		</div>

	</div>
	

	
</section>
<footer>
		<p>Strona Przykładowa &copy; Jan Nowak 2016</p>
</footer>







</body>



</html>

i css

*
{
	margin: 0;
}
body
{
	margin: 0;
	position: relative;
	font-family: 'Lato', sans-serif;
	color: white;
}

#banner_bg
{
	width: 100%;
	height: 1093px;
	background: url("img/tlo_gora.jpg") center no-repeat;
}

#logo
{
	text-align: center;
	padding: 30px;
}

#logo img
{
	height: 200px;
}

nav
{
	width: 100%;
	background: rgba(25, 25, 25, .4);
}

nav ul
{
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	justify-content: space-between;
	list-style: none;
	height: 60px;
	text-align: center;
}

nav li
{
	width: 1024px;
	font-family: 'PT Sans', sans-serif;
	text-transform: uppercase;
}

nav li a
{
	text-decoration: none;
	color: white;
	height: 20px;
	display: block;
	font-size: 15px;
	padding: 20px;
}

nav li a:hover
{
	background-color: #f7604c;
}

#content_top
{
	width: 1024px;
	height: 750px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	background: -moz-linear-gradient(bottom, rgba(43,42,48,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, rgba(43,42,48,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, rgba(43,42,48,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#2b2a30',GradientType=0 ); /* IE6-9 */
}

#zawartosc
{
	width: 1024px;
}

/*Teksty*/
#tekst_1
{
	width: 492px;
	font-size: 48px;
	text-align: center;
	padding: 10px;
	margin-top: 20px;
	text-transform: uppercase;
	font-family: 'PT Sans', sans-serif;
	font-weight: 800;
}

#tekst_2
{
	width: 512px;
	font-size: 16px;
	text-align: center;
	font-family: 'Kaushan Script', cursive;
}

#tekst_3
{
	width: 492px;
	font-size: 18px;
	text-align: center;
	padding: 10px;
}

#tekst_3 p
{
	width: 350px;
	margin-right: auto;
	margin-left: auto;
}

/* Srodkowe tło */

#tlo_srodek
{
	width: 100%;
    height: 1800px;
	background: url("img/Portfoliorrro-www1_02.jpg") center no-repeat;
}

#zawartosc_2
{
	background-color: #2b2a30;
	width: 1024px;
	height: 750px;
	margin-right: auto;
	margin-left: auto;
	box-shadow: 12px 0 15px -4px rgba(0, 0, 0, 0.8), -12px 0 8px -4px rgba(0, 0, 0, 0.8);
}

#dolna_grafika
{
	height: 677px;
	width: 1024px;
	background: url("img/Portfolioo222-www1_03.jpg") center no-repeat;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: 1px solid red;
	-webkit-box-shadow: 0px 13px 28px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 13px 28px 0px rgba(0,0,0,0.75);
box-shadow: 0px 13px 28px 0px rgba(0,0,0,0.75);
}

/* Tekst przykladowy  srodek + article i zdjecia*/

#Title_1
{
	text-align: center;
	font-size: 30px;
	padding: 20px;
}

#article
{
	width: 480px;
	min-height: 250px;
	margin-top: 50px;
	text-align: center;
	position: relative;
	float: left;
	padding: 15px;
	border-right: 1px solid #34343b;
}

#article p
{
	line-height: 22px;
	width: 360px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}


#article #button_1 a
{
	background-color: #f7604c;
	padding: 15px;
	float: right;
	margin-right: 50px;
	margin-top: 10px;
	color: white;
	text-decoration: none;
}

#article #button_1 a:hover
{
	background-color: #e6503b;
}

/* Artykuł 2 !! -------------------------------*/

#title2
{
	width: 480px;
	min-height: 250px;
	margin-top: 50px;
	text-align: center;
	float: left;
	position: relative;
	padding: 15px;
}

#title2 p
{
	line-height: 22px;
	width: 360px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}


#title2 #button_1 a
{
	background-color: #f7604c;
	padding: 15px;
	float: right;
	margin-right: 50px;
	margin-top: 10px;
	color: white;
	text-decoration: none;
}

#title2 #button_1 a:hover
{
	background-color: #e6503b;
}

/*Prace przykładowe*/

#Przykładowe_prace
{
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: 20px;
	margin-top: 90px;
	color: #5e5e5e;
	font-family: 'PT Sans', sans-serif;
	text-transform: uppercase;
}

#zdjecia
{
	width: 700px;
	min-height: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

#zdjecia a
{
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 153px;
	width: 269px;
	display: block;
	position: relative;
	float: left;
	margin-left: 33px;
}


/*Foter*/


footer
{
	background-color: black;
	width: 100%
}

footer p
{
	width: 1024px;
	font-family: 'PT Sans', sans-serif;
	margin-right: auto;
	margin-left: auto;
	padding: 20px;
	text-align: center;
}

 Co do Cieni nie mam pojecia jak to dobrze zapisac...

Dodatkowo mam problem z <div id="dolna_grafika"> tam gdzie przykladowe prace jak usune w css border 1px tlo mi sie rozejdzie i bedzie nizej.. jak ten border jest dodany wtedy ładnie się łączy... Sam sposob zapisania tego nie wiem czy jest przejzysty i czytelny .. Mam nadzieje ze dalo sei to łatwiej zapisac ( inaczej ) co do warstw ktore wypisales nie bardzo wiedzialem jak sie do tego zabrac dlatego zrobilem to tak jak jest przedstawione w kodzie wyzej.

komentarz 17 października 2016 przez pablop76 VIP (123,060 p.)
edycja 17 października 2016 przez pablop76

Przydały by się obrazki do pobrania bo bez nich nie ma obrazy całości. Menu ucieka w prawo ponieważ nie ma wyzerowanego paddingu.

ul li{
...
padding: 0;
}

Co do problemu z border: 1px solid red; to margines górny bierze się z

#Przykładowe_prace {
 ...
    margin-top: 90px;
 ....   
}

 

komentarz 17 października 2016 przez Vromix Początkujący (410 p.)
edycja 17 października 2016 przez Vromix
Proszę cała paczka https://uploadfiles.io/4ed5 + img w srodku beda rowniez nie uzyte.. tzn uzyte wczesniej i podmienione przez nowe. Co do paddingu ul li jakos mi to nic nie zmienia chyba ze w zle miejsce go wpisuje.

Przykładowe Prace po skasowaniu margin top 90 wszystko jest ok ale teraz jak che obnizyc sam tekst prace przykladowe to od nowa mi odjedzie calosc w dol.... a jak zrobic zeby tekst bez tla polecial na dol..cos ewidentnie namonciłem
komentarz 18 października 2016 przez pablop76 VIP (123,060 p.)
nav ul {
  ...
    padding: 0;
}

a zamiast margin-top: 90px; daj padding-top: 90px;

margin odsuwa elementy od siebie a padding odsuwa zawartość elementu od jego krawedzi

komentarz 18 października 2016 przez Vromix Początkujący (410 p.)
Ok Dobra.
 Pytanie jeszcze jak zrobic cienie boxow.. Tak aby Lewa strona miala sam cien jak i prawa badz gorna czy dolna..
komentarz 19 października 2016 przez pablop76 VIP (123,060 p.)

Pobaw się narzędziem.Jeżeli nie zrozumiesz jego działania to śmiało daj znać. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator

komentarz 19 października 2016 przez Vromix Początkujący (410 p.)
http://www.cssmatic.com/box-shadow Korzystałem wczesniej z takiego.. Ale tutaj jak i w tym co mi podales jak ustawie ze chce sama gorę przykladowo i dodam blur to mi na boki tez rozejdzei sie... A mi chodzi o taki cien zeby był tylko i wyłącznie na 1 boku i po zastosowaniu blura zeby Bokami nie wychodzil na poboczne elementy czyli jak dam na gore zeby nie dalo na prawo i na lewo po cześci..
komentarz 19 października 2016 przez pablop76 VIP (123,060 p.)
W tym narzędziu można ustawić element:before lub element:after i dla nich ustawić box-shadow. Pobaw się tym. Chodzi o to żeby ustawić element:befor mniejszy od głównego i dla niego ustawić odpowiedni shadow. Spróbuj
0 głosów
odpowiedź 11 października 2016 przez Kamil Naja Nałogowiec (27,330 p.)
Widzę takie błędy ->

* Nie można przeskakiwać od nagłówka h1 do od razu h6 - powinny być rozmieszczone po kolei.

* W kodzie HTML na pewno nie powinien znaleźć się "height 250px"

* Obrazek nie ma alta

* Div bg nie jest domknięty
komentarz 11 października 2016 przez Vromix Początkujący (410 p.)
w css mialem zapisac wielkosc logo ? szerokość i jego wysokość?? co do alta faktycznie powinien być.
komentarz 11 października 2016 przez Kamil Naja Nałogowiec (27,330 p.)

Podobne pytania

0 głosów
3 odpowiedzi 398 wizyt
pytanie zadane 25 kwietnia 2021 w C i C++ przez Latarnik Użytkownik (650 p.)
0 głosów
1 odpowiedź 323 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...