Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Łamanie się menu, Jak wymusić nie "łamanie" się menu
Rysiol
post 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%)
X----


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

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


Skasowałem zawartość contentu dla spokoju :-D
Go to the top of the page
+Quote Post
aMilk
post 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ą,"
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.11.2019 - 00:35