Artiklar » (X)HTML/CSS » Konsten att bygga hemsida - del 2

 
 

Konsten att bygga hemsida - del 2

Författare: mactommy
Datum: den 25 juli 2009
Antal lästa: 3557
Ej stjärnmärkt

I förra artikeln http://www.aspsidan.se/default.asp?page=readarticle&artId=665 så visade jag en enkel struktur med "minimalt" med HTML-element. Många sidor idag har valt att köra någon form av reklam på sidan eller ha en meny till vänster, innhåll i mitt och reklam till höger.
Nu tänkte jag att jag skulle visa ett enkelt sätt så att vi behåller samma grundstruktur som tidigare artikel, men med tillägget att vi även vill ha en reklamdel på sidan.Kod:
<div id="wrapper">
  <div id="header">
    <h1>Konsten att bygga en hemsida ifrån grunden - ASPsidan.se</h1>
  </div>
  <div id="menu">
    <h2>Meny</h2>
    <ul>
      <li><a href="start.aspx" title="Start">Start</a></li>
      <li><a href="sida1.aspx" title="Sida 1">Sida 1</a></li>
      <li><a href="sida2.aspx" title="Sida 2">Sida 2</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Konsten att bygga en hemsida ifrån grunden</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it

to make a type specimen book.</p>
  </div>
  <div id="advert">
    <h2>Reklam</h2>
    <div>
      <h3>microsoft.se</h3>
      <p>Microsoft byggde denna värld</p>
    </div>
    <div>
      <h3>ipeer.se</h3>
      <p>Ipeer ser till att servern snurrar.</p>
    </div>
  </div>
  <div id="footer">
    Copyright ASPsidan 2009
  </div>
</div>

Det är all HTML-kod som vi behöver för att leka med CSS.

Det första som jag tänkte visa är hur vi kan använda CSS för att göra en två delad sida med menyn liggande i överkanten under huvudet, Kod:
#content
{
  float: left;
  width: 800px;
}

#advert
{
  float: left;
  width: 200px;
}


#footer
{
  clear: both;
}

Det som sker är att jag sätter att de ska flyta till vänster och att bredden på elementen är x antal pixalr i bredd. Sidfoten kör jag att den ska "nolla" tidigare float med clear: both;.

Sen så visar vi hur vi kan göra så att vi får en tre delad sida utan att ändra något i HTML-kodningen. Det vi lägger till är att även menyn ska flyta till vänster, Kod:
#menu
{
  float: left;
  width: 150px;
}

#content
{
  float: left;
  width: 650px;
}

#advert
{
  float: left;
  width: 200px;
}


#footer
{
  clear: both;
}

Vi får anpassa bredden på de olika elementen så att de får plats i våran wrapper.

När vi använder float och width så kommer det största utmaningen vara att anpassa bredden så att de ligger snyggt tillsammans. Använder vi border, padding och margin så kan det hända att webläsarna räknar olika och bör då anpassas så att det ser bra ut i de flesta webläsare. Tyvärr så räknar de olika och kan trassla lite, men då är det bara att anpassa bredden.

Det som är gjort nu är att enkelt påvisa vad vi kan göra genom att modifiera CSS:en. HTML-kodningen är intakt mellan dessa två varianter, men vi får två skillda upplägg. Vill vi blanda in så att vi lägger en bakgrund som sträcker sig mellan sidhuvudet och sidfoten bakom reklamen så är det enklast att lägga det som en bakgrundsbild i våran wrapper. Beroende på hur sidhuvudet och sidfoten ska se ut (transparenta detaljer), så kan det hända att man måste lägga en extra <div> som omsluter de delarna där bakgrunden ska var med som anpassa efter innehållet. Bakgrunden görs enklast med en bild som är 1px hög och som repeteras ut som bakgrundsbild, Kod:
background: white url("bg.jpg") repeat-y;

Genom att lägga till en extra <div> och anpassa den i CSS:en gör att det inte påverkas av andra teman, förutsatt att du valt ett unikt class-namn.

För att roa oss med lite hierarkisk CSS så passar vi på att leka med reklamen. Observera att vi inte har angivit något class-namn utan allt utgår ifrån ID:et på våran <div id="advert">, Kod:
#advert div
{
  border: 1px solid blue;
  margin-bottom: 5px;
}

#advert div h3
{
  background-color: blue;
  color: white;
  padding: 2px;
}

#advert div p
{
  padding: 5px;
}

Vill man t.ex. att Microsoft ska vara länkat i texten <p><a href="http://www.micorsoft.se&quot;&gt;Microsoft&lt;/a&gt; byggde denna värld</p> med en särskild formatering så använder vi #advert div p a i våran CSS för att formatera upp alla länkar i våran reklam. Strukturen är då kort, Kod:
<div id="advert">
  <div>
    <p>
      <a>...


Det finns mycket som man kan göra om man bygger sidan strukturerat ifrån början och oftast så klarar man sig utan att ange CSS-classen om man tänker annorlunda från början och utnyttjar olika HTML-element och ser på hierarkin som blir.
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0781 sekunder att ladda sidan