Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [CSS]Łamanie się menu

Napisany przez: 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

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


Skasowałem zawartość contentu dla spokoju :-D

Napisany przez: 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ą,"

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)