[CSS]Łamanie się menu, Jak wymusić nie "łamanie" się menu |
[CSS]Łamanie się menu, Jak wymusić nie "łamanie" się menu |
21.10.2019, 16:17:43
Post
#1
|
|
Grupa: Zarejestrowani Postów: 30 Pomógł: 0 Dołączył: 6.03.2008 Skąd: Babimost Ostrzeżenie: (10%) |
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
Skasowałem zawartość contentu dla spokoju :-D |
|
|
24.10.2019, 13:27:59
Post
#2
|
|
Grupa: Zarejestrowani Postów: 20 Pomógł: 2 Dołączył: 6.05.2010 Ostrzeżenie: (0%) |
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ą," |
|
|
Wersja Lo-Fi | Aktualny czas: 24.04.2024 - 12:33 |