Css+html layout

Threaded Mode | Linear Mode

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 site Big 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

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

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

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 site Big 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

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 invatat Wink

My portofolio

08-24-2008 07:37 PM

« Next Oldest | Next Newest »

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

Forum Jump: