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

Link jako display:block;

0 głosów
134 wizyt
pytanie zadane 10 marca 2018 w HTML i CSS przez PROFF Obywatel (1,140 p.)

Dobry wieczór,

Chcę by buttony zaloguj i zarejestruj całe były linkiem, dodałem display:block; ale gdy próbuję ustawić width albo height coś się psuje. Po prostu chcę by było jak jest bez żadnego przesuwania ale by całość była linkiem.

<!DOCTYPE HTML>
<html lang="pl">
<head> 
     <meta charset="utf-8"/>
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	  <meta name="author" content="PROFF"/>
	      <title>PROFF</title>
	  <meta name="description" content="Pasja informatyki, nauka, programowanie, html"/>
	  <meta name="keywords" content= "www,html,pasja,informatyki"/>
	  <link rel="stylesheet" href="main.css">
	  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<script src="jquery.scrollTo.min.js"></script>

<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-32x32.jpg">
	
	  </head>
	  
	  <body>
	  
	  <div id="left"></div>
	  <div id="right"></div>
	  
		<div id="container">
		
				
	
				
				<nav>	
				<div id="menu">
				
				<ol>				
						<li><a href="index.html">Start</a></li>
						
						<li><a href="#">O mnie</a>  <ul>
        <li><a href="kimjestem.html">Kim Jestem?</a></li>
        <li><a href="quiz.html">Quiz</a></li>
      </ul>
    </li>
						
					
						
						<li><a href="conowego.html">Co nowego?</a></li>
						
						<button class="reje"><a href="#"> Rejestracja</a></button>
						<button class="log"><a href="#"> Zaloguj</a></button>
	
				</ol>
				
				
		</div>
		 
	
							</nav>
							
							<main>
							
							

		
	  </body>
	  


	  </html>
body
{
background-color: grey;
}


#container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	
}

#menu
{
	padding: auto;
	text-transform: uppercase;
	background-color: #303030;
	color: #ffffff;
	margin: auto;
	width: auto;
	text-align: center;
	line-height:200%;
	height: 36px;
	
}

ol {
  list-style-type:none;
  padding:0;
  margin: 25px auto auto auto;
  font-size:18px;
  height:2em;
  line-height:2em;
  text-align:center;
  background-color: #303030;
}

ol > li {
  float:left;
  width:198px;
 margin-left:1px;
 background-color: #303030;
 border-right:1px solid #1F1F1F;
 
}

ol > li:first-child {
  margin-left:0;
  
  
}


ol > li > ul > li > a {
  border-top:1px solid #1F1F1F;
  
}


ol a {
  display:block;
  color:#000;
  text-decoration:none;
  padding:0 5px;
  
}

ol > li > a:hover {
  color:white;
  
}

ol > li:hover {
  background-color:#404040;
  

}

ol > li > ul {
  list-style-type:none;
  padding:0;
  margin:0;
  
}

ol > li > ul > li {
  background-color:#303030;
}
ol > li > ul > li:hover {
  background-color:#505050;
  
}


ol > li > ul {
  display:none;
}

ol > li:hover > ul {
  display:block;
  
}

ol > li:hover > a {
  color:#66FFFF;
  
}

.reje
{
	font-size: 16px;
	margin-left: 350px;
	border-radius:2px;
	height: 34px;
	background-color: #003300;
	border-style: none;
	color:white;
	
}

.reje a
{
	
	
	display: block;
}

.log
{
	font-size: 16px;
	margin-left: 20px;
	border-radius:2px;
	height: 34px;
	background-color: #003300;
	border-style: none;
	color: white;
	padding: 0 15px 0 15px;
}

.log a 
{

	display: block;

}

 

komentarz 10 marca 2018 przez pablop76 Szeryf (94,910 p.)
Pomiędzy elementy listy nie wolno umieszczać innych znaczników !!!
komentarz 12 marca 2018 przez PROFF Obywatel (1,140 p.)
W takim razie jak mam te przyciski tam umieścić skoro gdy próbuje je tam przesunąć po prostu pojawiają się gdzie indziej niż chce?
komentarz 12 marca 2018 przez pablop76 Szeryf (94,910 p.)
Masz nav a w nim id=menu. Nie można dla nav dać id= menu? I w tej belce umieścić listę z odnośnikami przyklejoną do lewej oraz (poza listą) button przyklejony do prawej.

2 odpowiedzi

0 głosów
odpowiedź 10 marca 2018 przez mi-20 Stary wyjadacz (10,360 p.)
wybrane 19 marca 2018 przez PROFF
 
Najlepsza

A nie prościej będzie dodać klasę bezpośrednio dla linka? Coś w tym stylu:

<a href="" class="register" title="Zarejestruj się">Zarejestruj</a>
<a href="" clads="login" title="Zaloguj się ">Zaloguj</a>

.register,.login{
display:block;
width:120px;
padding:5px;
}

 

komentarz 12 marca 2018 przez PROFF Obywatel (1,140 p.)
Dzięki, tylko literówka w drugim hrefie powinno byc class zamiast clads :d
komentarz 12 marca 2018 przez PROFF Obywatel (1,140 p.)
Jak je jeszcze zrobić by były obok siebie a nie jeden pod drugim? float;left nie pomaga.
komentarz 12 marca 2018 przez mi-20 Stary wyjadacz (10,360 p.)

Nie no 

float:left

musi zadziałać, masz dwa elementy blokowe. Może po prostu rozmiar przycisków jest zbyt duży w stosunku do elementu w którym się znajdują i dlatego nie możesz ich ułożyć obok siebie

0 głosów
odpowiedź 19 marca 2018 przez PROFF Obywatel (1,140 p.)
Dobra zrobiłem id=menu dla nav, a do .register, .login zrobiłem float:right i margin-top: -36px; żeby wrzucić to na ten szary pasek menu (przyciski nie są już w liście a inaczej nie wiedziałem jak to tam umieścić).

Podobne pytania

0 głosów
1 odpowiedź 77 wizyt
pytanie zadane 1 września 2016 w HTML i CSS przez BlvckFox Gaduła (3,420 p.)
0 głosów
4 odpowiedzi 116 wizyt
pytanie zadane 7 kwietnia 2016 w HTML i CSS przez WojciechJot Gaduła (3,450 p.)
0 głosów
2 odpowiedzi 102 wizyt
pytanie zadane 5 lipca 2018 w HTML i CSS przez Jarver Użytkownik (750 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

64,951 zapytań

111,426 odpowiedzi

234,495 komentarzy

46,784 pasjonatów

Przeglądających: 201
Pasjonatów: 8 Gości: 193

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.

...