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

Problem z własną stroną internetową

VPS Starter Arubacloud
0 głosów
462 wizyt
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

+1 głos
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
+1 głos
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!
0 głosów
odpowiedź 24 sierpnia 2016 przez Pietrak Pasjonat (18,850 p.)
  • wszystkie #id zmienić na .classy. 
  • .logo i .zegar dać w znacznik header i dać mu overflow: hidden
0 głosów
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.

Podobne pytania

0 głosów
3 odpowiedzi 422 wizyt
pytanie zadane 28 lipca 2016 w Bezpieczeństwo, hacking przez Barttyyy Gaduła (4,680 p.)
+1 głos
1 odpowiedź 328 wizyt
0 głosów
6 odpowiedzi 342 wizyt
pytanie zadane 19 września 2015 w HTML i CSS przez Mariusz Szczerbal Użytkownik (580 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 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!

...