Vinnaren i pepparkakshustävlingen!
  • 4
  • 5
2017-12-05, 11:38
  #49
Medlem
Joealeriss avatar
Citat:
Ursprungligen postat av MeshuggahX
Jag kan inte riktigt ge dig ett bra svar på det. När det behovet kräver absolut eller relativ positionering får man använda sig utav det, ofta när du kanske vill lägga element på ett lager ovanför som en "pop-up" eller så. En absolut och relativ positionering tar ju ingen hänsyn till andra element på samma sätt så divar positionerade på det sättet kommer ju givetvis att bete sig annorlunda. Vilket kanske inte är önskvärt.

Om du kommer på något konkret exempel så får du återkomma.

Jag la till lite i det exemplet jag länkade till i förra inlägget och skapade två kolumner med hjälp av float. Det kanske du redan har koll på att grejat med tidigare, men tänkte bara så du var medveten om att man kan positionera två divar bredvid varandra utan att greja med position-attributet.

http://www.cssdesk.com/sAFuT

Angående float så har jag koll på det, i alla fall någorlunda. Har inte bemästrat det ännu. Det bästa tillvägagångssättet för att komma underfund med absolut och relativ positionering kanske är att försätta sig i situationer där det är nödvändigt att använda dessa, för jag förstår att det kan vara svårt att förklara

Tack så oerhört mycket för din hjälp i alla fall!
Citera
2018-01-09, 06:58
  #50
Medlem
Citat:
Ursprungligen postat av Joealeris
Angående float så har jag koll på det, i alla fall någorlunda. Har inte bemästrat det ännu. Det bästa tillvägagångssättet för att komma underfund med absolut och relativ positionering kanske är att försätta sig i situationer där det är nödvändigt att använda dessa, för jag förstår att det kan vara svårt att förklara

Tack så oerhört mycket för din hjälp i alla fall!

Det är inte så jätte svårt eller komplicerat för den delen heller.

Fixed positionerar sig alltid efter dokumentet/root elementet och tar inte hänsyn till andra element dvs följer inte det normala flödet.

Absolut är positionerat efter närmsta positionerade förälder dvs element som är inte är static. Följer inte det normala flödet och tar inte hänsyn till andra element.

Relative följer det normala flödet och kan positioneras efter och tar hänsyn till närliggande element. Som static fast kan positioneras i relation till det normala flödet.

z-index kan appliceras på alla positionerade element(fixed, absolute, relative).

Floats följer inte det normala flödet och måste brytas med clear: left, right eller both eller som man också säger floats clear floats. Floatade element clearar sig själv. För att tex få box-modeln att täcka och expandera efter floatat inneåll så kan man floata föräldern för att cleara. Används främst för att kunna positionera flera element bredvid varandra.
Citera
2018-01-11, 11:10
  #51
Medlem
Worldnatures avatar
Hej!

har kollat runt en del på nätet och youtube men hittar inte direkt något superbra info angående vad lokal navigering innebär. Vad exakt är lokal navigering, vad ska man göra/koda för att det ska vara en lokal navigering?
Citera
2018-01-11, 20:04
  #52
Medlem
Citat:
Ursprungligen postat av Worldnature
Hej!

har kollat runt en del på nätet och youtube men hittar inte direkt något superbra info angående vad lokal navigering innebär. Vad exakt är lokal navigering, vad ska man göra/koda för att det ska vara en lokal navigering?
Vad är det du försöker åstadkomma? Försöker du länka till stycken inom den aktuella sidan utan att ladda om. Det gör du med att länka till ett id eller ankare med #vilket-id så hoppar sidan dit.

I vilket sammanhang har du hört om just "lokal navigering"?
Citera
2018-01-11, 20:54
  #53
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av iamfake
Vad är det du försöker åstadkomma? Försöker du länka till stycken inom den aktuella sidan utan att ladda om. Det gör du med att länka till ett id eller ankare med #vilket-id så hoppar sidan dit.

I vilket sammanhang har du hört om just "lokal navigering"?


Det är ett skolarbete jag haft, där vi skulle koda en hemsida i html och css, som vi lärt oss precis, sidan blev godkänd på allt utom just lokal navigering.

