Div - hvorfor går rammen langt utenfor bildet?

Pallantir · 1. mai 2015

Jeg har en div som inneholder et bilde som hentes fra Yr.no med været de neste 24 timene. Men når jeg prøver å lage en ramme rundt det, stikker den langt utenfor. Kan noen være så snille å fortelle meg hvorfor det skjer? Rammen dekker omtrent bredden på nettsiden i nettleseren. Her er koden:

<p style="font-family:arial;font-size:100%;color:black;text-align:center;border:double"><img src="http://www.yr.no/sted/Norge/Telemark/Skien/Skien/meteogram.png">

kjekset · 1. mai 2015

HTML:

<div id="meteogram">
    <img src="http://www.yr.no/sted/Norge/Telemark/Skien/Skien/meteogram.png" />
</div>

CSS:

#meteogram {
    font-size:100%;
    font-family: 'Arial', sans-serif;
    color:black;
    width: 829px;
    text-align:center;
    border: 3px double #000;
}

http://jsfiddle.net/bp7kqyyL/

Endret 1. mai 2015 av kjekset

Pallantir · 2. mai 2015

Takk! Men nå føler jeg meg dum... Jeg prøvde å sette inn CSS-teksten i dokumentet både før, etter og i diven, men det eneste som skjedde, var at den dukket opp som ren tekst i dokumentet. Hvordan skal det egentlig plasseres?

kjekset · 2. mai 2015

1. Du kan lage en fil med navn style.css, og lime CSS-teksten i den filen. Så henter du filen ved å legge dette i <head>:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

2. Eller du kan legge koden innenfor <style> (kode her) </style> i et .html eller .php dokument. Nummer 1 anbefales da du kun trenger å endre på en fil for å gjøre endringer, fremfor å måtte gjøre en endring på mange .html / .php filer.

Pallantir · 2. mai 2015

Der satt den, takk for hjelpen! Valgte å legge det i en fil. Ganske morsomt å leke med CSS, selv om lærekurven er rimelig bratt! La inn den rødfargen jeg bruker på rammene mine og alt!

kjekset · 2. mai 2015

CSS er veldig morsomt, er helt enig. Anbefaler deg å laste ned ferdiglagde CSS-templater og modifisere disse. Finnes mange gratis på http://templated.co/som du kan leke deg med.

Pallantir · 2. mai 2015

Jeg har funnet masse morsomt ved å google, mye av det ligger på http://www.w3schools.com

Glem det jeg skrev nettopp, jeg fant feilen selv. Jeg hadde blandet sammen kode fra en annen del av siden.

Endret 2. mai 2015 av Pallantir

Pallantir · 2. mai 2015

Kult, nå har jeg fått flyttet nesten alt av styling fra HTML-siden til CSS-fila. Veldig mye ryddigere i HTML-koden! :w00t:

Men en liten ting sliter jeg litt med: Den flytende menyen min funker ypperlig i Windows, men på Android går den over andre elementer på siden. Har du noen anelse om hvordan man kan ordne det? Enten ved å få orden på det eller ved å bruke en meny på mobiler og en annen på Windows-pc-er?

kjekset · 3. mai 2015

Den flytende menyen min funker ypperlig i Windows, men på Android går den over andre elementer på siden.

Du kan forsøke å legge til:

z-index: 10;

i diven eller classen som definerer den flytende menyen. Hvis det ikke fungerer, så kan du øke 10 til 100, 1000 for å se om det hjelper. z-index gjør at et element blir flyttet over andre.

Pallantir · 3. mai 2015

Jeg har det alt på 100, og problemet er ikke at den ikke går over alt annet, for det gjør den. Problemet er heller at de elementene som skal være sentrert, er i høyre kant på mobilen sånn at menyen ligger oppå dem, istedenfor å følge med på høyre side og holde de andre tingene litt ut fra kanten. Lurer på om jeg må bruke en annen type meny på mobiler og skille mellom mobiler og andre enheter ved å sette en minstebredde med @media only screen and (min-device-width: 1200px){} sånn at en mobil på høykant (altså bredde på 1080) får en annen meny. Enten det, eller så må jeg sette marg på de andre elementene. Får eksperimentere litt.

Logg inn

Div - hvorfor går rammen langt utenfor bildet?

Anbefalte innlegg

Pallantir

Lenke til kommentar

Videoannonse

kjekset

Lenke til kommentar

Pallantir

Lenke til kommentar

kjekset

Lenke til kommentar

Pallantir

Lenke til kommentar

kjekset

Lenke til kommentar

Pallantir

Lenke til kommentar

Pallantir

Lenke til kommentar

kjekset

Lenke til kommentar

Pallantir

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer