Kjapp og trygg hosting for Wordpress

Plassere elementer ved siden av hverandre.

C

Cisse

Medlem
Hei godt folk!

Jeg har aldri i livet brukt CSS til utforuming av sider med box modeller. Jeg har brukt den gode <table> 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.

Kode: 
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: 
<div class="tittel">
    www.webprogrammering.net<div class="slagord" align="left">Test</div>
</div>

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

PHP: 
<?php

session_start();

echo "<link href='css/stylesheet.css' rel='stylesheet'>";

include "inc/top.php";

?>

All hjelp tas i mot med takk!
 
adeneo

adeneo

Medlem
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: 
<!DOCTYPE html> <!--begynn alltid med en doctype-->
    <head>  <!--//alle sider må ha en head seksjon og en tittel-->
        <title>Min side</title>
   </head>
   <body>
       <div id="header">
           <div id="header_content">
               www.webprogrammering.net
           </div>
       </div>
       <div id="container">
           <!--innholdet kommer her-->
           <ul id="nav_liste">
               <li class="nav">Startsiden</li>
               <li class="nav">Om meg</li>
               <li class="nav">Eksempler</li>
               <li class="nav">Referanser</li>
               <li class="nav">Kontakt</li>
           </ul>
       </div>
    </body>
</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 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;}

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 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 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.
 
Sist redigert:
Du må logge inn eller registrere deg for å svare her.
Topp