Design i HTML og CSS

Grafiske spørsmål, tips&triks, .gif, .jpeg, .png, .psd osv...

Design i HTML og CSS

Innlegg oygab » 29.07.2011 11:37

Hei

Jeg prøver å bygge et simpelt design i HTML og CSS, ved å bruke DIVs. Jeg er ganske ny på dette og trenger derfor hjelp med noe google ikke kunne svare på.
Jeg ønsker at menyknappene ("Knapp 1", "Knapp 2" og "Knapp 3") skal ligge etter hverandre i bredden, ikke høyden. Tips til hvordan jeg kan fikse dette? Vet dere også hvordan jeg kan sette fast høyde på hovedDIVen? Det nytter ikke å sette "height".

Screenshot av resultat ligger vedlagt. Størrelsen på screenshottet er redusert til 60% for at filstørrelsen ikke skulle være så høy.

HTML:
Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>design</title>
        <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8"> 
        <link rel = "stylesheet" href = "main.css" type = "text/css">
    </head>
    <body background = "images/bg.jpg">
        <div id="container">
            <div id="header">
                   <div id="button">knapp 1</div>
                   <div id="button">knapp 2</div>
                   <div id="button">knapp 3</div>
            </div>
            <div id="content">
                <h1>Overskrift</h1>
                Tekst og <a href="">lenke</a>.
            </div>
            <div id="footer">
                Copyright
            </div>
        </div>
    </body>
</html>


CSS:
Kode: Merk alt
* {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    height: 100%;
    overflow-y:scroll;
}

body {
    font: 12px Arial,Helvetica,Verdana,sans-serif;
    color: #333;
    background-image:url('img/bg.jpg'); 
    height: 100%;
}

a {
    text-decoration:underline;
    color: #000;
}

a:hover {
    text-decoration:none;
}

h1 {
    padding-bottom: 10px;
}

h2 {
    padding-bottom: 5px;
}

#button {
    height: 50px;
    width: 40px;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    background-color: #65d4ff;
    border: 1px solid;
    border-color: #54b1d4;
    text-align: center;
}
                                           
#container {
    margin: 0 auto;
    width: 800px;
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
}

#header {
    text-align: right;
}

#content {   
    background: #65d4ff;
    clear: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid;
    border-color: #54b1d4;
}

#footer {
    position: absolute;
    bottom: 0px;
    padding: 20px;
    width: 800px;
    text-align: center;   
}
Vedlegg
ss.jpg
ss.jpg (169.67 KiB) Vist 5099 ganger
oygab
Medlem
 
Innlegg: 967
Registrert: 09.10.2003 3:56

Re: Design i HTML og CSS

Innlegg nkm » 29.07.2011 12:13

oygab skrev:Jeg ønsker at menyknappene ("Knapp 1", "Knapp 2" og "Knapp 3") skal ligge etter hverandre i bredden, ikke høyden.

CSS:
#button {display: inline;}
www.nkmoller.com
Jeg skriver aldri mot bedre vitende, men på en del områder kan andre vite mer enn meg. Utfordringen er å bruke egen og andres kunnskaper best mulig for å løse aktuelle oppgaver.
Brukerens avatar
nkm
Medlem
 
Innlegg: 890
Registrert: 20.07.2006 23:37
Bosted: Hedmark

Re: Design i HTML og CSS

Innlegg ZnigeN » 29.07.2011 12:17

Hei oygab, det er ikke så mye som skal til for å fikse knappene dine.

Men først av alt vil jeg anbefale (eller insistere) på at istedenfor å ha "button" som en div id, bør du bytte den til class.
En ID skal kun brukes 1 gang i dokumentet, mens en class kan brukes flere ganger.
Det er også noen andre fordeler med class som jeg ikke husker i hode, men hvis du googler "div id vs class" får du nok det meste besvart.

For gjøre button diven om til class, bytter du enkelt og greit # ut med .
Altså: .button { kode }
Obs: I HTML dokumentet må du huske å skrive <div class="button">Tekst</div> istedenfor <div id="button">Tekst</div>

Så til det andre, for å få knappene på linje i bredden må du legge til float: left; i css koden.

Koden vil da bli seenes ut som følger:
Kode: Merk alt
.button {
    height: 50px;
    width: 40px;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    background-color: #65d4ff;
    border: 1px solid;
    border-color: #54b1d4;
    text-align: center;
    float: left;
}


