Problem z własną stroną internetową

pytanie zadane 24 sierpnia 2016 w HTML i CSS przez acab999 Początkujący (340 p.)

Witam, mam następujący problem. Kafelek oznaczony nr.5 jest za bardzo oddalony od sąsiądujących z nim kafleków (1,1,2,3,4). Zależy mi by odstęp między tymi kafelkami a kafelkiem nr.5 wynosił około 10px. Wie ktoś jak to zrobić? Poniżej udostępniam kod źródłowy i screen.

body
{
	background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
}

#container
{
	width: 1500px;
	margin-left: auto;
	maring-right: auto;
}

.rectangle
{
	width: 1460px;
	margin: 20px;
}
.square
{
	width: 50%;
	float: left;
}


#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.tile1
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}
.tile2
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #666666;
	float: left;
}
.tile3
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #93c748;
	float: left;
}
.tile4
{
	margin: 10px;
	width: 480px;
	height: 142px;
	background-color: #ee5232;
}
.tile5
{
	margin: 10px;
	width: 480px;
	height: 304px;
	background-color: #666666;
}

komentarz 24 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

Spróbuj w .tile5 wpisać margin-right; (odległość jaka chcesz)px;

PS. pamietaj zeby wrzucac tez kod do HTML

komentarz 24 sierpnia 2016 przez acab999 Początkujący (340 p.)

Zero efektu

komentarz 24 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

width w #container daj na 1000px

+ usun: width: 1460px; z .rectangle

4 odpowiedzi

odpowiedź 24 sierpnia 2016 przez niezalogowany

Witaj

masz " maring-right: auto;" zamiast " margin-right: auto;"

komentarz 24 sierpnia 2016 przez acab999 Początkujący (340 p.)

Poprawiłem, ale dalej nie ma efektu po margin-right: Xpx; w .tile5

komentarz 24 sierpnia 2016 przez Eimens Maniak (69,240 p.)

Nie ma efektu bo się pogubiłeś w znacznikach, już sam nie wiesz co piszesz i do tego literówki = dramat :D

odpowiedź 24 sierpnia 2016 przez Sarvite Obywatel (1,210 p.)
przywrócone 24 sierpnia 2016 przez Sarvite

zmniejsz width w:

#container
{
    width: 1500px;
    margin-left: auto;
    maring-right: auto;
}
 
.rectangle
{
    width: 1460px;
    margin: 20px;
}

I dodawaj bloczek kodu HTML

komentarz 24 sierpnia 2016 przez acab999 Początkujący (340 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
     <meta charset="utf-8" />
      <title>Wizytówka Norbert Kowalcze</title>
      <meta name="descripiton" content="Zaprojektuję specjalnie dla Ciebie wyjątkową stronę www! Programista webowy PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal"/>
      <meta name="keywords" content="Norbert, Norbert Kowalcze, Norbert Kowalcze wizytówka, Norbert Kowalcze portfilio, Kowalcze portfolio, zamów, stronę, www, portfilio, wizytówka, 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=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet">

      </head>

<body>

    <div id="container">

        <div class="rectangle">
            <div id="logo">Norbert Kowalcze</div>
            <div id="zegar">6:66</div>
            <div style="clear:both;"></div>
        </div>

        <div class="square">
            <div class="tile1">1</div>
            <div class="tile1">1</div>
            <div style="clear:both;"></div>

            <div class="tile2">2</div>
            <div class="tile3">3</div>
            <div style="clear:both;"></div>

            <div class="tile4">4</div>

        </div>
        <div class="square">
            <div class="tile5">5</div>



        </div>
        <div style="clear:both;"></div>

        <div class="rectangle">

        </div>



    </div>

</body>

</html>

komentarz 24 sierpnia 2016 przez acab999 Początkujący (340 p.)

Zmniejszyłem width w #container i pomogło, dzięki wielkie!

odpowiedź 24 sierpnia 2016 przez Pietrak Pasjonat (18,850 p.)

odpowiedź 24 sierpnia 2016 przez Fenix Nałogowiec (26,750 p.)

A ktory to jesr kafelek5? Wrzuc html + dlaczego dla kazdsego kwadratu jest osobna classa, co ma to na celu? Czy wiekszosci cech nie maja wspolnych?

komentarz 24 sierpnia 2016 przez acab999 Początkujący (340 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head> 
	 <meta charset="utf-8" />
	  <title>Wizytówka Norbert Kowalcze</title>
	  <meta name="descripiton" content="Zaprojektuję specjalnie dla Ciebie wyjątkową stronę www! Programista webowy PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal"/>
	  <meta name="keywords" content="Norbert, Norbert Kowalcze, Norbert Kowalcze wizytówka, Norbert Kowalcze portfilio, Kowalcze portfolio, zamów, stronę, www, portfilio, wizytówka, 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=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet">
		
	  </head>

<body>

	<div id="container">
	
		<div class="rectangle">
			<div id="logo">Norbert Kowalcze</div>
			<div id="zegar">6:66</div>
			<div style="clear:both;"></div>
		</div>
		
		<div class="square">
			<div class="tile1">1</div>
			<div class="tile1">1</div>
			<div style="clear:both;"></div>
			
			<div class="tile2">2</div>
			<div class="tile3">3</div>
			<div style="clear:both;"></div>
			
			<div class="tile4">4</div>
			
		</div>
		<div class="square">
			<div class="tile5">5</div>
		
		
		
		</div>
		<div style="clear:both;"></div>
		
		<div class="rectangle"> 
		
		</div>
	
	
	
	</div>



</body>




</html>

komentarz 24 sierpnia 2016 przez acab999 Początkujący (340 p.)

Nie potrafię Ci odpowiedzieć na to pytanie, tak jest w kursie i tyle, za jakiś czas pewnie będę niedowierzał ze stron które napisałem wcześniej.

komentarz 24 sierpnia 2016 przez Sarvite Obywatel (1,210 p.)

Przepisuje kod z tutoriala. Tam również jest tak zrobione, uczy się.

komentarz 24 sierpnia 2016 przez Fenix Nałogowiec (26,750 p.)

To proponuje zmienić tutorial, skoro nie uczy czegoś takiego jak pozycjonowania, a wymaga żeby zrobić jakąś wymyślną siatkę, którą użytkownik nie ma nawet jak się pobawić bo nie wie jak działa (już nie mówiąc o sposobie wykonania). Polecam DevTips'a sobie obejrz film o pozycjonawaniu na początek.