Design laget i photoshop - riktig delt opp?

Torjus · 6. oktober 2005

Har laget et design i photoshop og skal bruke det til å lære meg CSS og kanskje jeg kommer til å bruke det etter hvert...

Designet: (Ønsker ikke kritikk bare hjelp)

Jeg skal altså lage en side av dette...

Så jeg har delt opp siden slik:

(Skal bruke den css hover metoden...)

Først... Hva skal jeg gjøre av det området som er ved siden av meny knappene?

Disse:

og

Menyen:

Det i midten, vet ikke hva dere pleier å kalle det, men kalte det "main":

Header:

Footer:

Er hjertlig takknemlig om noen har bry til å hjelpe meg (og kanskje Teddy^) som er ganske nye med dette

Mads-b · 6. oktober 2005

Hva med å slice ut hele header med knapper og alt, viske vekk knappene og plassere de ferdig kodede knappene oppå header? Den letteste løsningen vil jeg tro.

mikk- · 6. oktober 2005

Ville hatt "main" ca 20-30 px høy. Min erfaring tilsier at 1px høye bilder som er repetert opptil flere tusen ganger sliter hardt på svake klientpcer.

Torjus · 6. oktober 2005

Hva med å slice ut hele header med knapper og alt, viske vekk knappene og plassere de ferdig kodede knappene oppå header? Den letteste løsningen vil jeg tro.

Altså at jeg ikke kutter vekk det på høyre og venstre side fra headeren?

Arve Systad · 6. oktober 2005

Ville hatt "main" ca 20-30 px høy. Min erfaring tilsier at 1px høye bilder som er repetert opptil flere tusen ganger sliter hardt på svake klientpcer.

Jepp, enig i den der. Og samme gjelder for mønstrete bakgrunn, minimum-size er IMO 20x20px

Mads-b · 6. oktober 2005

Hva med å slice ut hele header med knapper og alt, viske vekk knappene og plassere de ferdig kodede knappene oppå header? Den letteste løsningen vil jeg tro.

Altså at jeg ikke kutter vekk det på høyre og venstre side fra headeren?

Jepp. Dermed slipper du å lage divs kun med bakgrunnsbilder og dermed usemantisk kode.

EDIT: en ting til: hvis du fjerner de grønne vertikale linjene fra header og footer og isteden setter linjene på body (istedenfor main) med vertikal repeat, sparer du noen byte.

Endret 6. oktober 2005 av MBaardsgaard

Torjus · 6. oktober 2005

Hvordan lager jeg menyen da? Må jeg bruke padding elns?

Torjus · 7. oktober 2005

Anyone?

Torjus · 10. oktober 2005

Ok, nå har jeg prøvd meg litt frem. Har gjort masse galt, men er ikke sikker på hva...

Hjelp? :cry:

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>2rjus.tk</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">
			<ul id="navigasjon">
				<li><a href="index.php" class="images/hjem.gif"><span>Link text</span></a></li>
				<li><a href="ommeg.html" class="images/ommeg.gif"><span>Link text</span></a></li></li>
				<li><a href="bilder.html" class="images/bilder.gif"><span>Link text</span></a></li></li>
				<li><a href="kontakt.html" class="images/kontakt.gif"><span>Link text</span></a></li></li>
			</ul>

</div>

<div id="main">

<?PHP
include("host/cutenews/show_news.php");
?>
</div>
	<div id="footer"></div>

</div>
</body>
</html>

CSS:

* {
margin: 0;
padding: 0;
}

body 
{
background: #000000;
text-align: left;
font-family: arial, helvetica, sans-serif;
}

/* Tekst */
div#main p
{
font-size: 0.7em;
text-align: left;
margin: 10px 10px 5px 10px;
margin-bottom: 2px;
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: 192px;
clear: both;
width: 600px;
background: #00000 url(images/header.gif);
}

h2
{
font-size: 0.7em;
color: ##1B1B1B;
margin-top: 10px;
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: 600px;
margin: 0 auto;
background-image: url(images/bg.gif) repeat-y
}



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

#meny
{
width: 125px;
height:300px;
text-align: center;
float: left;
}

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



/* meny */

a.imageLink {
display:block;
background:url(images/hjem.gif) top no-repeat;
width:48px;
height:62px;
text-decoration:none;
}
a.imageLink:hover {
background-position:bottom;
}
a.imageLink span {
visibility:hidden;
}

Link: :blush:

http://home.no.net/fuzzy2/host/index.php

Logg inn

Design laget i photoshop - riktig delt opp?

Anbefalte innlegg

Torjus

Lenke til kommentar

Videoannonse

Mads-b

Lenke til kommentar

mikk-

Lenke til kommentar

Torjus

Lenke til kommentar

Arve Systad

Lenke til kommentar

Mads-b

Lenke til kommentar

Torjus

Lenke til kommentar

Torjus

Lenke til kommentar

Torjus

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer