Logowanie

CSS wystylizowanie menu

pytanie zadane 6 sierpnia 2016 w HTML i CSS przez james30k Bywalec (2,260 p.)

Chodzi o listę "przyklejaną", dokładnie chcę żeby było pomiędzy <li></li> przerwa paro-pikselowa

body
{
	background-color:black;
	color:white;
	font-family: 'Raleway', sans-serif;
	
}


#container
{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding:10px
	
}

#logo
{
	width:960px;
	font-size:70px;
	margin-left:auto;
	margin-right:auto;
	margin:20px;
}

#nav
{
	width:100%;
	padding:10px;
	background-color:gray;
	text-align:center;
	border-top:1px;
	
}

#content
{
	font-family: 'Lato', sans-serif;
	font-size:20px;
	
	
}

ul
{
	padding:0px;
	margin:0;
	list-style-type:none;
	font-size: 18px;
	height:35px;
	line-height:200%;
	
}

ul a 
{
	color:#ffffff;
	text-decoration:none;
	display:block;
}

ul > li
{
	float:left;
	width:10xp;
	height:40px;
	
}

3 odpowiedzi

odpowiedź 6 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)
wybrane 6 sierpnia 2016 przez james30k

Najlepsza

Dodaj do li margin.

Przykład:

ul > li
{
    float:left;
    margin-left: 10px;
    width:10px;
    height:40px;
}

Ps. Nie width: 10xp; a 10px.

Pokaż 6 poprzednich komentarzy

komentarz 6 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)

Kod css(Tylko dla content) jak i html(Zawartość content) poproszę. :d

komentarz 6 sierpnia 2016 przez james30k Bywalec (2,260 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta name="description" content="System logowania,projektowanie stron internetowych czyli to czego szukasz"/>
<meta name="keyworlds" content="tworzenie stron,system logowania,bezpieczne zamówienia,to czego potrzebujesz"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<link rel="stylesheet"  type="text/css" href="style.css"/>

<link href='https://fonts.googleapis.com/css?family=Raleway:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>
<body>

<div id="container">
	<div id="logo"></div>
	
	<div id="nav">
		<ul>
				<li><a href="#">Strona Głóna<a/></li>
				<li><a href="#">Moje projekty<a/></li>
				<li><a href="#">Kontakt<a/></li>
		</ul>
	</div>
		
		
	
	<div id="content">askldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskldaskld </div>
	
	<div id="square"></div>
	<div id="square2"></div>
</div>

</body>
</html>

body
{
    background-color:black;
    color:white;
    font-family: 'Raleway', sans-serif;
      
}
  
  
#container
{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:10px
      
}
  
#logo
{
    width:960px;
    font-size:70px;
    margin-left:auto;
    margin-right:auto;
    margin:20px;
	text-align:center;
}
  
#nav
{
    width:100%;
    padding:10px;
    background-color:gray;
    border-top:1px;
}
  
#content
{
	padding:20px;
    font-family: 'Lato', sans-serif;
    font-size:26px;  
	width:960px;

}
  
ul
{
    padding:0px;
    margin:0;
    list-style-type:none;
    font-size: 18px;
    height:35px;
    line-height:200%;
	text-align:center;
}
  
ul > li > a 
{
    color:#ffffff;
    text-decoration:none;
}
  
ul > li
{
    display: inline-block;
    height: 10px;
    margin-left: 50px;

komentarz 6 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)

#container
{
    word-wrap:break-word;
    max-width:1000px;
    margin: 0 auto;
    padding:10px
}

Btw. Zamiast agadsgadsgasvfg polecam stosować lorem ipsum.

http://pl.lipsum.com/

komentarz 6 sierpnia 2016 przez james30k Bywalec (2,260 p.)

Jeszcze mam pytanie iż po prawej prawej stronie jest więcej odstępu niż po lewej stronie względem "nawigacji" jak temu zaradzić?

komentarz 6 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)

Dlatego że navbar ma 1020 px. a content 1000 px. ;_;

Come on! Takie rzeczy to juz samemu można odkryć. ;_;

odpowiedź 6 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

li + li{
  margin-left: 10px;
}

komentarz 6 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)

Jak to działa:

li + li{}?

Dodaje do każdego czy... Nie rozumiem.

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

Do każdego li, który występuje bezpośrednio po li dodaje margin.

komentarz 6 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)

B. przydatna rzecz, dzięki. :)

odpowiedź 6 sierpnia 2016 przez niezalogowany

Podobne pytania

0 głosów

0 odpowiedzi 257 wizyt

Problem z menu - HTML i CSS

pytanie zadane 3 listopada 2022 w HTML i CSS przez MarcelM Początkujący (340 p.)

0 głosów

2 odpowiedzi 219 wizyt

Menu w CSS i HTML

pytanie zadane 26 marca 2022 w HTML i CSS przez Skinek_ Nowicjusz (190 p.)

+1 głos

1 odpowiedź 448 wizyt

Rozwijane menu - CSS

pytanie zadane 11 lipca 2021 w HTML i CSS przez EmilB Użytkownik (980 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...