To tips for å spare noen linjer med css:
1. Du kan korte ned border setningen ved å kun skrive: border: 1px solid #54b1d4;
2. Du kan korte ned margin kodene ved å kun benytte 1 linje.
Eksempel: margin: 10px 15px 20px 0;
Eksempelet over vil gi 10px margin fra top, 15px margin fra høyre, 20px margin fra bunnen og 0px margin fra venstre.
Det går alltid fra top - right - bottom - left.

Håper du skjønner hva jeg mener, og at float:left; løser problemet på knappene :)
Brukerens avatar
ZnigeN
Medlem
 
Innlegg: 938
Registrert: 13.07.2005 1:30
Bosted: Grimstad

Re: Design i HTML og CSS

Innlegg oygab » 29.07.2011 12:21

Takk :)

Problemet jeg nå opplever med display: inline er at høyde og bredde forsvinner, og at alt mellomrommet over og under DIVen forsvinner. Er det noen triks for å beholde disse settingene ved bruk av display: inline?
oygab
Medlem
 
Innlegg: 967
Registrert: 09.10.2003 3:56

Re: Design i HTML og CSS

Innlegg oygab » 29.07.2011 12:26

Takk, ZnigeN :) Skal teste dette
oygab
Medlem
 
Innlegg: 967
Registrert: 09.10.2003 3:56

Re: Design i HTML og CSS

Innlegg nkm » 29.07.2011 12:34

Jeg holdt akkurat på å skrive tilsvarende som ZnigeN:

Jeg så også at du har id="button" flere ganger. En id skal som nevnt av ZnigeN bare brukes én gang pr side. Elementstiler som skal brukes flere ganger heter klasser og betegnes med punkt istedet for grind. Jeg ser på stilarket ditt at du bare opererer med id-er. Det er bedre eventuelt bare å bruke klasser, for de kan gjenbrukes i html-dokumentet. Mitt råd er derfor å bare bruke id på de store elementene, slik som "container", "header" og "footer", for de skal det logisk og praktisk bare finnes ett av pr side/dokument, og bruke klasser på alle andre elementtyper. Du vil etterhvert se at det gir en veldig stor fleksibilitet når du lærer å kombinere id-er og klasser.

Altså:

CSS:
Kode: Merk alt
.button {
    display: inline;
    height: 50px;
    width: 40px;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    background-color: #65d4ff;
    border: 1px solid;
    border-color: #54b1d4;
    text-align: center;
}

HTML:
Kode: Merk alt
                   <div class="button">knapp 1</div>
                   <div class="button">knapp 2</div>
                   <div class="button">knapp 3</div>


Problemet med høyde og bredde med inline kan du prøve å kompensere for ved å erstatte height og width med padding.
www.nkmoller.com
Jeg skriver aldri mot bedre vitende, men på en del områder kan andre vite mer enn meg. Utfordringen er å bruke egen og andres kunnskaper best mulig for å løse aktuelle oppgaver.
Brukerens avatar
nkm
Medlem
 
Innlegg: 890
Registrert: 20.07.2006 23:37
Bosted: Hedmark

Re: Design i HTML og CSS

Innlegg oygab » 29.07.2011 13:01

Takker for raske svar. Fikk det til nå, og fikk kortet godt ned på CSS-filen :)
oygab
Medlem
 
Innlegg: 967
Registrert: 09.10.2003 3:56

Re: Design i HTML og CSS

Innlegg ZnigeN » 29.07.2011 13:22

Hyggelig at vi kunne hjelpe :)

Takk til deg også, nkm, for tipset om display:inline;. Det har jeg faktisk aldri prøvd i denne sammenhengen, det har blitt en ren vane å bruke float:left;
Hva som er best eller anbefalt å bruke har jeg dog ingen peiling på :)
Brukerens avatar
ZnigeN
Medlem
 
Innlegg: 938
Registrert: 13.07.2005 1:30
Bosted: Grimstad

Re: Design i HTML og CSS

Innlegg nkm » 29.07.2011 15:09

