Gå til innhold

Konvertere et bilde lagd i PS over til en side

Jakob

Anbefalte innlegg

Jakob

Jakob

Skrevet
Skrevet (endret)

Hei. Jeg sliter litt med å forstå CSS, og dens oppbygging.

 

Ja, jeg forstår akkurat hvordan man legger til property'er o.l., og hvordan de fungerer og hva de gjør. Men jeg sliter med å få det til å se riktig ut i Dreamweaver. Dette er noen av problemene mine:

 

-Hele greia skal være midtstilt, uansett hva slags oppløsning man bruker. Jeg klarer ikke å få det til, det blir alltid en liten margin på hver side av browseren.

 

-Vil bruke alle menybilder, etc som bakgrunnsbilder i elementene (Som jeg ser de fleste på forumet her gjør), men får da problem med størrelser og plasseringer. Jeg vet ikke riktig hvordan jeg skal få til å plassere alle elementene (header, menyknapper, bakgrunn bak tekst og footer) riktig.

 

-Selv om jeg bruker position:absolute og margin og position til 0 pixler, blir det en slags "border" der hvor jeg ikke vil ha den....

 

-Sliter med at man ikke kan "se" alle elementene i Dreamweaver samtidig, de forsvinner ettersom man velger et annet et.

 

Jeg har lest gjennom hele w3schools tutorial'et, og der sto det stortsett hva alle selectorne, propertyene og valuene gjorde, men INGETING om hvordan man bruker det riktig til riktige formål.

 

Det jeg har klart til nå, er å få opp en svart boks 10px fra toppen og venstresida, og få bakgrunnen til å bli den fargen jeg vil... :cry:

 

Fisk (trenger ikke kommentarer på designet enda, mangler jo alt contentet).

 

På forhånd takk :thumbs:

Endret av Jakob
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
joffar

joffar

Skrevet
Skrevet

Tror noen før her nevnte at Opera har en innebydg padding by default, så du kan jo prøve padding:0px;

 

dersom du lage div id med position aboslute kan du plassere alt du vil mellom

<div id='ettellerannet'>denne teksten kan du da plassere hvor som helt i browseren ved hjelp av left, right, top og bottom </div>

 

Dreamweaver, iallefall den jeg har viser ikke siden korrekt, må bruke IE, opera eller mozilla for det..

 

du kan jo prøve å laste ned en liten forsmak av en bok om css, kanskje det kan hjelpe deg...

 

http://www.sitepoint.com/books/css1/htmlutopia.pdf

 

vurdere å gå til innkjøp..

 

iv

Lenke til kommentar
Dino_

Dino_

Skrevet
Skrevet (endret)

Jeg ville gjort det sånn noenlunde på denne måten:

 

Laget en bigass header men som var i hele venstre hjørnes høyde, og full bredde, men uten knappene selfølgelig.

 

Så hadde jeg tatt resterende venstre side og laget en stolpe som rakk fra der jeg klippet ut headern og helt til bunn.

 

siden klippet ut koolball nede i venstre hjørne, og så tatt det som var igjen av høyre stolpe og bunnlinje og lagret i hve sitt bilde. sa sitter du igjen med layeret med knapper, og en slett ren bakgrunn.

 

så hadde jeg laget en DIV i samme høyde og bredde som disken har, med Background rau og gild, og: background: url( 'top.png' ) top left no-repeat;, denne DIV-en hadde blitt utgangsounkt for resten av sia, hvor jeg la inn høyre og venstre stolpe, pluss bunnlinje og nedre høyre hjørnes kool-ball posisjonert absolute inne i spans i DIV-en, også her:

background: url( 'aktuelt_bilde.png' ) top left no-repeat;

 

Så til menyen, Jeg ville laget knappene uten tekst på, og brukt en av Satyriums feite CSS-preload-button-triks-linker (du finner her den på forumet, i en stickytråd mener jeg) har eksperimentert litt med det aktuelle trikset, og det er fett til å lage heftige musoverknapper, og det laster fort, du kan even lage trykkned-effekt på knappene om du vil, men bakdelen er at du må lage deg stylesheets som skiller med opera explorer og mozilla, dette han gjøres på mange måter thoug så det er ingen grunn til å fortvile.. Menyen monterer du så i en span som du posisjonerer inne i main DIV-en din sånn at den havner på rett plass

 

Innholdet på dette designet burde ikke være av typen som krever div-overflow, for pga KoolBall nede i hjørnet blir det guffent inndeling pga heisen, og en eventuell overflow blir da eneste mulighet å plassere som en f-ex fil-liste man kan bla i med bilder etc (tumbnails i et galleri??), men ikke aktuell på å forlenge hele sideinnholdet (dumt formulert kansje men du skjønner)

 

midtstillinga gjøres også i CSS, med et annet av Satyriums tidligere glimrende tips, som også er å finne i samme tråd som det foran-nevnte.

 

Lykke til - so far megafett!!! :thumbs:

Endret av Dino_
Lenke til kommentar
Jakob

Jakob

Skrevet
  • Forfatter
