• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[HTML CSS] Po zmniejszeniu okna przeglądarki środek najezdza mi na menu z lewej strony...

Object Storage Arubacloud
0 głosów
1,907 wizyt
pytanie zadane 2 marca 2017 w HTML i CSS przez LeeTomahawk Początkujący (250 p.)
Witam.

Mam problem. Tak jak w temacie, po zmniejszeniu okna przeglądarki  środek mojej strony (div id="srodek") nakłada się na lewego diva (div id="menu") oraz prawa strona zasłania środek (div id="prawa_strona").

Nie wiem czy kod do tego jest potrzebny. Jeśli będzie potrzeba to podam.

Mam wrażenie, że źle wyskalowałem coś. Od razu powiem, że pracowałem na %%% (menu,srodek,prawa_strona).

Pozdrawiam.
komentarz 2 marca 2017 przez HaKIM Szeryf (87,590 p.)
Jest potrzebny. :)
komentarz 2 marca 2017 przez LeeTomahawk Początkujący (250 p.)
<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
  <title>ASD</title>
  
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  
   <link rel="stylesheet" href="style.css" type="text/css"/> 
    <link rel="stylesheet" href="size.css" type="text/css"/> 

  
  <link href="https://fonts.googleapis.com/css?family=Sansita&amp;subset=latin-ext" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:900i&amp;subset=latin-ext" rel="stylesheet">
  <script src="timer.js"></script>
   


</head>

<body onload="odliczanie();">

<!-- POCZĄTEK | KONTENER STRONY | CAŁA STRONA -->

<div id="caly_blok">

    <!-- POCZĄTEK | LOGO | GORNA CZĘŚĆ STRONY -->

  <div id="first">
      <a href="QWERTY" target="_blank" class="logolink"></a>
    </div>

    <!-- KONIEC | LOGO | GORNA CZĘŚĆ STRONY -->

    <!-- POCZĄTEK | NAGŁÓWEK | GORNA CZĘŚĆ STRONY -->

    <div id="naglowek">
        <a href="index.php">QWERTY</a>
    </div>

    <!-- KONIEC | NAGŁÓWEK | GÓRNA CZĘŚĆ STRONY -->

    <!-- POCZĄTEK | MENU | LEWA CZĘŚĆ STRONY -->

    <div id="lewy">
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="index.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-2-left">
            <div id="blok-1"><a id="link1" href="QWERTY.pdf">QWERTY</a></div>
        </div>
        <div class="blok-size-2-left">
            <div id="blok-1"><a id="link1" href="QWERTY.pdf">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
    </div>

    <!-- KONIEC | MENU | LEWA CZĘŚĆ STRONY -->

    <!-- POCZĄTEK | STRONA GŁÓWNA | ŚRODKOWA CZĘŚĆ STRONY -->

    <div id="srodek">
          <br/>
            QWERTY<br/>
            QWERTY<br/>
            QWERTY<br/>
            <br/>
            <img src="img/zdj1.png" width="600" height="350" />
    
    </div>

    <!-- KONIEC | STRONA GŁÓWNA | ŚRODKOWA CZĘŚĆ STRONY -->

<!-- POCZĄTEK | STATYSTYKI | PRAWA STRONA STRONY -->

    <div id="prawy">
        <div class="blok-size-right">
            <div id="blok-2">Zegar</div>
        </div>
        <div class="blok-size-right">
            <div id="zegar">12:00:00</div>
        </div>

        <div class="blok-size-2-right">
            <div id="blok-2">Licznik odwiedzin</div>
        </div>
        <div class="blok-size-right">
            <div id="blok-3">Dzisiaj: </div>
        </div>
        <div class="blok-size-right">
            <div id="blok-3">Wczoraj: </div>
        </div>
        <div class="blok-size-right">
            <div id="blok-3">Razem: </div>
        </div>
    </div>

<!-- KONIEC | STATYSTYKI | PRAWA STRONA STRONY -->

