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

Link jako display:block;

VPS Starter Arubacloud
0 głosów
534 wizyt
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,060 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,060 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 (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

0 głosów
odpowiedź 19 marca 2018 przez PROFF Obywatel (1,180 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ź 387 wizyt
pytanie zadane 1 września 2016 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)
0 głosów
4 odpowiedzi 677 wizyt
pytanie zadane 7 kwietnia 2016 w HTML i CSS przez WojciechJot Gaduła (3,410 p.)
–1 głos
1 odpowiedź 225 wizyt
pytanie zadane 3 kwietnia 2021 w HTML i CSS przez Rafał Termoaktywny Początkujący (400 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...