Skrevet

Ugh. Du srkiver ikke akkurat oversiktlig... :p

 

Jeg skal se på det i morra når jeg er "litt" friskere i hodet.

 

Utgangspunktet ditt var å lage sida i full-size, og at kun "innramminga" endra seg når man endret størrelsen på browservinduet? Hmm.. Ikke så dumt.

 

Har fortsatt ikke blitt så veldig mye klokere, men takk for svar! :thumbs:

Lenke til kommentar
Dino_

Dino_

Skrevet
Skrevet
Utgangspunktet ditt var å lage sida i full-size, og at kun "innramminga" endra seg når man endret størrelsen på browservinduet? Hmm.. Ikke så dumt.

 

Har fortsatt ikke blitt så veldig mye klokere, men takk for svar! :thumbs:

Beklager rotete innlegg :green: og nix, jeg tenkte på å bruke full størrelse på fisken, ikke hele siden.. sorry for dustete formulering. ;)

Lenke til kommentar
Jakob

Jakob

Skrevet
  • Forfatter
Skrevet

Etter å ha sett igjennom det en gang til skjønner jeg egentlig ikke så mye mer.

 

Hvis noen har noen enkle koder for å få plassert alt midtstilt og under hverandre, vil jeg vel klare det etterhvert... :roll:

Lenke til kommentar
Jakob

Jakob

Skrevet
  • Forfatter
Skrevet (endret)

Ok, nå har jeg klart en del her. Blir nok ganske rotete kode, men:

 

.body {
background-color: #E1E1E1;
margin:0px auto;
text-align:center;
 }
.head {
margin:0px auto;
background-image:url(images/images/head.gif);
width:706px;
height:164px;
}
.meny {
margin:0px auto;
width:706px;
height:52px;
}
.head2 {
margin: 0px auto auto auto;
background-image:url(images/images/head2.gif);
width:202;
height:52;
}
.meny1 {
margin: 0px auto auto auto;
background-image:url(images/images/hjem.gif);
width:99;
height:52;
}
a.meny1:hover {background-image:url(images/images/hjem_rollover.gif) }
.meny2 {
margin: 0px auto auto auto;
background-image:url(images/images/media.gif);
width:112;
height:52;
}
a.meny2:hover {background-image:url(images/images/media_rollover.gif) }
.meny3 {
margin: 0px auto auto auto;
background-image:url(images/images/bandet.gif);
width:124;
height:52;
}
a.meny3:hover {background-image:url(images/images/bandet_rollover.gif) }
.meny4 {
margin: 0px auto auto auto;
background-image:url(images/images/kontakt.gif);
width:130;
height:52;
}
a.meny4:hover {background-image:url(images/images/kontakt_rollover.gif) }
.right {
margin: 0px auto auto auto;
background-image:url(images/images/right.gif);
width:39;
height:52;
}
.title {
margin: 0px auto;
background-image:url(images/images/title.gif);
width:706px;
height:65px;
text-align:center;
background-repeat: no-repeat;
}
.content {
margin: 0px auto;
padding:40px 60px 0px 60px;
background-image:url(images/images/bg.gif);
width:706px;
color:yellow;
background-repeat: repeat-y;
}

 

Det funker bra. Eneste problemet jeg har til nå er at der hvor teksten skal stå, kan ikke bakgrunnsbildet gjentas (fordi det er litt lysere øverst til venstre), og da må jeg enten lage bakgrunnsbildet gigalangt, eller så faller teksten utafor (vanskelig å forklare).

Endret av Jakob
Lenke til kommentar
Dino_

Dino_

Skrevet
Skrevet (endret)
Etter å ha sett igjennom det en gang til skjønner jeg egentlig ikke så mye mer.

 

Hvis noen har noen enkle koder for å få plassert alt midtstilt og under hverandre, vil jeg vel klare det etterhvert... :roll:

laget denne med litt bedre forklaringer og illustrasjoner, kansje litt lettere å skjønne hva jeg mente..

 

obs, koden er kun skrevet, ikke testet ut i praksis, men burte funke, sånn noenlunde :green:

 

edit: var litt treig å poste, menneh, du kan jo titte hvis du vil da ...

Endret av Dino_
Lenke til kommentar
Dino_

Dino_

Skrevet
Skrevet

HER er den mouseovern jeg snakka om som jeg tror kunne blitt brukt med stort hell her,

 

legg merke til at det finnes to versjoner av den på den siden, selv har jeg laget en mellomting mellom disse to, og bruker php til å bytte stilark for å redde meg fra differansen i paddinga til IE/Mozilla og sånt.. sikkert bøttevis med andre, og lurere måter å gjøre det på, men dette futter finfint. du slipper preload-script av noe slag siden hele mouseovern er i ett eneste bilde, og endringene blir gjort av CSS. ypperlig i de tilfeller alle knapper er like, bare med forskjellig tekst.

 

dersom du leker med bildet av knappene, så vil du se at du ganske enkelt kan lage "trykk-ned effekt" når du klikker på dem også. its-fønn. :D

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

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...