Kursy Programowania i Tworzenia stron WWW

Forum programowania i tworzenia stron WWW na podstawie video kursów ze strony videokurs.pl
https://forum.videokurs.pl/

Podział strony na 3 części

https://forum.videokurs.pl/viewtopic.php?t=563

Strona 1 z 1

Podział strony na 3 części

Napisane: piątek, 5 lipca 2013, 15:49
przez noob
Oto nad czym pracuje. http://test-nauka.strefa.pl/

Code: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" land"pl">
	<head>
		
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Ustawia kodowanie  -->
		<meta http-equiv="content-language" content="pl" /> <!-- Ustawia język→  -->
		
		<meta name="robots" content="noindex, follow" />
		
		<title>Strefa-Mangi</title>
		<meta name="description" content="Serwis poświęcony mangom i nie tylko" /> <!-- description oznacza opis strony -->
		<meta name="keywords" content="manga" /> <!-- słowa kluczowe do wyszukiwania -->
		
		<style type="text/css">
			/*<![CDATA[*/
			
			*
			{
				padding: 0;
				margin: 0;
			}
			
			body
			{
				background-color: black;
				background-image: url('images/bottom_texture.jpg');
				background-repeat: repeat;
				background-attachment: fixed;
			}
			
			div.kontener
			{
				width: 1100px;
				margin: 0 auto;
			}
			#kontener_top_panel
			{
				margin-top: 20px;
				background-image: url('images/sheet_top.png');
				width: 1100px;
				height: 57px;
			}			
			#kontener_top_obraz
			{
				background-image: url('images/sheet.png');
				width: 1100px;
				background-repeat: repeat-y;
			}
			#kontener_srodek
			{
				position: relative;
				background-image: url('images/sheet.png');
				width: 1100px;
				background-repeat: repeat-y;
			}
			#kontener_bottom_panel
			{
				margin-bottom: 15px;
				background-image: url('images/sheet_bottom.png');
				width: 1100px;
				height: 57px;
			}
			#menu_left
			{
				position: absolute;
				top: 15px;
				left: 25px;
				width: 200px;
				height: 500px;
				border: 2px;
				border-style: solid;
			}
			#menu_middle
			{
				position: absolute;
				top: 15px;
				left: 240px;
				width: 615px;
				height: 500px;
				border: 2px;
				border-style: solid;
			}
			#menu_right
			{
				position: absolute;
				top: 15px;
				right: 25px;
				width: 200px;
				height: 500px;
				border: 2px;
				border-style: solid;
			}
			/*]]>*/
		</style>

	</head>
		<body>
		<!-- górny panel -->
		<div aligin="center">
			<div class="kontener">
				<div id="kontener_top_panel">
					
				</div>
			</div>
		</div>
		<!-- górny obrazek -->
		<div aligin="center">
			<div class="kontener">
				<div id="kontener_top_obraz" align="center">
					<img src="images/front2.png" alt="Strafa-Mangi" />
				</div>				
			</div>			
		</div>
		<!-- środek, zawartość strony -->
		<div aligin="center">
			<div class="kontener">
				<div id="kontener_srodek" align="center">
					
					tutaj się powiększa tło
                                        tutaj się powiększa tło
                                        tutaj się powiększa tło
                                        tutaj się powiększa tło

					<!-- pasek z lewej strony -->
					<div id="menu_left">
						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
					</div>
					<!-- pasek środkowy -->
					<div id="menu_middle">
						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
					</div>	
					<!-- pasek z prawej strony -->
					<div id="menu_right">
						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
					</div>					
				</div>				
			</div>			
		</div>		
		<!-- dolny panel -->
		<div aligin="center">
			<div class="kontener">
				<div id="kontener_bottom_panel">
					
				</div>
			</div>
		</div>
	</body>
</html>
Teraz tak, chce zrobić, żeby tło się powiększało wraz z wzrostem ramki, którą widać na stronie, tak jak sie powiększa tam gdzie wpisuje text.
Chcę zrobić w lewej i prawej ramce, kolejne ramki które będą zawierać np. menu wyszukiwarkę, baner itp
a w środkowym jakieś informacje. Chyba że robi się to inaczej niż divem.

Re: Podział strony na 3 części

Napisane: piątek, 5 lipca 2013, 16:12
przez Morfidon
http://videokurs.pl/forum/x-html-css/au ... -t248.html

Re: Podział strony na 3 części

Napisane: piątek, 5 lipca 2013, 18:10
przez noob

Code: Zaznacz cały

			#menu_left
			{
				margin-left: 10px;
				width: 200px;
				height: 500px;
				border: 2px;
				border-style: solid;
				float: left;
			}
			#menu_middle
			{
				margin-left: 25px;
				left: 240px;
				width: 615px;
				height: 500px;
				border: 2px;
				border-style: solid;
				float: left;
			}
			#menu_right
			{
				margin-right: 10px;
				width: 200px;
				height: 500px;
				border: 2px;
				border-style: solid;
				float: right;
			}

<div aligin="center">
			<div class="kontener">
				<div id="kontener_srodek" align="center">
					<!-- pasek z lewej strony -->
					<div id="menu_left">
						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
					</div>
					<!-- pasek środkowy -->
					<div id="menu_middle">
						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
					</div>
					<!-- pasek z prawej strony -->
					<div id="menu_right">
						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
					</div>
					<div style="clear: both;"></div>		
				</div>				
			</div>			
		</div>
dobra działa mi to, tylko nie rozumiem tej linijki <div style="clear: both;"></div> dlaczego robię osobnego diva a nie pisze w każdym menu_left/tifgt/middle style="clear: both;
bo mi to wygląda na razie że ta linijka tak jakby wciskała te 3 divy, w diva ze środkową zawartością

Re: Podział strony na 3 części

Napisane: piątek, 5 lipca 2013, 23:59
przez Morfidon
Bo chcesz wyczyścić to co znajduje się przed elementem. Gdybyś to wywołał na innym elemencie to by zmienił swoją pozycję względem innych.

Re: Podział strony na 3 części

Napisane: sobota, 6 lipca 2013, 13:19
przez noob
ok, rozumiem
Zrobiłem sobie już prawie wszystko jak chciałem, tylko jeszcze dwie sprawy
Napisów w Menu nie mogę przenieść do lewej strony, są wycentrowane

Code: Zaznacz cały

span.link
			{
				display: inline-block;
				margin-top: 2px;
				margine-right: 30px;				
			}
			span.naglowek
			{
				display: inline-block;
				margin-top: 6px;
				font-weight: bold;
				color: white;
				text-decoration: none;
			}
<!-- menu z lewej strony -->
						<div class="kontener_top">	</div>
						<div class="kontener_middle">
							<dl id="menu">
								<dd><span class="naglowek">MENU</span></dd>
							</dl>
							<ul id="black_button">
								<li> <a href="#"> <span class="link">cos tam</span> </a> </li>
								<li> <a href="#"> <span class="link">cos</span> </a> </li>
								<li> <a href="#"> <span class="link">maskotki</span> </a> </li>
								<li> <a href="#"> <span class="link">zwierzatka</span> </a> </li>
							</ul>							
						</div>
						<div class="kontener_bottom">	</div>
oraz rozwijając pytanie z pierwszego posta, jak się każda z kolumn powiększa przy dodaniu zawartości, to czy mozna zrobić tak że
gdy jedna będzie dłuższa od reszty, to w tedy tamte się do niej przyrównają, czy lepiej ustawić wysokość strony na stałe?

Re: Podział strony na 3 części

Napisane: sobota, 6 lipca 2013, 23:20
przez Morfidon
Lepiej jak zawartość dostosowuje się do ilości tekstu w większości wypadków.
Strefa czasowa: UTC+02:00 UTC+2
Strona 1 z 1

Powered by phpBB® Forum Software © phpBB Limited