Gå til innhold

Tips til nytt design

Torjus

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Steinmann

Steinmann

Skrevet
Skrevet (endret)

pirke litt til:

Trenger ikke bakgrundsbilet i det heletatt faktisk.

Er jo bare en div med rød farge. Dumt å ha mer bilder enn man trenger.

Og skulle du hatt kunne det vært 1px HØY, ikke bred :p

 

EDIT: tok meg der ja ingard :D

Endret av orsus
Lenke til kommentar
Torjus

Torjus

Skrevet
  • Forfatter
Skrevet (endret)

Ok har begynt litt, men nå står jeg fast...

 

Link: http://home.no.net/fuzzy2/nyside/

 

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>fuzzy.moo.no</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>

<div id="wrap">

<h1><span>Lorem ipsum</span></h1>

<div id="meny">
 	<a href="blogg.html" class="images/blogg.gif"><span>Blogg</span></a>
 	<a href="personlig.html" class="images/personlig.gif"><span>Personlig</span></a>
 	<a href="galleri.html" class="images/galleri.gid"><span>Galleri</span></a>
 	<a href="linker.html" class="images/linker.gif"><span>Linker</span></a>
 	<a href="kontakt.php" class="images/kontakt.gif"><span>Kontakt</span></a>
</div>

<div id="main">
<h3> Test overskrift</h3>
Dolres ipsum al doler ipsium opli ropiuli losdi. <a href="http://www.htmlhelp.com/faq/html/">Web Authoring FAQ</a> Ipsum al doler ipsium op, aoloi poleo lorem ipsum uytio. Dolres ipsum al doler ipsium opli ropiuli losdi. Ipsum al doler ipsium.Dolres ipsum al doler ipsium opli ropiuli losdi. Ipsum al doler ipsium op, aoloi poleo lorem ipsum uytio. Dolres ipsum al doler ipsium opli ropiuli losdi. Ipsum al doler ipsium.Dolres ipsum al doler ipsium opli ropiuli losdi. Ipsum al doler ipsium op, aoloi poleo lorem ipsum uytio. Dolres ipsum al doler ipsium opli ropiuli losdi. Ipsum al doler ipsium.
</div>

 <div id="footer"></div>
 
</div>
</body>
</html>

 

 

style.css:

* {
margin: 0;
padding: 0;
}

{
body 
background-color: #fff;
background-image:url(img/midtentingen.gif);
background-repeat:repeat;
}

/* Tekst */

div#main p
{
font-size: 0.7em;
text-align: left;
margin: 10px;
color: #242424;
}


/* Linker */

div#main a
{
font-size: 11px;
text-align: left;
color: #435170;
text-decoration: underline;
}

div#main a:hover
{
color: #1B1B1B;
}


/* overskrifter */

h1
{
display: block;
height: 180px;
clear: both;
width: 500px;
background: #fff url(images/header.gif);
}

h2
{
font-size: 0.7em;
color: ##1B1B1B;
margin-top: 25px;
font-weight: bold;
text-align: left;
margin-left: 13px;
}

h3
{
font-size: 0.7em;
color: #242424;
margin: 2px;
font-weight: bold;
text-align: left;
margin-left: 13px;
margin-top:15px;
}

/* div'er */

#wrap 
{
width: 500px;
margin: 0 auto;
background: #FFFFFF;
}



#main
{
display: block;
width: 360px;
text-align: center;
background: #fff;
float: right;
padding: 5px;
}

#footer
{
display: block;
width: 100%;
height: 57px;
background: #ffffff url('images/footer.gif');
text-align: center;
border: 0px solid #FFFFFF;
clear: both;
}



/* meny */

a.imageLink {
display:block;
background:url(path/to/image.png) top no-repeat;
width:100px;
height:50px;
text-decoration:none;
}
a.imageLink:hover {
background-position:bottom;
}
a.imageLink span {
visibility:hidden;
}

/* diverse */

h1 span
{
display: none;
}

 

Prøvde å endre den gamle koden... var kanskje dumt gjort..

 

Det er nok en del som ikke trenger å være der osv men vet ikke hva :blush:

Endret av fUzZy^
Lenke til kommentar
joe45

joe45

Skrevet
Skrevet

Du må sette deg inn i hva stylingen av css gjør. Lær deg å "designe" uten å tenke på fisker og grafikk.

 

Problemet blir tilbakevennende om du ikke lærer deg å lese/forstå det du koder.

 

Til designet.

 

Sett en "jobbe" bord på boksene i css. Da ser du hvordan de flyter på siden.

F.eks så står det float: right i main. Da flyter den til høyre. Du har også text-align:center i main. Denne boksen sånn du har laget den, vil nå være: høyrestilt mot wrap med midstilt tekst.

 

Test de forskjellige boksmodellene her eller google etter andre sider.

 

Det virker som du er interessert i design. Da er det viktig å nyte veien mot det ferdige designet.

 

:blush: Wow. Det siste der virket litt blærete.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...