http://www.bilddump.se/bilder/201801...:3de3:ed12.jpg

så såg den ut men läraren sa att jag missat lokal navigering, vilket jag inte riktigt förstod vad exakt det är. Så tänkte se med er här på flashback om ni vet vad lokal navigering är och vad som saknas på min sida då "lokal navigering" saknades tydligen.
Citera
2018-01-11, 21:41
  #54
Medlem
Citat:
Ursprungligen postat av Worldnature
Det är ett skolarbete jag haft, där vi skulle koda en hemsida i html och css, som vi lärt oss precis, sidan blev godkänd på allt utom just lokal navigering.

http://www.bilddump.se/bilder/201801...:3de3:ed12.jpg

så såg den ut men läraren sa att jag missat lokal navigering, vilket jag inte riktigt förstod vad exakt det är. Så tänkte se med er här på flashback om ni vet vad lokal navigering är och vad som saknas på min sida då "lokal navigering" saknades tydligen.

Aldrig hört. Låter som något han hittat på själv. Det enda jag kan tänka på är https://developer.mozilla.org/en-US/...nt/a#attr-href

Kolla på länken och vad texten beskriver. En länk som refererar till något på den aktuella sidan och sedan skrollar(hoppar) dit istället för att ladda om.
Citera
2018-01-11, 21:48
  #55
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av iamfake
Aldrig hört. Låter som något han hittat på själv. Det enda jag kan tänka på är https://developer.mozilla.org/en-US/...nt/a#attr-href

Kolla på länken och vad texten beskriver. En länk som refererar till något på den aktuella sidan och sedan skrollar(hoppar) dit istället för att ladda om.


Ok, ska ta och kolla in detta, tackar för svar!
Citera
2018-06-24, 17:10
  #56
Medlem
Mulle-Meths avatar
Jag håller på att göra en simpel skiss till en webbplats med hjälp av HTML och CSS. Jag skulle dock behöva hjälp angående sidfoten, då den ser konstig ut.

Med konstigt så menar jag att den ser ut såhär: https://gyazo.com/2363cb20876d61bf05afaf0b3321e5cf

Problemet är alltså att sidfoten dels inte är fixerad vid botten av min viewport, sedermera är div:ens innehåll (texten) inte vertikalt centrerad.

Sidfotens HTML

HTML-kod:
<div id="footer"><p>Text</p></div>

Sidfotens CSS

Kod:
#footer {
display:grid;
grid-template-columns:100%;
color:white;
background-color:black;
height:75px;
line-height:75px;
}

Sidfotens paragraf borde enligt mig åtminstone vara vertikalt centrerad då jag har samma line-height som height, och det fungerar i alla övriga element i HTML-dokumentet. Det största problemet är dock det whitespace som finns under sidfoten. Hur löser jag detta på bästa sätt?

EDIT: Jag löste det genom att skippa CSS-grid för sidfoten. Använde bara en vanlig div.
__________________
Senast redigerad av Mulle-Meth 2018-06-24 kl. 18:01.
Citera
2018-06-24, 21:49
  #57
Medlem
Mulle-Meths avatar
Okej, ännu en fråga nu. Jag har en column, eller det är så jag tror att det kallas i alla fall (CSS-grid). Kolumnen är alltså en wrapper-div innehållandes två div:ar med fördelningen 25% respektive resterande 75%. De har samma höjd, fördelningen syftar bara på deras bredd i förhållande till storleken på webbläsarens fönsterstorlek.

Jag vill ha en bild som täcker hela den stora div:en.

Min kod

HTML-kod:
<body>

<div id="wrapper">
    <div id="smal-div"></div> <!-- Innehåller ingenting just nu, ska finnas en logotyp här senare -->
    <div id="bred-div"><img src="Exempelbild.jpg" alt=""></div>
</div>

</body>

<!-- CSS -->

body {
margin:0;
padding:0;
font-family:Verdana;
}

#wrapper {
display:grid;
grid-template-columns:25% 75%;
}

/* Jag har givetvis lite styling på de två div:arna men de är irrelevanta för exemplet så jag skriver dem inte här */

