Wątek przeniesiony 2016-08-25 14:00 z Webmastering przez dzek69.

Dlaczego max-width nie działa?

0

Mam taki oto prosty kod html

<!DOCTYPE html>
<html lang = "pl">

 <head>
   <title>Nord Team service</title>
   <meta charset = "utf-8">
   <meta name= "viewport" content="width=device-width, initial-scale=1">
   <meta name= "description" content = "Ogrzewanie, wentylacja, klimatyzacja, kotły">
  <link rel="stylesheet" href="stylerocco.css">
 </head>
 
 <body>
    <div id = "szczyt">
     	   <div style = "float : left"><img src = "logo_rocco.jpg" alt = "Nord Team service"/></div>
		   <div class = "przycisk-nawigacji" ><a href = "nowosci.html" >NOWOŚCI</a></div>
		   <div class = "przycisk-nawigacji" ><a href = "nowosci.html" >SERWIS</a></div>
		   <div class = "przycisk-nawigacji"><a href = "nowosci.html" >SKLEP</a></div>
		   <div class = "przycisk-nawigacji"><a href = "nowosci.html" >KONTAKT</a></div>
    </div>

</body>
</html>

I kod css :

 body {
 background-color : gray;
}

#szczyt { 

width : 90%; 
margin : 0 auto;

height : 63px;

}

.przycisk-nawigacji 
{
max-width : 150px;
height : 62px;
 color : black;
text-align : center;
font-size : 21px;
line-height : 62px;
background-color : #3c5a8e;
float : left;
}

a {text-decoration : none;
  color : black;

}

I divy zachowują się tak jakby chciały się maksymalnie ścisnąć a nie rozszerzyć do wskazanych 150px. Dlaczego?

1

Ponieważ max-width mówi o maksymalnej szerokości. Użyj po prostu width i będziesz miał :)
BTW Masz firmę która zajmuje się ogrzewaniem, wentylacją, klimatyzacją i kotłami?
A i w ogóle mógłbym zapytać po co używasz float? Taka dobra praktyka na przyszłość. Jeśli nie jest to absolutnie konieczne, nie używaj ich bo przyniosą Ci więcej szkody niż pożytku. Trzymaj bez float'ów. https://jsfiddle.net/r3mzr7x2/1/

0

A czy div nie powinien przypadkiem rozpychać się do swoich maksymalnych rozmiarów?
Firmy z kotłami nie mam, ale kolega ma.

0

<div> ma domyślne display: block, a z tego, co wiem, nie polega on na rozpychaniu się do maksymalnych rozmiarów, tylko na zakazowi wyświetlania z innymi obiektami w jednej linii.

EDIT Po drobnych poszukiwaniach:
Domyślnie elementy blokowe zaczynają się w nowej linii, podczas, gdy inline mogą zacząć się w dowolnym miejscu w linii. Jeżeli chodzi o zawartość, to najczęściej block może zawierać elementy inline i inne bloki, podczas gdy inline może zawierać w sobie tylko inne inline.

0

Na w3schools piszą co innego

Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The

element is a block-level element.
Examples of block-level elements:</p>

http://www.w3schools.com/html/html_blocks.asp

1 użytkowników online, w tym zalogowanych: 0, gości: 1