.
.

Mediedesign Resym uke 39

Denne uka har gtt med til sette seg inn i Dreamweaver og lre seg grunnleggende html. Hvordan weben funker og henger sammen og hvordan vi skal f lagt ut websider p internett.
Alle fikk som vanlig hver sin konto p nettkringkasting.no/~navn.
Etter et par dager med tabeller, css og div`er ga jeg en oppgave som gikk ut p lage en enkel webside.
Oppgaven ligger her p ideweb.com

Som vanlig er det alltids noen som nsker lage noe spesielt. Eller rettere sagt, alle vil jo lage noe spesielt som igjen bidra til en del utfordringer nr det gjelder det lage en webside.
En gjenganger er jo nsket om ha alt sentrert p siden. Det er jo greit med tabeller, men en har da straks begrensede muligheter nr det gjelder innhold. Lsningen er da div tags, men det er jo ogs noe som m lres og forsts.

Vi lagde div tags i begynnelsen av uke, men det f en div til flyte p midten og i bunnen, som igjen kan holde p andre div`er, krever litt tweeking i koden. Men utfordringer liker vi og sentrerte div ble sterkt nsket.

Thomas p 3D design hadde et forslag som jeg har jobbet videre med.
Jeg har lagt ut en side som viser to typer sentrerte divs. Den verste har fast bredde p 500 px, mens den nederste alltid fyller 70% av bredden.

Har derfor 2 div`er her hvor den ene heter containerfix og den andre heter containerflexi. I tillegg har vi body og p.
det ble seende slik ut i head tag.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Center Div</title>
<style type="text/css">
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; }
#containerfix {
margin: 0 auto;
text-align: left;
border: 3px solid #993300;
width: 500px;
background-color: #FFCC00;
}
#containerflexi {
margin: 0 auto;
text-align: left;
border: 3px solid #993300;
width: 70%;
background-color: #FFCC00;
top: 20px;
position: relative;
}
p {
margin: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

</style>
</head>

Trikset er skrive text-align: center; i body. Deretter margin: 0 auto; i den containeren du skal sentrere. Og tilslutt skriver du text_align: left; i containeren fordi da vil den forholde seg til center-align i body.

Se resultatet og hele kildekoden her hvis du vil se se hvordan jeg har gjort det.

Uka gikk ogs som vanlig med til diverse eksperimentering. Noen installerte Windows p Mac`ene sine (???) og vi s litt p Blender. Sjl jobba jeg litt videre med Blender da jeg mener det skulle vre velegnet til lage gode lsninger til f. eks emballasjedesign. Programmet er dessuten gratis og du kan laste det ned her.
http://www.blender.org

Skal se om jeg kan f lagt noe inn i de div`ene etterhvert.

Kommentarer:

Skriv en ny kommentar:


Husk meg?

Wictor Leonard Faanes

Wictor Leonard Faanes

Fra: Horten

Fdt: 1949

Lrer p Idefagskolen siden frste dag i august 1990. Utdanna dekoratr og Grafisk designer.

Mer...

.


hits