Plassere elementer ved siden av hverandre.

Hei godt folk!

Jeg har aldri i livet brukt CSS til utforuming av sider med box modeller. Jeg har brukt den gode

utformingen. Men jeg står litt fast. Jeg vil ha en topp på siden slik som Minecraft har på sin side. Her kom jeg på at jeg kan sette sammen box modelene, men da havner de jo bare under det forrige objektet, og noen ganger dekker det litt over.

Legger inn hele stilarket under. “ul” greiene er det bare å overse.

body { background-color: #2e2d2d; font-family: Verdana, Geneva, sans-serif; } div.tittel { width: 315px; padding: 7px; margin: -7.6px; height: 40px; border: 0px solid #000000; background-image: url(../img/roed_trans_topp.png); background-repeat: repeat-x; font-family: "Comic Sans MS", cursive; font-size: 20px; color: #FFFFFF; text-align: left; display: inline-block; } div.slagord { display: inline-block; width: 250px; height: 40px; } ul#navigation { font-size: 14px; font-family: Arial, sans-serif; width: auto; min-width: 440px; max-width: 440px; padding: 5px; background-image: url(../img/roed_trans_topp.png); text-align: center; margin: 25px auto; height: 30px; display: inline-block; } ul#navigation li { display: inline; margin: 0 15px 0 0; list-style: none; text-align: center; } div.hovedside { width: 1352px; padding: 7px; margin: -7.6px; height: auto; border: 0px; } a:hover, a:active, a:hover, a:visited { color: #FFFFFF; text-decoration: none; }

Så kommer min HTML utforming av siden som jeg akuratt har startet på.

[HTML]


www.webprogrammering.net
Test

[/HTML]

Jeg er best i PHP så hovedfilen ser slik ut: (Ikke ferdig i det hele tatt)

[PHP]<?php

session_start();

echo “”;

include “inc/top.php”;

?>[/PHP]

All hjelp tas i mot med takk!

Siden du allerede kan noe PHP, så er vel det greit, men begynn med enkle HTML strukturer til du forstår hvordan du plasserer elementer der du vil ha de, da er det lettere å sette sammen med PHP etterpå.

Et HTML dokument har en viss struktur, noe sånt:

[HTML]

Min side

www.webprogrammering.net
  • Startsiden
  • Om meg
  • Eksempler
  • Referanser
  • Kontakt
[/HTML]

ID brukes for elementer med unikt navn, og dersom du ønsker å sette stiler på flere elementer i en fei, så bruker du klasser.

Med en gang du tenker på plassering og utforming, så går du til det eksterne stilarket ditt (css filen), og skriver ikke [COLOR=“blue”]align=“left” i HTML, da det er opplest og vedtatt at det er dårlig form, derimot kan i enkelte særtilfeller inline css gå an, men det må være av en slik natur at det ikke kan settes eksternt, og det utelukker så å si alle tilfellene.

Prøv å hold det ryddig og oversiktlig i css filen, begynn med de øverste elementene, og forsøk å ha litt ordenssans, så er det betydelig enklere senere.

[HTML]#header {position: absolute; width: 100%; height: 40px; background: red;}
#header_content {position: relative; width: 960px; height: 40px; margin: 0 auto; font-size: 20px;}

#container {position: relative; top: 40px; width: 960px; height: auto; margin: 0 auto; background: #c1c1c1;}

#nav_liste {display: block;}
.nav {margin: 10px 2px 0 6px; background: #fff url(/mittbilde.jpg) 0 0 no-repeat;}
[/HTML]

Mitt tips er å velge en font til dokumentet, slik som du har gjort i “body” css’en, og så ikke rote for mye med diverse fonter og størrelser, det samme gjelder for elementer.
I det minste til å begynne med, så blir ofte resultatet betydelig bedre hvis du setter noen grunnfarger, og holder deg til disse, og jeg ville vel normalt fraråde på det sterkeste å bruke Comic Sans til overskriften din dersom denne siden skal være nogenlunde seriøs.

En annen ting, det finnes normalt ikke halve pixler, det vil si det gjør egentlig det, men å bruke for eksempel [COLOR=“blue”]margin: -7.6px; er etter min mening unødvendig, og de siste 0.6px har sannsynligvis ingen betydning og vises ikke.

Du bruker en del [COLOR=“blue”]display: inline-block;, noe jeg selv også gjør, men vær klar over at det kan være enkelte pussigheter i IE, og i eldre versjoner av Internet Eksploderer er det ikke støtte for dette i det hele tatt, der er det kun floats som gjelder.

2 Likes

Kan det meste innen PHP så skal starte med studier av HTML!