Tutoriale Web Design, Wordpress si SEO

Tutoriale Web Design:CSS, Dreamweaver, Photoshop, Web 2.0 dar si Tutoriale Wordpress si SEO

CSS frame stanga

Autor admin • Apr 27th, 2007 • Categorie: Tutoriale CSS • Comentarii « 1 Comentariu »

Realizarea unui layout cu frame folosind CSS nu este foarte greu de realizat. Pentru a va ajuta am realizat un mic model pentru a va usura munca. Daca aveti intrebari anuntati-ma.

CSS left frame layout

Model CSS frame

Codul CSS consta in:

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; /*Width a frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Seteaza “scroll” pentru a fi enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 200px; /*Seteaza valoare left to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

.secondcontent{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

In Codul HTML, in body avem:

<div id=”framecontent”>
<div class=”secondcontent”>

<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>

</div>
</div>
<div id=”maincontent”>
<div class=”secondcontent”>

<h1>Ana Design Tutoriale CSS</h1>
</div>
</div>

Succes la CSS !

Articole asemanatoare:

  • Frame-uri in Dreamweaver
  • Frame-uri in Dreamweaver II
  • Marginile CSS
  • Link-uri in Dreamweaver
  • Padding CSS

    • admin is Ana Design. V-a placut tot ce v-am recomandat in tutorial? Atunci nu uitati sa faceti un link catre articol si bookmark it!
    Email this author | Toate articolele scrise de admin

    This entry was posted on Friday, April 27th, 2007 at 5:46 pm and is filed under Tutoriale CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    un Comentariu »

    1. Tutoriale Web Design by Ana Design » Blog Archive » Frame-uri in Dreamweaver on July 25th, 2007 at 1:52 am:

      […] post anterior v-am aratat cum se poate construi un site cu frame-uri doar din CSS, acum am sa incerc sa va explic o alta varianta, folosind […]

    Lasa un comentariu sau Parerea ta despre acest subiect

    Trebuie sa te autentifici pentru a lasa un comentariu.