Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Łamanie się menu
Forum PHP.pl > Forum > Przedszkole
Rysiol
21.10.2019, 16:17:43
Witam,

korzystając z lekcji: https://www.youtube.com/watch?v=vd_GnTBzJ4U wykonałem menu na stronie: www.klonbabimost.cba.pl jest OK (zrezygnowałem z przyklejenia się menu wraz z przewijaniem), ale: podczas zmiany szerokości strony logo, cały content "chowają się" i wyśrodkowują, menu zaś zaczyna się łamać ;-/ Jest na to jakieś rozwiązanie? Załączam css i html głównej strony.

Kod
body
{
    background-image: url("Grafika/tlo_2.png");
    font-family: roboto;
    margin: 0 !important;
}
@font-face {
    font-family: roboto;
    src: url(RobotoCondensed-Regular.ttf);
}

.strona
{
    width: 100%;
}
.logo
{
    margin-top: 10px;
    margin-bottom: 3px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.nav
{
    width: auto;
    background-color: #cc6600;
    text-align: center;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    color: #3d3d29;
    margin-bottom: 7px;
}
.content
{
    width: 1160px;
    border: 1px solid white;
    background-color: #CCCCCC;
    color: black;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    font-size: 22px;
    text-align: justify;
    overflow: auto;
    margin-bottom: 7px;
}
.ad
{
    border: 1px solid white;
    background-color: gray;
    width: 1180px;
    padding: 10px;
    text-align: center;
    margin-bottom: 7px;
    margin-left: auto;
    margin-right: auto;
}
.footer
{
    width: 1184px;
    border: 1px solid white;
    background-image: url("Grafika/footer_tlo.jpg");
    clear: both;
    padding: 8px;
    color: #EEEEEE;
    font-size: 14px;
    margin-bottom: 7px;
    margin-left: auto;
    margin-right: auto;
}
.gallery{
    margin: 10px;
    background-color: white;
}
.gallery img{
    width: 100px;
    padding: 5px;
    filter: grayscale(100%);
    transition: 0.3s;
}
.gallery img:hover{
    filter: grayscale(0%);
    transform: scale(1.1);
}
.pasek
{
    border: 1px solid black;
    clear: both;
    height: 24px;
    background-color: gray;
    padding: 5px;
    text-align: center;
    color: white;
    margin-bottom: 5px;
}
.prawa
{
    float: right;
    display:inline;
}
img#fotografia:hover{
    opacity : 0.50;
    filter : alpha(opacity=10);
}
td, th
{
    border: 1px solid black;
}
#komentarz
{
    background-color: lightgray;
    border: 1px solid black;
    width: 520px;
    padding: 10px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    font-size: 24px;
    text-align: center;
}
#koment
{
    background-color: lightgray;
    border: 1px solid black;
    width: 520px;
    padding: 10px 20px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
/*Wygląd pól tekstowych */
input[type=text]
{
    width: 200px;
    background-color: #efefef;
    color: #666;
    border: 1px solid black;
    font-size: 18px;
    padding: 10px;
    margin-top: 10px;
    font-family: roboto;
}
/*Wygląd okna z komentarzem */
textarea
{
    resize: none;
    width: 500px;
    background-color: #efefef;
    color: #666;
    border: 1px solid black;
    font-size: 18px;
    padding: 10px;
    margin-top: 10px;
    font-family: roboto;
}

/*Wygląd przycisku wyślij */
input[type=submit]
{
    width: 200px;
    background-color: #3366ff;
    font-size:16px;
    color: white;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid black;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    font-family: roboto;
}
/*Wygląd pola tekstowego po kliknięciu */
input[type=text]:focus
{
    background-color: #e6f2ff;
}
/*Wygląd pola komentarza po kliknięciu */
textarea:focus
{
    background-color: #e6f2ff;
}
/*Wygląd przycisku wyślij po najechaniu */
input[type=submit]:hover
{
    background-color: #668cff;
}
ol
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 24px;
    height: 30px;
    display: inline-block;
    white-space: nowrap;
}
ol a
{
    color: #ffffff;
    text-decoration: none;
    display: block;
}
ol >li
{
    float: left;
    width: 150px;
    height: 34px;
    border-right: 2px solid white;
}
ol > li:first-child
{
    border-left: 2px solid white;
}
ol > li:hover
{
    background-color: #ff8c1a;
}
ol > li:hover > a
{
    color: #451717;
}


oraz html głownej

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="Klon Babimost - informacje o klubie">
  6. <meta name="keywords" content="Klon Babimost, Klon, Babimost, strona klonu, klonbabimost, klonbabimost.cba.pl, klonbabimost.cba, www.klonbabimost.cba.pl, klon, babimost">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <link rel="stylesheet" type="text/css" href="style.css">
  9. <link rel="stylesheet" type="text/css" href="lightbox.min.css">
  10. <script type="text/javascript" src="lightbox-plus-jquery.min.js">
  11. </script>
  12.  
  13. </head>
  14. <body>
  15. <title>KLON BABIMOST - Oficjalna strona internetowa klubu piłkarskiego</title>
  16. 	<div class="strona">
  17. 			<div class="logo">
  18. 				<a href="index.html"><img src="Grafika/Logo2.jpg" style="border: 1px solid white" title="Strona Główna"></a>
  19. 			</div>
  20. <!-- MENU z przyciskami -->
  21. 				<div class="nav">
  22. 					<ol>
  23. 						<li><a href="oklubie.html">O klubie</a></li>
  24. 						<li><a href="zawodnicy.html">Zawodnicy</a></li>
  25. 						<li><a href="tabela.html">Tabela</a></li>
  26. 						<li><a href="treningi.html">Treningi</a></li>
  27. 						<li><a href="terminarz.html">Terminarz</a></li>
  28. 						<li><a href="zarzad.html">Zarząd</a></li>
  29. 						<li><a href="kontakt.html">Kontakt</a></li>
  30. 						<li><a href="galeria.html">Galeria</a></li>
  31. 						<li><a href="ksiega.php">Księga Gości</a></li>
  32. 				</div>
  33. <!-- Okno z treścią -->		
  34. 			<div class="content">
  35.                         </div>
  36. <!-- DIV z odnośnikami -->
  37. 		<div class="ad">
  38.                 <a target="_blank" href="http://babimost.pl"><img src="Grafika/Herb_Babimostu.png" title="Oficjalna strona Babimostu"></a>&nbsp;&nbsp;&nbsp;
  39.                 <a target="_blank" href="http://csir.babimost.pl"><img src="Grafika/csir_logo.png" title="Strona CSiR w Babimoście"></a>&nbsp;&nbsp;&nbsp;
  40.                 <a target="_blank" href="http://lubuskizpn.pl/"><img src="Grafika/lzpn.png" title="Lubuski Związek Piłki Nożnej"></a>&nbsp;&nbsp;&nbsp;
  41.                 <a target="_blank" href="http://pl-pl.facebook.com/pg/BomstFans"><img src="Grafika/s_f.png" title="Klon Babimost na Facebook"></a>
  42. 		</div>
  43. 		<!-- Stopka -->
  44. 				<div class="footer">
  45. 					<div><span class="prawa">Autor: Robert Rychwicki &copy; Wszelkie prawa zastrzeżone.</span><span class="lewa"><a style="text-decoration: none; color:white;" href="rodo.html">Klauzula RODO</a></span></div>
  46. 				</div>
  47. </div>
  48. </body>
  49. </html>	
[HTML] pobierz, plaintext


Skasowałem zawartość contentu dla spokoju :-D
aMilk
24.10.2019, 13:27:59
Przy zmianie szerokosci strony nic sie nie dzieje. Caly content strony jest jak byl, menu sie nie lamie.
W stylach nie masz nic odnosnie trybu responsywnego, wiec skad ta informacja ze "cały content "chowają się" i wyśrodkowują,"
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.