Witam, od jakiegoś czasu nie zajmowałem się nauką html/css ponieważ wziąłem się głównie za moje projekty w C++. Miałem trochę czasu więc stwierdziłem że przypomnę sobie coś czego się niedawno nauczyłem, napisałem więc prosty szablon strony :
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<style>
* {
margin: 0;
padding: 0;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
header {
width: auto;
margin-left: auto;
margin-right: auto;
color: #000000;
background-color: #ffffff;
font-size: 20pt;
text-align: center;
line-height: 50pt;
}
nav {
text-align: center;
}
.menu {
display: block;
list-style: none;
color: #ffffff;
background-color: #528e89;
}
.menu li {
display: inline;
}
.menu a:link, .menu a:visited {
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
text-decoration: none;
color: #ffffff;
}
.menu a:hover {
font-weight: bold;
}
section {
width: 900px;
margin-left: auto;
margin-right: auto;
}
.art {
width: 250px;
padding: 25px;
float: left;
color: #000000;
background-color: #ffffff;
text-align: justify;
font-size: 12pt;
}
footer {
color: #ffffff;
background-color: #549965;
font-size: 12pt;
font-family: Ubuntu;
text-align: center;
line-height: 50pt;
}
</style>
</head>
<body>
<div id="container">
<header>
Lorem ipsum dolor sit amet
</header>
<nav>
<ul class="menu">
<li><a href="#">adipiscing</a></li>
<li><a href="#">vestibulum</a></li>
<li><a href="#">sagittis</a></li>
<li><a href="#">torquent</a></li>
</ul>
</nav>
<div style="clear: both;"></div>
<section>
<article class="art">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus ex. Mauris lorem nunc, dictum et fermentum et, porttitor et sem. Donec faucibus efficitur ligula eu convallis. Proin ullamcorper, mauris in iaculis suscipit, mi diam aliquet mauris, in ullamcorper lorem dui id est. Ut eget quam risus. Nulla interdum suscipit dolor, id ultrices sapien euismod eget. Sed ex elit, fermentum non tempor non, varius vitae nisi. Proin scelerisque ex vel neque condimentum volutpat. Praesent et mi sed nisi molestie iaculis. Suspendisse elit lorem,vestibulum sit amet risus eget, sodales scelerisque lectus. Suspendisse sit amet pellentesque ipsum. Aliquam eu sagittis elit. Class aptent taciti sociosqu adlitora torquent per conubia nostra, per inceptos himenaeos.
</article>
<article class="art">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus ex. Mauris lorem nunc, dictum et fermentum et, porttitor et sem. Donec faucibus efficitur ligula eu convallis. Proin ullamcorper, mauris in iaculis suscipit, mi diam aliquet mauris, in ullamcorper lorem dui id est. Ut eget quam risus. Nulla interdum suscipit dolor, id ultrices sapien euismod eget. Sed ex elit, fermentum non tempor non, varius vitae nisi. Proin scelerisque ex vel neque condimentum volutpat. Praesent et mi sed nisi molestie iaculis. Suspendisse elit lorem,vestibulum sit amet risus eget, sodales scelerisque lectus. Suspendisse sit amet pellentesque ipsum. Aliquam eu sagittis elit. Class aptent taciti sociosqu adlitora torquent per conubia nostra, per inceptos himenaeos.
</article>
<article class="art">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus ex. Mauris lorem nunc, dictum et fermentum et, porttitor et sem. Donec faucibus efficitur ligula eu convallis. Proin ullamcorper, mauris in iaculis suscipit, mi diam aliquet mauris, in ullamcorper lorem dui id est. Ut eget quam risus. Nulla interdum suscipit dolor, id ultrices sapien euismod eget. Sed ex elit, fermentum non tempor non, varius vitae nisi. Proin scelerisque ex vel neque condimentum volutpat. Praesent et mi sed nisi molestie iaculis. Suspendisse elit lorem,vestibulum sit amet risus eget, sodales scelerisque lectus. Suspendisse sit amet pellentesque ipsum. Aliquam eu sagittis elit. Class aptent taciti sociosqu adlitora torquent per conubia nostra, per inceptos himenaeos.
</article>
<div style="clear: both;"></div>
</section>
<footer>
Nulla interdum suscipit dolor
</footer>
</div>
</body>
</html>
Początkowo pisałem to na moim małym laptopie, potem sprawdziłem całość na innym sprzęcie, problem dotyczy poziomego menu, a dokładnie tego co się dzieje kiedy najedziemy na daną opcje kursorem:
Jak widać ustawiłem w CSS że w takiej sytuacji tekst na danej pozycji ma być pogrubiony, na pokazanym screenie działa to poprawnie.
Problem jest tylko taki że na innym sprzęcie dochodzi w tej sytuacji ( najechania na pozycje ) do zniekształcenia paska menu, jest ono wtedy pogrubione o około 1px a inne napisy są lekko "obniżane", myślę że wiecie o co chodzi. Ewentualnie w razie wątpliwości mogę dać dodatkowego screena...
Będę wdzięczny za objaśnienie co mogłem zawalić w kodzie CSS, z góry dziękuje i pozdrawiam :)