Jag vill alltså att bilden i den "breda div:en" ska täcka hela div:ens yta, även när webbläsaren förstoras/förminskas. Är detta överhuvudtaget möjligt?

Tacksam för svar.
Citera
2018-06-26, 17:02
  #58
Medlem
Citat:
Ursprungligen postat av Mulle-Meth
Okej, ännu en fråga nu. Jag har en column, eller det är så jag tror att det kallas i alla fall (CSS-grid). Kolumnen är alltså en wrapper-div innehållandes två div:ar med fördelningen 25% respektive resterande 75%. De har samma höjd, fördelningen syftar bara på deras bredd i förhållande till storleken på webbläsarens fönsterstorlek.

Jag vill ha en bild som täcker hela den stora div:en.

Min kod

HTML-kod:
<body>

<div id="wrapper">
    <div id="smal-div"></div> <!-- Innehåller ingenting just nu, ska finnas en logotyp här senare -->
    <div id="bred-div"><img src="Exempelbild.jpg" alt=""></div>
</div>

</body>

<!-- CSS -->

body {
margin:0;
padding:0;
font-family:Verdana;
}

#wrapper {
display:grid;
grid-template-columns:25% 75%;
}

/* Jag har givetvis lite styling på de två div:arna men de är irrelevanta för exemplet så jag skriver dem inte här */

Jag vill alltså att bilden i den "breda div:en" ska täcka hela div:ens yta, även när webbläsaren förstoras/förminskas. Är detta överhuvudtaget möjligt?

Tacksam för svar.

Är det inte https://css-tricks.com/almanac/properties/o/object-fit/ du vill använda?
Citera
2018-06-27, 00:40
  #59
Medlem
Wha-As avatar
Citat:
Ursprungligen postat av Mulle-Meth
Okej, ännu en fråga nu. Jag har en column, eller det är så jag tror att det kallas i alla fall (CSS-grid). Kolumnen är alltså en wrapper-div innehållandes två div:ar med fördelningen 25% respektive resterande 75%. De har samma höjd, fördelningen syftar bara på deras bredd i förhållande till storleken på webbläsarens fönsterstorlek.

Jag vill ha en bild som täcker hela den stora div:en.

Min kod

HTML-kod:
<body>

<div id="wrapper">
    <div id="smal-div"></div> <!-- Innehåller ingenting just nu, ska finnas en logotyp här senare -->
    <div id="bred-div"><img src="Exempelbild.jpg" alt=""></div>
</div>

</body>

<!-- CSS -->

body {
margin:0;
padding:0;
font-family:Verdana;
}

#wrapper {
display:grid;
grid-template-columns:25% 75%;
}

/* Jag har givetvis lite styling på de två div:arna men de är irrelevanta för exemplet så jag skriver dem inte här */

Jag vill alltså att bilden i den "breda div:en" ska täcka hela div:ens yta, även när webbläsaren förstoras/förminskas. Är detta överhuvudtaget möjligt?

Tacksam för svar.

Ska BARA den stora "div:en" ha en bild?
Isåfall bör nog detta fungera:

CSS:


body {
margin:0;
padding:0;
font-family:Verdana;
width: 100%;

}

#wrapper {
display:grid;
grid-template-columns:25% 75%;
}

#bred-div img {
width: 100%;
position: relative;
}
Citera
2018-06-28, 01:27
  #60
Medlem
Mulle-Meths avatar
Citat:
Ursprungligen postat av IngetNick2
Är det inte https://css-tricks.com/almanac/properties/o/object-fit/ du vill använda?

Citat:
Ursprungligen postat av Wha-A
Ska BARA den stora "div:en" ha en bild?
Isåfall bör nog detta fungera:

CSS:


body {
margin:0;
padding:0;
font-family:Verdana;
width: 100%;

}

#wrapper {
display:grid;
grid-template-columns:25% 75%;
}

#bred-div img {
width: 100%;
position: relative;
}

Tack för era svar!

Jag hade däremot redan lyckats lösa det, genom att ge bilden samma höjd som div:en, samt en bredd på 100%
Citera
  • 4
  • 5

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback