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

Działanie marginesów

VPS Starter Arubacloud
0 głosów
101 wizyt
pytanie zadane 23 lutego 2017 w HTML i CSS przez Mariusz Andrzejewski Początkujący (360 p.)
edycja 23 lutego 2017 przez Mariusz Andrzejewski

Mam nadzieje,że nie dostanę bana za jedno pytanie dziennie laugh.Panie MIrosławie raz jeszcze dziękuje za stworzenie tego form i możliwości jakie ono daje.

Myślałem,że już zacząłem coś pojmować więc ...wpisałem, ctrl+s, F5...i smutek...nie działa.

Chcę przesunąć ikonke google pulusa i youtube( wydaje mi się ,że nie jest na środku)...o kilka pikseli w lewo.W css fontello wpisuje margin-right: 5px... i nic nie działa.Margin-top działa a margin-right nie...niby oczywista oczywistość a ja znów na kolanach.Boże daj siły...może mi  ktoś to wytłumaczyć?

 

HTML


<!DOCTTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Mariusz Andrzejewski - Portfolio </title>
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudni programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal." />
	<meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal"/>
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
	
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato|Open+Sans" rel="stylesheet"/>
	
	
</head>
<body>
	<div id="container">
	
		<div class="rectangle">
			<div id="logo">Mariusz Andrzejewski</div>
			<div id="zegar">12:00:00</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 class="yt">
				<i class="icon-youtube-squared"></i>
			</div>
			<div class="fb">
				<i class="icon-facebook"></i>
				</div>
			<div class="gplus"><i class="icon-gplus"></i>
			</div>
			<div class="tw"><i class="icon-twitter"></i></div>
			<div style="clear: both;"></div>
		
			
		</div>		
			<div style= "clear: both;"></div>
		
			
			
		
		
		<div class="rectangle">2017 &copy; Mariusz Andrzejewski.Programista webowy zaprasza do wsppołpracy</div>
		
		
	</div>

</body>
</html>

CSS Fontello


@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?3256876');
  src: url('../font/fontello.eot?3256876#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?3256876') format('woff2'),
       url('../font/fontello.woff?3256876') format('woff'),
       url('../font/fontello.ttf?3256876') format('truetype'),
       url('../font/fontello.svg?3256876#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?3256876#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-mail:before { content: '\e800';} /* '' */
.icon-twitter:before { content: '\f099'; font-size: 76px; margin-top: 35px;} /* '' */
.icon-facebook:before { content: '\f09a';font-size: 76px; margin-top: 35px; } /* '' */
.icon-gplus:before { content: '\f0d5';font-size: 70px; margin-top: 35px;} /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-laptop:before { content: '\f109'; } /* '' */
.icon-youtube-squared:before { content: '\f166'; font-size: 76px; margin-top: 35px;} /* '' */
.icon-graduation-cap:before { content: '\f19d'; } /* '' */

1 odpowiedź

0 głosów
odpowiedź 23 lutego 2017 przez zgrybus Pasjonat (24,860 p.)
te divy ( rodzice fontello ) jaki mają kod?
komentarz 23 lutego 2017 przez Mariusz Andrzejewski Początkujący (360 p.)
<!DOCTYPE html>
<html>
  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <meta charset="UTF-8"><style>/*
 * Bootstrap v2.2.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
}
a {
  color: #08c;
  text-decoration: none;
}
a:hover {
  color: #005580;
  text-decoration: underline;
}
.row {
  margin-left: -20px;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
  line-height: 0;
}
.row:after {
  clear: both;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
.span9 {
  width: 700px;
}
.span8 {
  width: 620px;
}
.span7 {
  width: 540px;
}
.span6 {
  width: 460px;
}
.span5 {
  width: 380px;
}
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  content: "";
  line-height: 0;
}
.container:after {
  clear: both;
}
p {
  margin: 0 0 10px;
}
.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}
small {
  font-size: 85%;
}
h1 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small {
  font-weight: normal;
  line-height: 1;
  color: #999;
}
h1 {
  line-height: 40px;
}
h1 {
  font-size: 38.5px;
}
h1 small {
  font-size: 24.5px;
}
body {
  margin-top: 90px;
}
.header {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -480px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding-top: 10px;
  z-index: 10;
}
.footer {
  color: #ddd;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}
.footer a {
  color: #ccc;
  text-decoration: underline;
}
.the-icons {
  font-size: 14px;
  line-height: 24px;
}
.switch {
  position: absolute;
  right: 0;
  bottom: 10px;
  color: #666;
}
.switch input {
  margin-right: 0.3em;
}
.codesOn .i-name {
  display: none;
}
.codesOn .i-code {
  display: inline;
}
.i-code {
  display: none;
}
@font-face {
      font-family: 'fontello';
      src: url('./font/fontello.eot?12255340');
      src: url('./font/fontello.eot?12255340#iefix') format('embedded-opentype'),
           url('./font/fontello.woff?12255340') format('woff'),
           url('./font/fontello.ttf?12255340') format('truetype'),
           url('./font/fontello.svg?12255340#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
     
    .demo-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
     </style>
    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
    <script>
      function toggleCodes(on) {
        var obj = document.getElementById('icons');
      
        if (on) {
          obj.className += ' codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }
      
    </script>
  </head>
  <body>
    <div class="container header">
      <h1>
        fontello
         <small>font demo</small>
      </h1>
      <label class="switch">
        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
      </label>
    </div>
    <div id="icons" class="container">
      <div class="row">
        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-mail">&#xe800;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe800</span></div>
        <div title="Code: 0xf099" class="the-icons span3"><i class="demo-icon icon-twitter">&#xf099;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xf099</span></div>
        <div title="Code: 0xf09a" class="the-icons span3"><i class="demo-icon icon-facebook">&#xf09a;</i> <span class="i-name">icon-facebook</span><span class="i-code">0xf09a</span></div>
        <div title="Code: 0xf0d5" class="the-icons span3"><i class="demo-icon icon-gplus">&#xf0d5;</i> <span class="i-name">icon-gplus</span><span class="i-code">0xf0d5</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf0e0" class="the-icons span3"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
        <div title="Code: 0xf109" class="the-icons span3"><i class="demo-icon icon-laptop">&#xf109;</i> <span class="i-name">icon-laptop</span><span class="i-code">0xf109</span></div>
        <div title="Code: 0xf166" class="the-icons span3"><i class="demo-icon icon-youtube-squared">&#xf166;</i> <span class="i-name">icon-youtube-squared</span><span class="i-code">0xf166</span></div>
        <div title="Code: 0xf19d" class="the-icons span3"><i class="demo-icon icon-graduation-cap">&#xf19d;</i> <span class="i-name">icon-graduation-cap</span><span class="i-code">0xf19d</span></div>
      </div>
    </div>
    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
  </body>
</html>

 

Podobne pytania

0 głosów
2 odpowiedzi 109 wizyt
pytanie zadane 24 lutego 2017 w HTML i CSS przez Mariusz Andrzejewski Początkujący (360 p.)
0 głosów
1 odpowiedź 105 wizyt
pytanie zadane 11 września 2022 w HTML i CSS przez pj-1024 Użytkownik (670 p.)
+1 głos
1 odpowiedź 113 wizyt
pytanie zadane 2 kwietnia 2022 w HTML i CSS przez Piotrek2713 Mądrala (5,320 p.)

92,453 zapytań

141,262 odpowiedzi

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

...