Nieruchome divy.

[xBigMichau]

Robię stronę na informatykę. I potrzebuje pomocy ... nauczyciel uwziął się aby strona była zbudowana z divów. Chodzi o to żeby stworzyć płynny szablon do strony. Tzn tak żeby wszystkie elementy zmniejszały/zwiększały się w określony sposób. No i z tym nie było problemu. Chciałbym jednak aby moja strona miała zablokowaną stopkę i nagłówek. Tzn żeby nie przemieszczały się one i zostawały w miejscu. A zawartość strony miałaby przesuwać się między nimi.

 

tak jak tutaj:

https://css-tricks.com/examples/BodyBorder/

 

Kod HTML do przykładu wyżej:

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

Kod CSS do przykładu wyżej:

#top, #bottom, #left, #right {
	background: #a5ebff;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 15px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 15px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }

Tu kod HTML do mojej strony:

<div id="naglowek"></div>
<div id="menu"></div>
<div id="ramka">
		<div id="kol01"></div>
		<div id="kol02"></div>
</div>
<div id="stopka"><p class="stopka">Copyright © 2015</p></div>

Kod CSS do mojej strony:

div {border: doted 1px; 
	margin: 1px; 
	padding: 0; 
	overflow: hidden; 
	background-color: red; 

}

  html, body {
    margin:0;
    padding:0;
  }

  html {
    height: 100%;
  }

  body {
     min-height: 100%;
    position:relative;
  }
  
  
	div#ramka {min-width: 70%; 
				max-width: 100%;
				height: 100%;
				float: auto;
				margin-left: 10%;
				margin-right: 10%;
				margin-top: 20px;				
				background-color: white;
}


	div#naglowek {background-color: #1e1e1e;
				width: 100%;
				height: 80px;
				position: relative; 
				top: -2px;
				margin: 0;
				color: white;
				box-shadow: 0 2px 10px 2px #717171;
				font-family: Lucida Grande;
				font-size: 12px;
}

	div#menu {min-width: 15%;
				max-width: 100%;
				height: 20px;
				float: auto;
				margin-top: 30px;


}

	div#kol01 {min-width: 40%;
				max-width: 50%;
				background-color: white; 
				float: left;
				margin-right: 10%;
				border-color: maroon; 
				border-style: dotted;
}


	div#kol02 {min-width: 40%;
				max-width: 50%;
				background-color: white; 
				float: left;
				border-color: maroon; 
				border-style: dotted;
}
	div#stopka {background-color: #1e1e1e;
				position: absolute;
				bottom: -2px;
				width: 100%;
				height: 20px;
				box-shadow: 0 -2px 10px 2px #717171;
				margin: 0;
				color: white;
				font-size: 10px
}

Czy ktoś jest w stanie mi pomóc? W jaki sposób mam to połączyć, i czy tak się da?

 

 

//Próbowałem tak zrobić ... ale za każdym razem divy, które tworzyły zawartość mojej strony nie pokazywały się.

I na mojej stronie nie potrzebne mi te divy które ograniczają stronę z lewej i prawej strony. Potrzebuję tylko nagłówek i stopkę.

 

 

 

 

PS Do pobrania szablon strony, która się skaluje.

strona.rar

[xBigMichau]

Nikt na całym forum tego nie potrafi? :P

[xBigMichau]

Sam sobie poradziłem. Do zamknięcia.