<!-- POCZĄTEK | STOPKA | DOLNA CZĘŚĆ STRONY -->

    <div id="stopka">
        <a href="QWERTY" target="_blank">QWERTY</a>
    </div>

<!-- KONIEC | STOPKA | DOLNA CZĘŚĆ STRONY -->

</div>
<!-- KONIEC | CAŁY KONTENER STRONY | CAŁA STRONA -->
</body>
</html>

CSS:


#caly_blok {
    min-width:600px;
    max-width:1800px;
    margin-left: auto;
    margin-right: auto;
}

#naglowek {
   padding: 15px;
}

#lewy {
    float:left;
    min-height:800px;
    width:15%;
}

#srodek {
    float:left;
    min-height:800px;
    width:70%;
}

#prawy {
    float:left;
    min-height:800px;
    width:15%;
}

#stopka {
    clear:both;
    font-size: 20px;
    padding: 20px;
}
.blok-size-right  {
     margin-left: auto;
     margin-right: auto;
     display: block;
     margin-top: 10px;
     max-height: 35px;
     max-width: 200px;
     padding: 10px;
     border: 1.5px solid rgba(0, 0, 0, 1);
}
.blok-size-2-right  {
     margin-left: auto;
     margin-right: auto;
     display: block;
     margin-top: 10px;
     max-height: 75px;
     max-width: 200px;
     padding: 10px;
     border: 1.5px solid rgba(0, 0, 0, 1);
}
.blok-size-left a {
     margin-left: auto;
     display: block;
     margin-right: auto;
     margin-top: 10px;
     max-height: 35px;
     max-width: 150px;
     min-width: 160px;
     padding: 10px;
     border: 1.5px solid rgba(0, 0, 0, 1);
}
.blok-size-2-left a {
     margin-left: auto;
     display: block;
     margin-right: auto;
     margin-top: 10px;
     max-height: 75px;
     max-width: 150px;
     min-width: 160px;
     padding: 10px;
     border: 1.5px solid rgba(0, 0, 0, 1);
}
#blok-1 a:hover {
     border: 1.5px solid rgba(0, 0, 0, 1);
}
#blok-2 :hover{
    border: 1.5px solid rgba(0, 0, 0, 1); 
}
#naglowek a:hover {
   padding: 12px;
}
#stopka a:hover {
   padding: 2px;
}
a.logolink
{
   display: block;
   width: 200px;
   height: 200px; 
}
#first
{
   margin-left: auto;
   margin-right: auto;
   width: 200px;
   height: 200px;
   margin-bottom: 20px; 
}

CSS2:

body{
     font-family: 'Sansita', sans-serif;
     background-color: #CCB986;
}
#first
{
   background-image: url(img/logo2.png);
}
#naglowek {
   background-color: #663300;
   color: white;
   text-align: center;
   font-family: 'Sansita', sans-serif; 
   font-size: 40px;
}

#lewy {
    font-size: 25px;
}

#srodek {
    text-align: center;
    color: white;
    font-size: 30px;
}

#prawy {
    font-size: 25px;
}

#stopka {
    text-align:center;
    background-color: #663300;
    color: white;
    text-align: center;
    font-size: 20px;
}
.blok-size-right  {
     color: white;
     font-weight: bold;
     text-align: center;
     background-color: #663300;
}
.blok-size-2-right  {
     color: white;
     font-weight: bold;
     text-align: center;
     background-color: #663300;
}
.blok-size-left a {
     font-weight: bold;
     text-align: center;
     background-color: #663300;
}
.blok-size-2-left a {
     font-weight: bold;
     text-align: center;
     background-color: #663300;
}
#blok-1 a:hover {
     color: #663300;
     background: white;
     text-decoration: none;
}
#blok-2 :hover{
    color: #663300;
    background: white;
    text-decoration: none;
}
#blok-3{
  text-align: left;
}
#naglowek a:hover {
   color: #663300;
   background: white;
   text-decoration: none;
}
#stopka a:hover {
   color: #663300;
   background: white;
   text-decoration: none;
}
a:link
{
   color: white;
   text-decoration: none;
}
a:visited
{
   color: white;
   text-decoration: none;
}
a:hover
{
   color: #white;
   text-decoration: none;
}
a:active
{
   color: white;
   text-decoration: none;
}
a.logolink
{
   color: #ffffff;
   text-decoration: none;
}

 

 

