tutoriale photoshop, brushes, patterns, gradient
Site afiliat proiectului Wtricks.com
   
   
  REGULAMENT | Search | Members | Calendar | Help  
 


Post Reply  Post Thread 
Css+html layout
Author Message
FrozenDesigns
Designer
******


Posts: 477
Group: Registered
Joined: Feb 2008
Status: Offline
Reputation: 0
Lei: 1474.15
Post: #1
Css+html layout

Am vazut ca tot mai multi invatacei vin aici si nu stiu sa faca un siteBig Grin... as vrea sa le dau un foarte simplu cod pe care trebuie sa-l puna intr-un fisier html.
1.Click dreapta pe desktop, NEW-> NEW Text file
2.Dupa ce so deschis notepad Dati save-as: si la nume scrieti: index.html
3.Dupa ce am salvat index.html, ne uitam pe desktop dupa el si dam click dreapta si open with notepad si acolo puneti acest cod:

Code:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #2.1- (Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.1- (Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>

Dupa asta dam CTRL+S (SAVE), si il deschideti...rezultatul va fi cam asa:
http://frozendesigns.net/proba.html

PS: Daca vreti sa puneti imagini in  loc de culori, exemplu: menu,background,content puneti: background-image: url(images/poza.jpg);

Sper ca va fost de folos


My portofolio
08-22-2008 06:30 PM
Find all posts by this user Quote this message in a reply
Valoo
Designer incepator
*****


Posts: 341
Group: Registered
Joined: Oct 2007
Status: Offline
Reputation: 2
Lei: 1115.58
Post: #2
RE: Css+html layout

tot ce este intre

Code:
<style type="text/css"></style>

se ia si se pune intr-un fisier pe care il numiti [strong]nume.css[/strong]. apoi intre

Code:
<head></head>

adaugati linia urmatoare:

Code:
<link rel="stylesheet" type="text/css" href="nume.css" >


Cheia succesului este munca si credinta in Dumnezeu.
Blog
08-22-2008 07:10 PM
Visit this users website Find all posts by this user Quote this message in a reply
ctlinf
De al casei
***


Posts: 75
Group: Registered
Joined: Aug 2008
Status: Offline
Reputation: 0
Lei: 377.9
Post: #3
RE: Css+html layout

Foarte foarte bun, cred ca am depasit perioada asta dar e foarte bun. Wink

08-24-2008 08:19 AM
Find all posts by this user Quote this message in a reply
comosicus22
Designer incepator
*****


Posts: 207
Group: Registered
Joined: Apr 2008
Status: Offline
Reputation: 0
Lei: 2295.78
Post: #4
RE: Css+html layout

FrozenDesigns Wrote:
Am vazut ca tot mai multi invatacei vin aici si nu stiu sa faca un siteBig Grin... as vrea sa le dau un foarte simplu cod pe care trebuie sa-l puna intr-un fisier html.
[b]1.Click dreapta pe desktop, NEW-> NEW Text file
2.Dupa ce so deschis notepad Dati save-as: si la nume scrieti: index.html
3.Dupa ce am salvat index.html, ne uitam pe desktop dupa el si dam click dreapta si open with notepad si acolo puneti acest cod:

Sper ca va fost de folos


Asa si??????
Nu era mai usor sa dai linkul.
Or sa creada unii invastacei ca tu chiar stii ce inseamna chestiile alea de acolo si nu ar fi corect.

This post was last modified: 08-24-2008 06:37 PM by comosicus22.

08-24-2008 06:36 PM
Find all posts by this user Quote this message in a reply
FrozenDesigns
Designer
******


Posts: 477
Group: Registered
Joined: Feb 2008
Status: Offline
Reputation: 0
Lei: 1474.15
Post: #5
RE: Css+html layout

comicious22 spre dezamagirea ta chiar stiu codurile alea si dupa tutoriale de genul asta am invatatWink


My portofolio
08-24-2008 07:37 PM
Find all posts by this user Quote this message in a reply
Post Reply  Post Thread 

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites

Forum Jump:

 

 Invatam Net
Esti nou pe aici? Vorbeste-ne despre tine.
Citeste articole si tutoriale unice.
Ai un site? Iti putem oferi un review.

  Parteneri

  


-->