Gå til innhold

Hvordan få bilder til å bevege seg i forhold til hverandre?

Ajaco

Anbefalte innlegg

Ajaco

Ajaco

Skrevet
Skrevet (endret)

Heisann, det har seg slik at jeg har nettop startet på min første nettside, og skal bruke den til å gjøre meg mer kjennt med webdesign, HTML og CSS i første omgang.

 

Siden min skal være midtstilt, og jeg har ett banner som er midtstilt, og det funker greit.

 

<center><img style="position:relative; TOP: 10px" src="banner-done.jpg" width="980" height="210"/></center>

 

Den coden var en jeg fant ved et raskt google søk, og banneret er midtstilt, uansett hvordan jeg vender og vrir på nettleser vinduet, og det er bra, det er sånn jeg vil ha det.

 

Men så kommer tricky parten. Jeg har 4 knapper som jeg vil ha jevnt fordelt under dette bildet, og som også skal følge bildet når jeg endrer størrelsen på browser vinduet mitt. Og hvis jeg setter position til "absolute", vil dette kun være basert på pixler fra venstre/høyre/top/bottom, og de vil stå på samme sted, uansett hvordan nettleseren min ser ut, og da vil de ikke følge banneret mitt. Jeg har også prøvd å gjøre som med banneret, og da <center> på hver side av bildekodene, og seretter satt -/+ pixler i forhold til midten, men det funker ikke.

 

Det jeg da lurer på er:

 

Hvordan kan jeg få de 4 knappene mine, som skal være under banneret, til å følge banneret? Kan jeg sette de opp til å alltid være 5 pixler under banneret, og til å alltid følge banneret, og ha samme posisjon ovenfor det hele tiden?

 

Håper noen skjønte spørsmålet mitt.

 

Hva er forøvrig forskjeld på position: absolute/fixed/inherit/relative/static?

 

Jeg har en følelse av at om jeg lærer meg forskjelden på disse, vil ting fort bli lettere.

 

--

 

Jeg er helt ny med webdesign, så ha meg unnskyldt for å stille spørsmål som for noen er helt åpenbare.

Endret av Ajaco
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Ajaco

Ajaco

Skrevet
  • Forfatter
Skrevet

Nettsiden ligger bare lokalt på min egen PC.

 

Men jeg kan prøve å forklare.

 

La oss si vi har to bilder. Bilde 1 og bilde 2.

 

Jeg er fornøyd med hvordan bilde 1 er plassert, men jeg skal ha et annet bilde som skal kunne følge bilde 1. Dette bildet er bilde 2.

 

Så om jeg da flytter på bilde 1, vil også bilde 2 bevege seg. Slik at de er linket sammen.

 

Lettere å forstå nå? Om folk fortsatt ikke skjønner kan jeg prøve å illustrere :>

Lenke til kommentar
Kris

Kris

Skrevet
Skrevet

Hva mener du med at du flytter ett bilde så skal det andre flytte seg? Mener du f.eks fra www.ajaco.no/side1 til www.ajaco.no/side2 eller når du gjør bilde 1 større blir nummer 2 automatisk større?

 

Om folk fortsatt ikke skjønner kan jeg prøve å illustrere :>

 

 

Det hadde nok hjulpet :)

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

Bruk en div med min-width tilsvarende bredden på bildet. Eks illustrert med random bilder fra google images:

 

<head>
<style type="text/css">
.woff {
min-width: 913px;
}
</style>
</head>
<body>
<center><img style="position:relative; TOP: 10px" src="http://gaips.inesc-id.pt/aamas2008/images/banner.jpg" /></center>
<center><div class="woff">
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
</div></center>
</body>

 

Edit:

@Kris: tror han mener at når vinduet resizes skal knappene under banneren være i samme posisjon i forhold til banneren. Uten noe styr for å holde dem på plass vil knappene holdes synlig i vinduet så lenge det er plass til alle sammen. Hence fikse med min-width

Endret av Slettet+89234341
Lenke til kommentar
Kris

Kris

Skrevet
Skrevet (endret)

Ahaa. Var nok det han skal ha, ja. Men hva hjelper det med? Er det for at bildene skal bli større hvis du bruker stor skjerm, mens bildene skal bli mindre hvis du har liten skjerm?

 

Eller hva hjelper det med? Jeg har aldri brukt det på mine sider, og alle passer i de fleste skjermer, alt fra notebooks til min 32" PC-skjerm.

 

Edit: Eller er det hvis banneret på siden endrer størrelse så skal resten av bildene også endre størrelse?

Endret av Kris
Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

