home > tutoriale > html-css > design-o-pagina-simpla-3-coloane.php

Cum sa faci o Pagina Web pe 3 coloane

3 Octombrie 2010 de Mihail Alin

In acest tutorial va voi arata cum sa faceti un simplu design pe 3 coloane.

tutorial pagini web
Autor :   Mihail Alin

HTML

Mai intai o sa scriem codul HTML pentru toata pagina.

<html>
<head>
<title>Design pagina 3 coloane</title>
<!-- tragem fisierul CSS -->	  
<link href="styles.css" type="text/css"/>
</head>
<body>
<div id="container">

	<div id="header">
		<h1>Tutorial Rotuts.com</h1>
	</div><!--/header-->
	
	<div id="stanga">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Buletin</a></li>
			<li><a href="#">Poze</a></li>
			<li><a href="#">Despre</a></li>
			<li><a href="#">Cum si cand</a></li>
			<li><a href="#">Sitemap</a></li>
			<li><a href="#">Internet</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div><!--/stanga-->
	
	<div id="dreapta">
	
		<a href="#"><img src="../images/butoane/120x240vertical.png"/></a>
		
	</div><!--/dreapta-->
	
	<div id="mijloc">
	
		<h3>Un OZN a fost observat ....</h3>
		
		<small>Postat de Mihail Alin pe data de 4 Martie 2010</small>
		
		<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
		<br /><br />
		
		<h3>Tutorial : cum sa faci un web-site</h3>
		
		<small>Postat de Mihail Alin pe data de 4 Martie 2010</small>
		
		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		<br /><br />
		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		<br /><br />
		
		<h3>Maine la ora 15:00 o sa fie eclipsa</h3>
		
		<small>Postat de Mihail Alin pe data de 4 Martie 2010</small>
		
		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
	</div><!--/mijloc-->
	
</div><!-- /container -->

	<div id="footer">

		<ul id="left">
			<li><a href="#">RSS</a></li>
			<li><a href="#">FEED</a></li>
			<li><a href="#">Subscribe</a></li>
		</ul>
	
		<p id="right">
			Copyright © 2009 , Rotuts.com
		</p>
	</div><!--/footer-->
</body>
</html>
	  
	  

Dupa cum puteti observa este un design relativ simplu , fara CSS pagina arata asa :

CSS

Ok acum am terminat cu HTML-ul , ne mai ramane css-ul :)).Deschidem un nou fisier si il numim styles.css,cel putin asa o sa il numesc eu ,voi puteti sa il numiti cum doriti.
Ok, prima data trebuie sa resetam valorile default ale navigatoarelor pentru toate etichetele care le folosim pe pagina, pentru a avea control absolut asupra prezentarii .Pentru cei care nu stiu despre ce vorbesc, navigatoarele adauga padding si margin automat de exemplu, nu avem nevoie de ajutorul lor :P.Dupa care alegem un font pentru toata pagina,in general :

	  
/* RESET - resetam valori default ale navigatoarelor*/

html, body, div, ul, li, small, img, p, h1, h2, h3
{
	padding:0;
	margin:0;
	border:none;
}
/* alegem un font pentru toate pagina , in general */

body{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
	  

Haideti sa trecem la treburi mai serioase, acum am dori sa centram pagina, pentru a reusi acest lucru vom specifica o latime a div-ului #container,acest div este foarte important pentru ca este stalpul de sustinere a intregii pagini (excluzand footerul),dupa care vom folosi propietatea margin pentru a centra.

	  
	#container{
	width:850px;
	margin:0 auto; /*centram pagina , IMPORTANT , trebuie specificata o latime pentru a putea centra pagina*/
	height:auto;
	border:2px solid #F0F;
	overflow:hidden;
}
	  
	  

Acum urmeaza header-ul

	  
/*Header*/
#header{
	border:2px solid #000;
}
#header h1{
	font-size:2.5em;
	text-align:center; /*centram textul*/
	padding:15px 0 15px 0; /*indepartam textul de marginea superioara si inferioara a fiv-ului #header , sus - dreapta - jos - stanga */
	text-shadow:#000 1px 1px 2px; /* Propietate CSS level 3 , cu ajutorul acestei propietati textul va parea ca si cum i-am fi aplicat bold si o usoara umbra in partea inferioara*/
}
	  
	  

Partea stanga a paginii este de fapt , meniul paginii.Dupa cum puteti vedea in codul HTML este facut dintr-o lista.Cea ce vom face in primul rand este sa scapam de bulinutele din fata fiecarui list item, folosim propietatea float:left pentru a o pozitiona pe partea stanga a div-ului #container.De asemenea vom mai aplica margin si padding , vom anula efectul default de text subliniat din linkuri , etc.

	  
/*   STANGA   */
#stanga{
	width:100px;
	float:left;
	border:1px solid #000;
	height:auto;
}
#stanga ul{
	list-style-type:none;
	padding:5px 0 5px 8px;
}

#stanga ul li{
	padding:3px 0 3px 0;
}
#stanga ul a{
	text-decoration:none;
	font-size:15px;
	color:#0CF;
	font-weight:bold;
}
/*  ASTA DACA VA INTERESEAZA */
#stanga ul a:hover{
	text-decoration:underline;
	color:#06F;
}
	  
	  

Acum urmeaza partea dreapta.O sa ii ajustam valorile pentru a avea o latime de 130 de pixeli, cu height:auto spunem navigatoarelor ca inaltimea acestui DIV depinde de cantitatea de continut si o vom pozitiona pe partea dreapta cu propietatea "float".

	  
/*   DREAPTA    */
#dreapta{
	float:right;
	width:130px;
	border:1px solid #000;
	height:auto;
}

#dreapta img{
	padding: 5px 5px 5px 5px;
}
	  
	  

Partea principala a paginii, div-ul "mijloc".Latimea acestui div o scoatem din valoarea totala a div-ului #container ( 850px ) minus cele 2 div-uri ( #stanga si #dreapta ) minus toate marginile si padding-urile acestor 2 div-uri.
Daca schimbati valorile de margin si padding , calculati si schimbati si latimea acestui div,altfel o sa intrati intr-o incurcatura :).
Restul sunt pentru prezentarea textului in acest din , puteti sa modificati fara probleme.

	  
/* MIJLOC   */
#mijloc{
	width:594px;
	float:right;
	height:auto;
	padding:10px;
	border:1px solid #F00;
}

#mijloc h3{
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	color: #3c3f40;
	font-size:1.4em;
}
#mijloc small{
	font-size:0.8em;
}
#mijloc p{
	line-height: 1.3em;
	padding: 7px 0; 
	font-size: 1em;
}

	  
	  

Acum urmeaza footerul, nu mai e nevoie de explicatii ....

	  
/* FOOTER */
#footer{
	margin-top: 2px; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	padding-left:15px;
	padding-right:15px;
    /* sau padding:10px 15px 10px 15px; sintaxa: padding: top right bottom left; */
	border: 2px solid #1e956c;
	overflow:hidden;
	width:820px;
	margin:0 auto;
	margin-top:5px;

}

#left{
	float:left;
	width:50%;
	list-style-type:none;
}
#left a{
	text-decoration:none;
	font-size:15px;
	font-weight:bold;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	color:#000;
}
#right{
	float:left;
	width:50%;
	text-align:right;
	font-weight:bold;
	font-size:15px;
}
	  
	  

Gata.Sper ca va va fi folositor acest tutorial, mai multe de genul o sa urmeze.
Ah, da, era sa uit . Aici este un link catre pagina demo.Nu arata cine stie ce, in special pentru faptul ca am pus border la fiecare DIV, dar consider ca veti observa mai bine pozitionarea lor astfel.Am incercat sa fac designul cat mai simplu posibil, va puteti juca voi cu el, sa puneti culori de background,etc.



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria HTML & CSS

  Cum sa creezi litere capitale/majuscule cu CSS   -   CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Centrarea paginii cu CSS   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa creezi litere capitale/majuscule cu CSS   -   Un simplu meniu in CSS si HTML   -   Centrarea paginii cu CSS   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

2 comenturi pana acum... (posteaza si tu)

Salut Andu , dupa cum am facut acest tutorial trebuie sa socotesti absolut toate marginile si padding/ul , altfel o sa iasa o dezordine totala ,insa de asemenea poti folosi > overflow:hidden;, acest lucru ar trebui sa faca toate partile care "ies" din latimea specificata sa fie "ascunse" . Incearca asa si vezi daca merge.

Postat de Mihail Alin pe data de: Friday, 12.3.10 @ 14:45pm

Salut si multumesc pentru acest tutorial asa frumos explicat.Am totusi o intrebare..
"Latimea acestui div o scoatem din valoarea totala a div-ului #container ( 850px ) minus cele 2 div-uri ( #stanga si #dreapta ) minus toate marginile si padding-urile acestor 2 div-uri.
"
daca in interiorul unui oricare div definesc un paragraf, sau un alt div la care ii dau o margine , sau un padding de o anumita valaore (left sau right) aceea valoare o socotesc si pe ea la ce mi-ai spus mai sus?
bine as putea sa calculez pas cu pas ca sa vad cum ai facut tu ( am sa si o fac ) insa imi place ca atunci cind nu sunt sigur de ceva sa intreb.
multumesc anticipat!

Postat de andu pe data de: Sunday, 11.14.10 @ 15:55pm

Comentarii:

Nume:

Email:

Comentariu:


 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...

 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s


 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.