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.

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

Po dodaniu tego, całe menu mi się scaliło nie wiem z jakiego powodu

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

Usuń width.

I tak nie działał.

Przydałby się kod HTML.

Nie widzę jak to wygląda po edycji, a mówiąc wprost nikomu nie chce się tworzyć pod to pliku html.

Btw. float: left; scala. Choć, ja do li używałbym display: inline-block;

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"> </div>
	
	<div id="square"></div>
	<div id="square2"></div>
</div>

</body>
</html>

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

Łap:

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;
    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 > li > a 
{
    color:#ffffff;
    text-decoration:none;
}
 
ul > li
{
    display: inline-block;
    height: 10px;
    margin-left: 10px;
}

All śmiga.

http://codepen.io/anon/pen/AXJNZp

Gdybyś chiciał wyjaśnień, pisz. Lecz teraz jestem zajęty, więc zapewne pod wieczór Ci to wyjaśnię, o ile czegoś nie rozumiesz.

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

Dzięki wielki!

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

Jescze mam pytanko jedno. Pod spodem umieściłem content i stworzyłem id w css-sie o tej nazwie.Chciałem żeby zajmował ten div tylko 1000px; więc gdy piszę width:1000px; w środku tego id nie zmienia się to na stronie.

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 263 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ź 450 wizyt

Rozwijane menu - CSS

pytanie zadane 11 lipca 2021 w HTML i CSS przez EmilB Obywatel (1,040 p.)

CSS wystylizowanie menu

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci