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

problem z stylowaniem.

0 głosów
43 wizyt
pytanie zadane 18 kwietnia w HTML i CSS przez LinosiK Obywatel (1,510 p.)

Cześć mam pewien problem z wystylowaniem pewnych elementów na mojej stronie... próbowałem już wielu znanych mi metod lecz nic nie pomaga...

Mój kod wygląda tak:

<div class="media">
		<h1>Kontakt</h1>
				<div class="square">
					<div class="mail">
						<a href="#" target="_blank" class="sociallink"><i class="icon-mail-alt"></i><span class="middle">E-mail</span></a>
					</div>
					<div class="fb">
						<a href="#" target="_blank" class="sociallink"><i class="icon-facebook-rect-2"></i><span class="middle" id="xd">Facebook</span></a>
					</div>

					<div class="Linkedin">
						<a href="" target="_blank" class="sociallink"><i class="icon-linkedin-rect"></i><span class="middle">Linkedin</span></a>			
					</div>
					<div class="form">
						<a href="" target="_blank" class="sociallink"><i class="icon-paper-plane-1"></i><span class="middle">Formularz Kontaktowy</span></a>
					</div>
					<div style="clear:both;"></div>
				</div>
				<div class="square"></div>
		</div>

a to mój css:


.media{
	background-color: #000;
	color: #FFF;
	height: 500px;
	
}
.media>h1{
	font-size: 50px;
	text-align: center;
}

.mail
{
	margin: 10px;
	width: 50px;
	height: 50px;
}
.fb
{
	margin: 10px;
	width: 50px;
	height: 50px;
}
.Linkedin
{
	margin: 10px;
	width: 50px;
	height: 50px;
}
.form
{
	margin: 10px;
	width: 50px;
	height: 50px;
}
.square
{
	width: 50%;
	float: left;
}
a.sociallink
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	width: 105px;
	height: 142px;
}

efekt wygląda na chwilę obecną w ten sposób:

a chciałbym aby napisy wyglądały tak jak napis "e-mail", oraz był wyśrodkowany na wysokość. Niestety nie udało mi się uzyskać efektu którego pragnę.

2 odpowiedzi

0 głosów
odpowiedź 18 kwietnia przez Ajver Bywalec (2,050 p.)

Jeśli chodzi o ustawienie elementów, to najłatwiej mi jest używać flex'a. Jeśli nie wiesz czym jest flex, odsyłam do filmiku: https://www.youtube.com/watch?v=yFHgP0MF3V4 A gdy go zobaczysz, żeby oswoić się z samym flexem (i mieć "ściągę" właściwości css) polecam tę stronkę: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Problemem z Twoim pozycjonowaniem może leżeć w linijce 15 css "width: 50px". To może być zbyt mała szerokość i zawartość po prostu się nie mieści.

0 głosów
odpowiedź 20 kwietnia przez pirouetti Bywalec (2,020 p.)

Przede wszystkim ustawiłeś długość w .mail .fb i tak dalej 50px, tam się nie mieści więc spada jedno pod drugie.

Poza tym ustawiłeś długość a.sociallink 105px, jak ma dobić do 105px jeśli znajduje się w divie który ma ustawione width 50px? 

Ja bym zrobił tak:

<div class="media">
        <h1>Kontakt</h1>
            <div class="square">
                    <div class="social">
                        <a href="#" target="_blank"><i class="icon-mail-alt"></i><span class="middle">E-mail</span></a>
                    </div>
                    <div class="social">
                        <a href="#" target="_blank"><i class="icon-facebook-rect-2"></i><span class="middle" id="xd">Facebook</span></a>
                    </div>
 
                    <div class="social">
                        <a href="" target="_blank"><i class="icon-linkedin-rect"></i><span class="middle">Linkedin</span></a>            
                    </div>
                    <div class="social">
                        <a href="" target="_blank"><i class="icon-paper-plane-1"></i><span class="middle">Formularz Kontaktowy</span></a>
                    </div>
            </div>        
        </div>
.media{
    background-color: #000;
    color: #FFF;
    height: 500px;
     
}
.media h1{
    font-size: 50px;
    text-align: center;
}
 
.square {
position:absolute;
left: 15px;
}

.social {
padding: 15px 0;
}

.social a
{
    display: flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
}

/* Długość i wysokość ikony */
.social i
{
   height: 50px;
   width: 50px;
   margin-right: 10px;
}

Podobne pytania

–1 głos
2 odpowiedzi 111 wizyt
+1 głos
1 odpowiedź 230 wizyt
pytanie zadane 16 czerwca 2015 w HTML i CSS przez therrax Nowicjusz (240 p.)
0 głosów
2 odpowiedzi 127 wizyt
pytanie zadane 4 czerwca 2015 w HTML i CSS przez Arjen Użytkownik (860 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

65,727 zapytań

112,367 odpowiedzi

237,225 komentarzy

46,687 pasjonatów

Przeglądających: 125
Pasjonatów: 0 Gości: 125

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...