Et poeng når det gjelder menyer er at det ofte er mer oversiktlig å bruke liste-elementer enn div-elementer. Det brukes i det hele tatt altfor mye div etter min mening. Skal du lære CSS så er det mye bedre å begynne med å style alle typer elementer. Sett forskjellige klasse på dine h2-elementer, dine p-elementer og dine a-elementer så får du en fleksibilitet du bare har drømt om. Og når du begynne å style standardelementer innenfor id-merkede eller klassede "rammeelementer" (de vil som oftest være div-elementer) kan du strekke strikken enda lenger. Du kan endre hele sidens karakter med et par endringer i CSS.

Følgende menyeksempel er hentet fra sidene med bilder fra NWF-treff som jeg har vært med på. Her er #pages1 ramme-elementet for hele menyen, og så har jeg stylet de forskjellige elementene under #pages1. Alle li-elementene er gitt en klasse, men det er kun én klasse pr side som er stylet. De øvrige følger den generelle stilen for li under pages1. Det gjør at jeg kan gjenbruke hele menyen uendret for hver side, men likevel få den til å "vite" hvilken side den er på.

CSS-file (jeg koder kompakt CSS for overblikkets skyld):
Kode: Merk alt
#pages1             {margin: 10px auto; text-align: center;}
#pages1 ul          {padding: 5px;}
#pages1 ul li       {display: inline; margin: 0 3px; border: 1px solid black;
                     padding: 2px 12px; text-align: center;}
#pages1 ul li:hover {background-color: #00FFFF;}
#pages1 ul li a     {color: black; text-decoration: none;}


CSS-entry på enkeltside:
Kode: Merk alt
#pages1 ul li.b1107,
#pages1 ul li.b1107:hover
                    {background-color: #F9F9F9;}


Dette er menyens html-kode implementert likt på alle sidene ved hjelp av enkel JavaScript document.write:
Kode: Merk alt
<div id=pages1><ul>
   <li class=b0611><a href="NWF061103.html">03.11.06</a></li>
   <li class=b0702><a href="NWF070202.html">02.02.07</a></li>
   <li class=b0703><a href="NWF070323.html">23.03.07</a></li>
   <li class=b0802><a href="NWF080222.html">22.02.08</a></li>
   <li class=b0810><a href="NWF081003.html">03.10.08</a></li>
   <li class=b0902><a href="NWF090213.html">13.02.09</a></li>
   <li class=b1005><a href="NWF100507.html">07.05.10</a></li>
   <li class=b1006><a href="NWF100610.html">10.06.10</a></li>
   <li class=b1107><a href="NWF110711.html">11.07.11</a></li>
   <li class=bkart><a href="index.html">&nbsp;&nbsp; Kart &nbsp;&nbsp;</a></li>
</ul></div>

Jeg sier ikke at dette er optimal koding. Folk med lengre erfaring eller skolering enn meg vil kanskje kode annerledes. Men det fungerer, og resultatet kan du se på siden www.nkm.net/nwf

Til ZnigeN: Jeg vet egentlig heller ikke hva som er best av float og display. Jeg tenderer til å bruke display inline eller block ved serier eller opplistninger og float for å plassere enkeltelementer, men jeg har erfart at det er fallgruver på begge sider. Det er blitt en del prøving og feiling.
www.nkmoller.com
Jeg skriver aldri mot bedre vitende, men på en del områder kan andre vite mer enn meg. Utfordringen er å bruke egen og andres kunnskaper best mulig for å løse aktuelle oppgaver.
Brukerens avatar
nkm
Medlem
 
Innlegg: 890
Registrert: 20.07.2006 23:37
Bosted: Hedmark

Re: Design i HTML og CSS

Innlegg ingeva » 02.08.2011 13:18

Bare en liten ettersleng her. Du (TS) nevnte at height ikke nytter med div. Riktig, men bilder kan du spesifisere fast høyde på så mye du orker.
Jeg foreslår at du lager en gif med en pixel, gjennomsiktig. Denne plasserer du med 1px i bredde, og ønsket høyde, helt til venstre ("display:inline; float:left") i DIV-en.

Men noe annet som jeg mener at jeg har brukt, er i css: "min-height:<høyde>;" - som skal gjøre samme nytten, iallfall med moderne browsere.
Fordelen med begge er natuligvis at hvis det trengs, økes høyden automatisk.
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1078
Registrert: 24.01.2011 6:48
Bosted: Sandvika


Gå til Grafikk/Design

Hvem er i forumet

Brukere som leser i dette forumet: Ingen registrerte brukere og 6 gjester

cron