PS.

Sory że tak wszystko osobno ale to dlatego, że lubię porządek :) (formatowanie osobno, wielkość skalowanie osobno :) )

komentarz 2 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Po pierwsze to ludziska tutaj zlinczują cie za to że do stylizowania (i to wielokrotnie) różnych elementów używasz id zamiast class:

<div id="lewy">
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="index.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-2-left">
            <div id="blok-1"><a id="link1" href="QWERTY.pdf">QWERTY</a></div>
        </div>
        <div class="blok-size-2-left">
            <div id="blok-1"><a id="link1" href="QWERTY.pdf">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div id="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
    </div>

a powinno być coś w ten deseń:

<div class="lewy">
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="index.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
        <div class="blok-size-2-left">
            <div class="blok-1"><a id="link1" href="QWERTY.pdf">QWERTY</a></div>
        </div>
        <div class="blok-size-2-left">
            <div class="blok-1"><a id="link1" href="QWERTY.pdf">QWERTY</a></div>
        </div>
        <div class="blok-size-left">
            <div class="blok-1"><a id="link1" href="QWERTY.php">QWERTY</a></div>
        </div>
    </div>

 

Po drugie <img src="img/zdj1.png" width="600" height="350" />  to też powinno być wystylizowane w CSS

Po trzecie div wew nie powinny wypływać poza diva zew.

 

A tak na poważnie to według ciebie co powinno się stać gdy elementy nie mieszczą się na szerokość - zniknąć, przejść poniżej, kurczyć się itd.?

komentarz 3 marca 2017 przez LeeTomahawk Początkujący (250 p.)
edycja 3 marca 2017 przez LeeTomahawk
Nie wspomniałem ze dopiero zaczynam,  mój kod nie będzie idealny....

Poprawie to co mi powiedziałes ale nadal nie rozumiem czemu to tak ucieka.  Możesz jakios mi to wytłumaczyć?
komentarz 3 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Spoko ja akurat to mogę sobie wyobrazić że ktoś zaczyna i to nie jest dla mnie problem ;) i ja ciebie nie osądzam nawet jakby to tak zabrzmiało ale ok.

Problem jest taki że podzieliłeś na 3 kolumny 15%, 70%, 15% i wydaje się że to jest spoko bo w pierwszej chwili wsio wygląda ok... schody zaczynają się gdy ekran jest coraz węższy bo tak jak wspomniałeś na chodzi jeden div na drugi. Jest to spowodowane faktem że ustawiłeś na sztywno wielkość (tu rozpatrujemy akurat szerokość) elementów w środku tych div'ów tzn. m. in.:

<img src="img/zdj1.png" width="600" height="350" />
.blok-size-left a {
     margin-left: auto;
     display: block;
     margin-right: auto;
     margin-top: 10px;
     max-height: 35px;
     max-width: 150px;
     min-width: 160px;
     padding: 10px;
     border: 1.5px solid rgba(0, 0, 0, 1);
}

Jak widać wyżej twój zapis jest błędny max 150px a min 160px? Więc divy te się nie kurczą bo mają zapis na sztywno a div nadrzędny jest % więc zależny od szerokości. A domyślnie jest tak żę jak div wew (child) jest większy niż nadrzędny ( parent) to wypływa. Jako test spróbuj tam dodać do #lewy overflow: hidden;

komentarz 3 marca 2017 przez LeeTomahawk Początkujący (250 p.)
Czyli podsumowując muszę poprawić te sztywne wielkości? I wywalić to zdj do CSS?

A co z tymi % to w końcu dobrze czy nie? Jeśli nie to w jaki sposób mam to podzielić.
komentarz 3 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Najpierw musisz odpowiedzieć na pytanie:
 

A tak na poważnie to według ciebie co powinno się stać gdy elementy nie mieszczą się na szerokość - zniknąć, przejść poniżej, kurczyć się itd.?

komentarz 3 marca 2017 przez LeeTomahawk Początkujący (250 p.)
Rozumiem ze to ma dotyczyć tego co chce żeby się w moim projekcie działo,  wiec chciałbym żeby się jakoś w miarę kurczylo.  Jedno pod drugim brzydko by wyglądało.

2 odpowiedzi

0 głosów
odpowiedź 3 marca 2017 przez hoktaur Pasjonat (22,250 p.)
edycja 4 marca 2017 przez hoktaur
 
Najlepsza

Poklikałem i takie coś mi wyszło:
 

<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   
  <title>ASD</title>
   
  <meta name="description" content="" />
  <meta name="keywords" content="" />
   
 <!--  <link rel="stylesheet" href="style.css" type="text/css"/> 
    <link rel="stylesheet" href="size.css" type="text/css"/> 
 -->
   
  <link href="https://fonts.googleapis.com/css?family=Sansita&amp;subset=latin-ext" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:900i&amp;subset=latin-ext" rel="stylesheet">
  <script src="timer.js"></script>
    
	<style>
	
		body {
			font-family: 'Sansita', sans-serif;
			background-color: #CCB986;
			font-size: 13px;
		}
		
		@media screen and (min-width: 770px) {
			body {
				font-size: 20px;
			}
		}
		
		@media screen and (min-width: 910px) {
			body {
				font-size: 25px;
			}
		}
		
		.logo {
		   margin-left: auto;
		   margin-right: auto;
		   width: 200px;
		   height: 200px;
		   margin-bottom: 20px; 
		}
		
		.container {
			min-width:600px;
			max-width:1800px;
			margin-left: auto;
			margin-right: auto;
		}
		
		.header {
			padding: 15px;
			background-color: #663300;
			color: white;
			font-family: 'Sansita', sans-serif; 
			font-size: 40px;
		}
		
		.left,
		.right {
			width: 15%;
		}
		
		ul {
			padding-left: 0px;
		}
		
		li {
			color: white;
			font-weight: bold;	
			background-color: #663300;
			list-style-type: none;
			margin-left: auto;
			margin-right: auto;
			margin-top: 10px;
			max-height: 35px;
			max-width: 150px;
			padding: 4%;
			border: 1.5px solid rgba(0, 0, 0, 1);
		}
		.left li {
			max-width: 150px;
		}
		.right li {
			max-height: 75px;
			max-width: 200px;
		}
		.left li:hover {
			background: white;
     	}
		.left li:hover a {
			color: #663300;
		}
		
		.center {
			width: 70%;
		}
		
		.footer {
			background-color: #663300;
			color: white;
			text-align: center;
			font-size: 20px;
			padding: 20px;
		}
		
		.floatLeft {
			float: left;
		}	
		
		.textCenter {
			text-align: center;
		}
		
		a {
			color: white;
			text-decoration: none;
		}
		
		img {
			width: 90%;
			margin: 15px;
            border: 1px solid black;
            height: 300px;
		}
		
	</style>
 
</head>
 
<body>
 
	<!-- POCZĄTEK | KONTENER STRONY | CAŁA STRONA -->
	 
	<div class="container textCenter">
	 
		<!-- POCZĄTEK | LOGO | GORNA CZĘŚĆ STRONY -->
	 
		<div class="logo">
			<a href="QWERTY" target="_blank" class="logolink"></a>
		</div>
	 
		<!-- KONIEC | LOGO | GORNA CZĘŚĆ STRONY -->
	 
		<!-- POCZĄTEK | NAGŁÓWEK | GORNA CZĘŚĆ STRONY -->
	 
		<div class="header">
			<a href="index.php">QWERTY</a>
		</div>
	 
		<!-- KONIEC | NAGŁÓWEK | GÓRNA CZĘŚĆ STRONY -->
	 
		<!-- POCZĄTEK | MENU | LEWA CZĘŚĆ STRONY -->
	 
		<div class="left floatLeft">
			<ul>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
				<li><a href="index.php">QWERTY</a></li>
			</ul>
		</div>
	 
		<!-- KONIEC | MENU | LEWA CZĘŚĆ STRONY -->
	 
		<!-- POCZĄTEK | STRONA GŁÓWNA | ŚRODKOWA CZĘŚĆ STRONY -->
	 
		<div class="center floatLeft">
			<p>QWERTY</p>
			<p>QWERTY</p>
			<p>QWERTY</p>
			<img src="" />
		</div>
	 
		<!-- KONIEC | STRONA GŁÓWNA | ŚRODKOWA CZĘŚĆ STRONY -->
	 
		<!-- POCZĄTEK | STATYSTYKI | PRAWA STRONA STRONY -->
	 
		<div class="right floatLeft">
			<ul>
				<li>Zegar</li>
				<li>12:00:00</li>
				<li>Licznik odwiedzin</li>
				<li>Dzisiaj: </li>
				<li>Wczoraj: </li>
				<li>Razem: </li>
			</ul>
		</div>
	 
		<!-- KONIEC | STATYSTYKI | PRAWA STRONA STRONY -->
	 
		<div style="clear: both;"></div>
	 
		<!-- POCZĄTEK | STOPKA | DOLNA CZĘŚĆ STRONY -->
	 
		<div class="footer">
			<a href="QWERTY" target="_blank">QWERTY</a>
		</div>
	 
		<!-- KONIEC | STOPKA | DOLNA CZĘŚĆ STRONY -->
	 
	</div>
	<!-- KONIEC | CAŁY KONTENER STRONY | CAŁA STRONA -->
</body>
</html>

 

komentarz 4 marca 2017 przez LeeTomahawk Początkujący (250 p.)
Stary coś zajeb***!! Tylko możesz mi wytłumaczyć teraz co dodałeś, że to tak ładnie wygląda i się skaluje? :)
komentarz 4 marca 2017 przez hoktaur Pasjonat (22,250 p.)
Dobra już usunąłem jak by ktoś się rzucał :)

Widzisz użyłem:

- class

- usunąłem zbędne elementy

- zoptymalizowałem CSS

- zastosowałem listę żeby wyeliminować <br />

- twój podział w CSS doprowadzał mnie trochę do szału bo jak chciałem coś zmienić w jednym elemencie to szukałem po całym kodzie) :)

- użyłem @media do zmiany czcionki w zależności od szerokości

- no i ... posiedziałem trochę nad tym :D

- jeszcze chciałem usunąć zbędne komentarze ale uznałem że mogą być dla ciebie ważne

Wiem że dało by się to jeszcze trochę lepiej poprawić ale już mi się nie chciało i nie byłem pewny co dalej z tym będziesz robił....
komentarz 4 marca 2017 przez LeeTomahawk Początkujący (250 p.)

Dzięki super. Tylko mam teraz taki problem ze jak to dodałem na serwer i odpalam na telefonie to pokazuje jedno pod drugim i tylko tekst, kolorki te tabele nie istnieją tak jakby..

Wiesz dlaczego tak sie dzieje? :) PS. Już nie ważne wystarczyło ciasteczka wyczyścić :)

0 głosów
odpowiedź 2 marca 2017 przez Patryk Rafał Bywalec (2,700 p.)
dużo zbędnego kodu lepiej wklej to tu http://cssdeck.com/labs

Podobne pytania

0 głosów
0 odpowiedzi 1,256 wizyt
0 głosów
2 odpowiedzi 329 wizyt
pytanie zadane 6 grudnia 2015 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 738 wizyt

92,757 zapytań

141,679 odpowiedzi

320,441 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...