Han lager nettside uten å basere seg på noe CMS, googlet seg frem til hvordan man sentrer et banner, har null peiling på CSS. Tror ikke du skal legge så mye i hvorfor han vil ha det slik og slik, bare at han vil det :p I alle normale tilfeller vil slikt skje automatisk fordi posisjoner er som oftest relativt til parents uansettmen i det tilfellet her vil det se skakt ut om vedkommende har lavoppløst browservindu fordi det absolutt eneste "knappene" har fått beskjed om er å holde seg i midten så lenge det er mulig, noe som er mulig lenger enn for den store banneren. Som sagt ikke noen feil du vil få om siden er bygd opp fullstendig og riktig.

Endret av Slettet+89234341
Lenke til kommentar
Ajaco

Ajaco

Skrevet
  • Forfatter
Skrevet (endret)

Vel, som nevnt her, har jeg null peiling. Hva er CMS?

 

Og jeg vil bare ha en lettvindt måte å få sentrert siden min, og en lettvindt måte til å få bilder på siden til å oppføre seg sånn som jeg vil. Noen som har noen forslag til dette?

 

tror han mener at når vinduet resizes skal knappene under banneren være i samme posisjon i forhold til banneren. Uten noe styr for å holde dem på plass vil knappene holdes synlig i vinduet så lenge det er plass til alle sammen. Hence fikse med min-width

Var det jeg mente ja. Altså, om jeg gjorde vinduet så lite at det ikke var plass til banneret, "buttet" banneret i venstre kant av nettleser vinduet, mens knappene bare fortsatte ut av siden, om noen skjønner?

 

Men for all del, jeg har ikke noe behov for å bruke metoden jeg har brukt her. Om noen har noen bedre forslag, tar jeg de imot med åpene armer. Jeg skal jo faktisk lære noe, og om metoden jeg har startet på er helt på trynet, så er det bare bra å få rettet opp i det så fort som mulig :)

 

Edit: Yay, der var det link til W3Schools også, hadde glemt navnet på siden, så fannt den ikke igjen. Der kan jeg jo også ta meg tid til å lese litt :)

Endret av Ajaco
Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

Indeed. text-align: center; is dah shitz

 

edit: politisk korrekt kode:

 

<head>
<style type="text/css">
.woff {
text-align: center;
min-width: 913px;
}


</style>
</head>
<body>
<div class="woff">
<img src="http://gaips.inesc-id.pt/aamas2008/images/banner.jpg" /><br>

<img src="http://www.electricallanguage.co.uk/play2.jpg" />
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
<img src="http://www.electricallanguage.co.uk/play2.jpg" />
</div>

</body>

Endret av Slettet+89234341
Lenke til kommentar
Kris

Kris

Skrevet
Skrevet
Hva er CMS?

 

Content management system, som f.eks WordPress.

 

Edit: Yay, der var det link til W3Schools også, hadde glemt navnet på siden, så fannt den ikke igjen. Der kan jeg jo også ta meg tid til å lese litt :)

 

w3schools er en veldig fin side å lære fra. HTMLdog.com er også en veldig fin side :)

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet
Er det noen retningslinjer i forhold til hva som er "riktigst" av å bruke en class og en div til sånt?

 

Nja, normal logikk? <center> er standard html, og veldig statisk. Mye bedre å ha det styrt fra en ekstern CSS fil og slippe å tukle med sidene manuelt.

Lenke til kommentar
NgZ

NgZ

Skrevet
Skrevet
Nja, normal logikk? <center> er standard html, og veldig statisk. Mye bedre å ha det styrt fra en ekstern CSS fil og slippe å tukle med sidene manuelt.
Joda, men mn kan jo også ha

#container {
text-align: center;
min-width: 913px;
}
i css, og
<div id="innhold">
<img src="http://gaips.inesc-id.pt/aamas2008/images/banner.jpg" /><br>

i html-fila.

Det er det jeg har "lært" nemlig, så jeg lurte på om det hva noen fordeler/ulemper ved å bruk en div i fohold til å bruke en class. Strengt tatt litt off topic, men jeg bare lurte. :p

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet

Du mener bruke ID istedetfor class. Div er begge to, forskjellen er div id= vs div class=. Egentlig samme f, ID brukes kun én gang og har samtidig prioritet (hvis et element er satt under regler fra både en class og en id, vil id være den som råder).

 

I det tilfellet her kommer det litt an på bruker. Om div'en skal være en container for alt innholdet, vil ID være et naturlig valg. Om sentreringen skal brukes på forskjellige steder på siden og ikke som den overordnede forelder må du bruke class siden ID ikke kan gjenbrukes

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet

stemmer nok det. og er sikkert en eller annen versjon av IE som ikke takler det xDDDDDDDDDDDDD

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