Link jako display:block;

pytanie zadane 10 marca 2018 w HTML i CSS przez PROFF Obywatel (1,180 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 VIP (123,340 p.)

Pomiędzy elementy listy nie wolno umieszczać innych znaczników !!!

komentarz 12 marca 2018 przez PROFF Obywatel (1,180 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 VIP (123,340 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

odpowiedź 10 marca 2018 przez mi-20 Stary wyjadacz (13,190 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,180 p.)

Dzięki, tylko literówka w drugim hrefie powinno byc class zamiast clads :d

komentarz 12 marca 2018 przez PROFF Obywatel (1,180 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 (13,190 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