Gå til innhold

Hjelp med hjemmeside (ny i CSS)

sindrejibb

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
flyndrefjes

flyndrefjes

Skrevet
Skrevet

De har laget et smalt, vertikal bakgrunnsbilde som gjentar seg selv i x-retningen.

Se bilde her

 

Videre bruker hoved-dokumentet et CSS-script som er definert slik: 

<link href="inc/site.css" rel="stylesheet" type="text/css">

 

Åpner vi CSS-filen finner vi at bakgrunnsbildet er definert slik:

 

body{
background-color: #011b3e;
padding: 0px;
margin: 0px;
background-image: url('/images/level1_script_blue.png');
background-repeat: repeat-x;
}

Lenke til kommentar
sindrejibb

sindrejibb

Skrevet
  • Forfatter
Skrevet (endret)

Da fikk jeg det til, tusen takk!

 

Også har jeg nå et par spørsmål til:

1. Jeg kunne tenke meg å ha en header slik som er her på forumet f.eks. En slik helt øverst som går helt fra venstre til høyre. Jeg regner kanskje med at det er brukt repeat-y eller noe, men det er nettopp dette jeg lurer på. Hvordan gjør jeg det?

EDIT: Litt usikker på om jeg vil ha det slikt, eller sånn som jeg har satt det opp nå. KOMMENTARER?

 

2. Fra før av har jeg latt photoshop lage indexen og da bruker den tables. Kunne tenke meg å lære meg divs ordentlig nå. Har noen en god guide eller vil noen forklare det?

 

Slik har jeg tenkt meg designet: http://verticalprod.110mb.com/v2/

Denne er satt opp med photoshop's tables. Hvordan kan jeg bruke divs for å vise det samme? Og forhåpentligvis enklere, så man slipper å laste alle bildene hver gang, men kun innholdet.

Endret av sindrejibb
Lenke til kommentar
sindrejibb

sindrejibb

Skrevet
  • Forfatter
Skrevet

Prøver meg litt med div's nå, begynner å forstå litt. Men nå har jeg lagt inn headeren i en div og begynner på navigasjonen.

Jeg har slicet menyen slik:

271814.jpeg

 

Men etter jeg har lagt inn bilde etter bilde i div'en ender det opp slik i nettleseren:

271819.jpeg

 

Hva må jeg gjøre for å få til dette? Jeg kan da ikke lage en div pr. bilde?

 

Slik ser index.html ut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stilark.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="images/index_01.gif" width="800" height="176" /></div>
<div id="menu"><img src="images/index_02.gif" width="24" height="25" />
<img src="images/index_03.gif" width="103" height="25" />
<img src="images/index_04.gif" width="17" height="25" />
<img src="images/index_05.gif" width="106" height="25" />
<img src="images/index_06.gif" width="17" height="25" />
<img src="images/index_07.gif" width="118" height="25" />
<img src="images/index_08.gif" width="15" height="25" />
<img src="images/index_09.gif" width="97" height="25" />
<img src="images/index_10.gif" width="18" height="25" />
<img src="images/index_11.gif" width="84" height="25" />
<img src="images/index_12.gif" width="12" height="25" />
<img src="images/index_13.gif" width="158" height="25" />
<img src="images/index_14.gif" width="31" height="25" /></div>
<div id="wrapper"></div>
</div>
</body>
</html>

 

Og stilark.css:

@charset "utf-8";
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/bg.png);
background-repeat: repeat-x;
text-align: center;
margin: 0px;
padding: 0px;
background-color: #00aaf9;
}
#header {
padding: auto;
height: 176px;
width: 800px;
margin: auto;
}
#menu {
margin: auto;
padding: auto;
height: 25px;
width: 800px;
}
#wrapper {
text-align: left;
margin: auto;
padding: auto;
height: 799px;
width: 800px;
}

Lenke til kommentar
4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet (endret)

Eg ville heller brukt UL og LI.

UL tydar Unordered List, og LI List Item om eg ikkje tek feil.

Følg mi oppskrift så skal du sjå det går grett. Menyer kan vere eit sant helvete, eg har vært akkurat kor du er. Det tok mykje banning. Før eg innsåg at eg berre MÅTTE lere meg koding. Og siden har det våre ein stor intresse :) Berre tips. Men sjå her:

 

