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

Obramowanie i ruszający tekst

Object Storage Arubacloud
0 głosów
233 wizyt
pytanie zadane 22 stycznia 2016 w HTML i CSS przez Michał_Warmuz Mądrala (5,830 p.)

Witajcie Programisci. Tworze taką stronkę internetową i mam problem. Dokładnie mówiąc chodzi o to ,że dodałem do menu obramowanie i kiedy najade na polrusza mi się tekst.

CSS: 

body {
	background-color: #303030;
	margin: 0 !important;
	font-size: 20px;
	color: #FFFFFF;
	font-family: 'Lato', sans-serif;
}
#container {
	width: 99,5%;
	margin-right: 0;
	margin-left: 0;
}
#nav {
	background-color: black;
	text-align: center;
	padding: 10px;
	width: 99,5%;
}
#nav1 {
	background-color: black;
	text-align: center;
	padding: 15px;
	width: 99,5%;
	opacity: 0.75;
}
ol {
	list-style-type: none;
	height: 47px;
	line-height: 200%;
	display: inline-block;
	margin: 0;
	font-size: 24px;
}
ol a {
	color: white;
	text-decoration: none;
	display: block;
}
ol > li {
	float: left;
	width: 200px;
}
ol > li:hover {
	border: 5px solid #fff;
}
#img {
	width: 99,5%;
}
#footer {
	background-color: #cdc3a9;
	padding: 40px;
	height: 200px;
	color: black;
	text-align: justify;
}
#logo {
	width: 40%;
	border-right: 3px dotted #bcdb298;
	float: left;
}
.sticky {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	position: fixed;
}
#content2 {
	float: right;
}
#content1 {
	float: left;
}
#logotyp {
	float: left;
	font-size: 48px;
	font-weight: bold;
	margin-left: 15px;
	margin-top: 50px;
}

HTML:  

<! DOCTYPE HTML>
<html lang="PL">
<head>
	<meta charset="UTF-8" />
	<title>Wizytówka</title>
	<meta name="description" content="Strona poświęcona miastu Wieluń" />
	<meta name="keywords" content="miasto, Wieluń, łodzkie, wieluńskie, wizytówka" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
	<div id="container">
		<div id="nav">Witaj na stronie poświęconej miastu Wieluń</div>
		<div id="nav1">
			<ol>
				<li><a href="index.html">Strona Główna</a></li>
				<li><a href="aktu.html">Aktualności</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>
				<li><a href="forum/index.php">Forum</a></li>
				<li><a href="info.html">Informacje</a>
				<li><a href="formularze-support-donate">Forumualrze</a></li>
			</ol>
		</div>
		<div id="img"><img src="img/wielun.png" width="100%" alt="" />
		<div id="footer">
			<div id="logo">
				<img src="img/herb.png" height="200px"  style="float: left;"><span id="logotyp">Wieluń<span> <br />
			</div>
			<div id="content1">
				<strong>Urząd Gminy Wieluń</strong> <br />
				ul. Bolesława Prusa 8 <br />
				98-432 Wieluń <br />

				Telefony: 84 6962681, 84 6962025 <br />
				Fax: 84 6962794 <br />
				NIP: 919-13-65-265 <br />
				REGON: 000545722 <br />
			</div>
			<div id="content2">
			<strong>Copyright &copy; 2015 Urząd Gminy Wieluń.</strong> <br />
			Wszelkie prawa zastrzeżone. <br />
			Wszelkie przepisy prawa podane na tej <br />
			stronie mają charakter informacyjny <br />
			i nie stanowią wykładni prawa. 
			</div>
			<div style="clear:both;"></div>
		</div>
	</div>
		<script>

			$(document).ready(function() {
			var stickyNavTop = $('#nav1').offset().top;
			var stickyNav = function(){
			var scrollTop = $(window).scrollTop();
			if (scrollTop > stickyNavTop) { 
			$('#nav1').addClass('sticky');
			} else {
			$('#nav1').removeClass('sticky');
			}
			};

			stickyNav();

			$(window).scroll(function() {
			stickyNav();
			});
			});

		</script>
<body>
</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 22 stycznia 2016 przez Czort Nałogowiec (32,500 p.)
wybrane 23 stycznia 2016 przez Michał_Warmuz
 
Najlepsza
Najłatwiej to rozwiązać dodając niewidoczny border tej samej szerokości do elementu bez :hover.
komentarz 23 stycznia 2016 przez Michał_Warmuz Mądrala (5,830 p.)
Czyli co ? Przepraszam ale nie rozumiem.
komentarz 23 stycznia 2016 przez Czort Nałogowiec (32,500 p.)

ol > li {
    float: left;
    width: 200px;
border: 5px solid rgba(0,0,0,0);
}

 

Podobne pytania

0 głosów
1 odpowiedź 101 wizyt
0 głosów
1 odpowiedź 243 wizyt
pytanie zadane 7 czerwca 2020 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
0 głosów
1 odpowiedź 533 wizyt

92,556 zapytań

141,404 odpowiedzi

319,561 komentarzy

61,942 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...