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

Czy Jest ktoś w stanie mi pomóc w sprawie lekcij kurs html odc.3

VPS Starter Arubacloud
0 głosów
260 wizyt
pytanie zadane 6 lipca 2017 w HTML i CSS przez Albin Początkujący (290 p.)
zmienione kategorie 6 lipca 2017 przez Arkadiusz Waluk

W kursie 3 html Ustawiamy ikonki w div-ach używamy opcjij Text-aling: center; w css3 

i tu mam problem wszystkie działają oprócz Społecznościowych  typu Yt.twiter,Fb i google+ one mi uciekaja kilka px  do prawej co prawda jest to nie wielka roznica no ale nie są jakby wycentrowane pisałem słowo w słowo jak na filmie wiele problemów już miałem i jakoś potrafiłem wykryć problem a z tym nie mogę sobie poradzić od dwóch dni normalnie chciałem już olać to i zacząć inny projekt ale stwierdziłem że inaczej się nie naucze niczego jeżeli bede pomijał takie rzeczy poniżej kod

 

 

 

<!DOCTYPE html>
 
<html lang="pl">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="Ie=edge,chrome=1"/>
        <title>Portfolio</title>
        <meta name="description" content="To moja strona na której ucze się kodować html5 i css3"/>
        <meta name="keywords" content="strona,www,tworzenie,kurs,nauka,obrazki">
    <link rel="stylesheet" href="sty.css" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato" rel="stylesheet">
        <link rel="stylesheet" href="css/fontello.css" type="text/css" />
    </head>
    <body>
        
        <div id="container">
           
            <div class="rectangle">
            <div id="logo">Alfred Yako</div>
            <div id="zegar">12:00:00</div>
            <div style="clear: both;"></div>
            </div>
            
             
             <div class="square">
                <div class="tile1"><i class="icon-angellist"></i><br/>Ikona 1</div>
                <div class="tile1"><i class="icon-bicycle"></i><br/>Ikona1</div>
                <div style="clear: both;"></div>
               
            
 
           
            <div class="tile2"><i class="icon-embassy"></i><br/>France</div>
            <div class="tile3"><i class="icon-harbor"></i><br/>Kotwica</div> 
                 
            <div style="clear: both;"></div>   
            
            <div class="tile4"><br/>Wizytówka strony</div>
                 </div>
              <div class="square"></div>
            <div class="tile5">Propozycja tekstu na strone wyświetlany </div>
            <div class="yt"> <i class="icon-youtube"></i></div>   
             <div class="fb"> <i class="icon-airfield"></i></div>  
              <div class="twiter"><i class="icon-gift"></i> </div>  
               <div class="google"><i class="icon-google"></i></div>       
        </div>
          
 <div class="rectangle">2017 &copy </div>
        </div>
            
        </div>
    </body>
</html>

 

Poniżej css3

body {
    background-color: #303030;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}
#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.rectangle
{
    width: 960px;
    margin: 20px;
    text-align: center;
}
.square
{
    width: 50%;
    float: left;
}
#logo
{
    float: left;
    font-family: 'Lato', sans-serif;
    font-size: 70px;
    width: 600px;
    text-align: left;
 
}
#zegar
{
    float: left;
    font-family: 'Lato', sans-serif;
    font-size: 70px;
    text-align: left;
    
 
}
.tile1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #3095d3;
    float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tile1:hover{
    background-color: #1073b1 
}
.tile2
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #666666;
    float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tile2:hover {
    background-color: #555555;
}
.tile3
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #93c748;
    float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tile3:hover {
    background-color: #82b637;
}
.tile4
{
    margin: 10px;
    width: 480px;
    height: 142px;
    background-color: #ee5a32;
    text-align: center;
    font-size: 28px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
   
    
	
	
}
.tile4:hover {
    background-color: #dd4a21;
}
.tile5{
    margin: 10px;
	width: 420px;
	height: 244px;
	background-color: #666666;
	text-align: center;
	padding: 30px;
    float: left;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    }
.yt
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
   
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    vertical-align: middle;
}
.yt:hover {
    background-color: #b83237;
}
.fb
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.fb:hover {
    background-color: #b83237;
}
.twiter
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.twiter:hover {
    background-color: #b83237;
}
.google
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
    text-align: center;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.google:hover {
    background-color: #82b637;
}
 
 
div {
    display: block;
}

 

 

 

Dodadtkowo dodałem zaokrąglenia na przyciskach co fajnie wyszło i też pytanie jest jakaś możliwość zrobienia ich jedną komendą a nie czterema (4)?  w sensie prostą metodą?

border-top-right-radius: 5px

; border-top-left-radius: 5px

; border-bottom-right-radius: 5px

; border-bottom-left-radius: 5px;

 

prosze o łągodność uczę się od 3 dni enlightenedlaugh

1 odpowiedź

+2 głosów
odpowiedź 6 lipca 2017 przez 0e85dc6eaf Dyskutant (8,840 p.)
border-radius: 5px;
komentarz 6 lipca 2017 przez 0e85dc6eaf Dyskutant (8,840 p.)

dodaj w fontello.css

display:block;
margin: 20px auto;

w miejsce 20px możesz wpisać dowolną liczbę

komentarz 6 lipca 2017 przez 0e85dc6eaf Dyskutant (8,840 p.)
To pozwoli przeglądarce automatycznie wyliczyć margines po lewej i prawej stronie, a margines z góry i z dołu określasz pierwszą liczbą
komentarz 6 lipca 2017 przez Albin Początkujący (290 p.)

tak to wyszło gdy zmniejszylem margin na 15px zostawiajac 76 px fontsize take fajnie tylko za wysoko

 

tej twojej komendy nie wiem zabardzo w którym miejscu umiescic bo w class icon 

 

jest 

 

[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;

 

jest margin i dispal inline block czy powinienem je usunac i dodać komende

 

 

 

display:block;

margin: 20px auto;

 

hej dodam że napis  Wizytówka Strony na pomarańczowym kafelku również jest zawyzona ale wyśrodkowana względem lewej i prawej 

1
komentarz 6 lipca 2017 przez 0e85dc6eaf Dyskutant (8,840 p.)
.icon-google:before {
content: '\f1a0';
font-size: 76px;
margin: 20px auto;
display:block;
}

 

komentarz 6 lipca 2017 przez Albin Początkujący (290 p.)
hehehe :D puchar pomogłeś mi super bardzo :D jestem niesamowicie wdzięczny wszystko działa  jak należy a nawet lepiej

Podobne pytania

0 głosów
2 odpowiedzi 135 wizyt
pytanie zadane 10 lutego 2018 w Inne języki przez Salaa1 Początkujący (460 p.)
0 głosów
2 odpowiedzi 516 wizyt
0 głosów
1 odpowiedź 318 wizyt

92,454 zapytań

141,262 odpowiedzi

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

...