I HTML'en din gjer med slik. Hugs å sette dette etter HEAD, altså etter </head>:

<ul>
<li><img src="knapp1.jpg"></li>
<li><img src="knapp2.jpg"></li>
<li><img src="knapp3.jpg"></li>
<li><img src="knapp4.jpg"></li>
<li><img src="knapp5.jpg"></li>
</ul>

 

Du vil nå sjå dei i ei liste.

Skriv inn følgende i CSS'en:

 

li {
display:inline;
}

 

Nå kjem dei vannret. Når du skal ha mellomrom skriv du berre ønska padding mellom dei inne i li taggene. Slik:

li {
display:inline;
padding:10px;
}

 

Du kan bruke UL til å flytte heile lista no. Altså, vil du ha lista 200 pixler mot høgre (200 pixler frå Venstre) skriv du berre:

ul {
margin-left:200px;
}

Forstår du?

Mykje bettre måte å lage menyer på meiner eg :)

 

Edit: Meiner display:inline skal fjerne "bullets" (rundingane før billete). Om det ikkje gjer kan du skrive inn list-style:none; rett under display:inline;

 

Lukke til!

Endret av steffenz
Lenke til kommentar
sindrejibb

sindrejibb

Skrevet
  • Forfatter
Skrevet

Nå går det framover! Fant også ut hvordan jeg kunne få flere div's horisontalt etter hverandre ved å bruke float.

 

Slik ser det ut akkurat nå:

http://verticalprod.110mb.com/v2/css/

 

Men som dere ser er siden delt i to et sted og jeg finner ikke ut hva som er feil her!

 

Også kommer vi til innholdet, har lagd en config for h1, h2 og p i CSS-stilen. Som dere ser har jeg lagd en slik firkant for hver nyhet/artikkel. Hvordan får jeg til at denne er vertikalt midtstilt i forhold til overskrifta? (h1)?

 

Også vil jeg ha skrift med h2-stil rett under den firkanten, ikke floate som h1 skal gjøre.

Til høyre for h2-skrifta skal det også floate et bilde for hver artikkel, men dette må jeg da klare selv ettersom jeg har floatet den firkanten til venstre.

 

Kan noen hjelpe meg med dette, i hvert fall noe?

 

Takk for hjelpa steffenz, det hjelper virkelig!

Lenke til kommentar
4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet (endret)

Berre hyggeleg å hjelpe! Prøv deg frem med negativ margin. Du kan enten skrive margin-bottom:-3px på DIVen over mellomrommet, eller margin-top:-3px; på diven under (sistenevnte pleier jeg å bruke).

 

Også kommer vi til innholdet, har lagd en config for h1, h2 og p i CSS-stilen. Som dere ser har jeg lagd en slik firkant for hver nyhet/artikkel. Hvordan får jeg til at denne er vertikalt midtstilt i forhold til overskrifta? (h1)?

No er eg ikkje heilt med.. Kan du forklare bettre? Mogleg det berre er eg som er treig! Bruk gjerne paint til å illustrere! :p

 

Edit: Eg antek du forstod at du selvfølgeleg kan velje tal. Det treng ikkje ver 3px. Tok berre eit eksempel. Prøv deg frem - du sjår kva som blir best.

Endret av steffenz
Lenke til kommentar
sindrejibb

sindrejibb

Skrevet
  • Forfatter
Skrevet

Takk for det, fikk fiksa det med -8px!

 

Nå er designet egentlig nesten ferdig, driver med innholdet nå.

Har oppdatert den foreløpige siden igjen (http://verticalprod.110mb.com/v2/css).

Her ser du på artikkel 2 at teksten ved den firkanten er ca. midtstilt. Slik vil jeg ha det. Men på resten av artiklene er teksten for høy i forhold til firkanten!

 

Selv om jeg har samme kode på alle artiklene såvidt jeg kan se er altså kun den ene slik jeg vil ha den (mulig det er den det er noe feil med i koden altså, siden det er den eneste som er annerledes). Klarer dere å se hva som er feil her? Et eller annet er litt skjevt som dere ser. Brødteksten starter også litt lengre ned på artikkel 2 enn artikkel 1 f.eks.

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...