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

Menu poziome rozwijane CSS szerokość

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
1,272 wizyt
pytanie zadane 27 lutego 2016 w HTML i CSS przez Kubala94 Początkujący (360 p.)
edycja 27 lutego 2016 przez Kubala94

Witam , mam takie menu poziome rozwijane w css zrobione ;

kod css

		body
		{
			background-color: #000000;
			color: white;
			font-family: 'Open Sans', sans-serif;
		}

		#container
		{
			width:1000px;
			margin-left: auto;
			margin-right: auto;
		}
 
		#logo
		{
			background-color: blue;
			color:white;
			font-size:46px;
		}
		
		
		
			
			.nav 
		 {
			list-style:none;
			margin: 50px 0;
			padding:0;
			margin-top:20px;
			font-family:arial;
			
			
			
		 }
		 
		 .nav li
		 {
			 float:left; 
		 }
		 
		 .nav li a
		 {
			display:block; 
			padding:10px 20px;
			text-decoration:none;
			background-color:#0A9FD1;
			color:white;
			position:relative;

		 }
		 
		 
		 .nav ul
		 {
			 list-style: none;
			 position: absolute;
			 padding:0;
			display: none;

		 }
		 
		 .nav ul li
		 {
			 float:none;
			
		 }
		 
		 .nav li a:hover,.nav li:hover>a
		 
		 {
			 background-color:white; 
			 color: black;
		 }
		 .nav li:hover>ul
		 {
			 display:block;
			 
		 }

chodzi mi o to , że jak zrobić żeby moje menu miało szerokość taką jak logo (dołączam zdjęcie)

rozumiecie o co chodzi , żeby menu było takie szerokie jak div logo , ale nie jak teraz jest ,

tylko bez wstawianie kolejnych linków link 7 to ma być ostatni a reszta to po prostu dalej menu ale już bez linków ;p nie wiem czy to dobrze wytłumaczyłem ma być wyrównane do lewej , próbowałem już coś z tym zrobić ale nic to nie dało.. , jestem beginnerem w css :) pewnie to jest proste ale nie mam pojęcia jak to zrobić, będę wdzięczny za pomoc.

 

1 odpowiedź

+1 głos
odpowiedź 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)
Pokaż html, bo z samego css ciężko wywróżyć jak masz elementy zagnieżdżone.
komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)
Proszę :  będę wdzięczny za pomoc .

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
     <title>Test</title>
	 <meta name="destcription" content="Test">
     <meta name="keywords" content="test" />
	 <meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1"/>
	 
	 <link href="style.css" rel="stylesheet" type="text/css" />
	 
	 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	 
	 
</head>

<body>
	
	<div id="container"> 
	
		
			<div id="logo"> 
			<center>Test</center>
			</div>
		
		
			<ul class="nav">

<li><a href="#"> Home</a></li>
<li><a href="#"> Link 2</a><ul>
		<li><a href="#">Podmenu 1</a></li>
		<li><a href="#">Podmenu 2</a></li>
		<li><a href="#">Podmenu 3</a></li>
		<li><a href="#">Podmenu 4</a></li>
		</ul></li>

		<li><a href="#"> Link 3</a></li>
		<li><a href="#"> Link 4</a></li>
		<li><a href="#"> Link 5</a></li>
		<li><a href="#"> Link 6</a></li>
		<li><a href="#"> Link 7</a></li>

</ul>
			
	</div>

</body>

</html>

 

komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)
background-color: #0A9FD1;
width:1000px;
height:38px;

Dopisz do .nav{}

komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)
Działa dzięki :) , tylko zamiast height :38px; musiałem dać 40px; ale to drobnostka ;p Dzięki tylko mam jeszcze pytanko jak bym chciał to menu np. wyśrodkować teraz tzn. menu , linki menu wyśrodkować, szerokosc ta sama , wiecie o co chodzi , wiem że text-align:center; ale gdzie to wstawic jak dałem w .nav{} to nie działa
komentarz 27 lutego 2016 przez GaCeL Dyskutant (7,500 p.)
.nav { 
    margin-left: auto;
    margin-right: auto; 
}


 

komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)
dodałem, ale nie działa , dobra nie jest to konieczne , ale chcialem zobaczyc jak to bedzie wyglądać
komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)
Tak wygląda wyśrodkowane:

https://jsfiddle.net/eb9cf744/
komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)

Dzięki , pomyśle na tym wyśrodkowaniem :) a jeszcze jedno ostatnie już pytanie ,bo chyba za dużo pytam ;p   czy da się tak zrobić przy tym menu i jeśli ,tak to jak to zrobić ;) Chodzi mi o dłuższe odstępy między linkami to znaczy się linki od 1 do 7 maja być tak jak były ,a potem jeszcze 2 linki całkiem po prawej w tym jeden podświetlony cały czas , jak uzyskać takie coś jak tu:

tak , żeby działało z menu rozsuwanym , próbowałem <ul style="float:right;list-style-type:none;"> </ul> ale odmawia posłuszeństwa ..

komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)
Nie używa się style inline. Po to masz plik css, żeby w nim stylować. Twój problem sprowadza się do nadania odpowiednim elementom float:left; i float:right; - którym to sam się domyśl i tak już za dużo gotowców dostałeś.

Podobne pytania

0 głosów
3 odpowiedzi 634 wizyt
pytanie zadane 5 sierpnia 2016 w HTML i CSS przez Lukasz9210 Obywatel (1,060 p.)
+1 głos
1 odpowiedź 487 wizyt
pytanie zadane 10 lutego 2016 w HTML i CSS przez szywlo15644 Nowicjusz (130 p.)
+1 głos
1 odpowiedź 1,430 wizyt
pytanie zadane 1 grudnia 2015 w HTML i CSS przez garyore Początkujący (370 p.)

93,187 zapytań

142,203 odpowiedzi

322,022 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2345p. - dia-Chann
  2. 2306p. - Łukasz Piwowar
  3. 2295p. - Łukasz Eckert
  4. 2282p. - CC PL
  5. 2252p. - Tomasz Bielak
  6. 2219p. - Łukasz Siedlecki
  7. 2215p. - rucin93
  8. 2201p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 1941p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1480p. - Michał Telesz
  15. 1469p. - ssynowiec
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...