2
svar
104
visningar
shkan behöver inte mer hjälp
Förstår inte varför figcaption går inte under bilden?
Hej!
Jag ska göra en hemsida om mig själv och jag stötte på en problem: min figcaption (Klicka här för mer information) går inte under andra bilden (bild på min skola):
Här är min kod i html:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document: Shaun Kant</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header-container">
<h1>Hej Micke!</h1>
</header>
<nav>
<ol>
<li><a href="#ommig">Om mig</a></li>
<li><a href="#skolan">Skolan</a></li>
<li><a href="#gillar">Saker jag gillar</a></li>
</ol>
</nav>
<main>
<article>
<section>
<figure>
<img
src="Images/1756318760428.jpg"
class="first-photo"
alt="A school photo of Shaun Kant"
/>
</figure>
<h2>Introduktion</h2>
<p>
Tack för att du läser den här korta webbsidan! Jag ska berätta lite
om mig själv, vad jag tycker om skolan och avslutningsvis saker som
jag gillar att göra, både akademiskt men också i fritiden.
</p>
</section>
<section id="ommig">
<h2>Om mig</h2>
<figure>
<a
href="https://www.tabyenskilda.se/"
target="_blank"
class="figure-link"
>
<img
src="Images/983a8451-b6d9-4601-aa3d-90747494b616-xdI93fEQ-large-contained.jpeg"
class="second-photo"
alt="Photo of Täby Enskilda Gymnasium (TEG)"
/>
<figcaption>
<em>Klicka här för mer information</em>
</figcaption>
</a>
</figure>
<p>
Jag heter Shaun Kant och går T25b på
<a href="https://www.tabyenskilda.se/" target="_blank"
>Täby Enskilda Gymnasium (TEG)</a
>. Jag kommer ursprungligen från Indien och flyttade här till
Sverige när jag var ungefär 10 år gammal. Jag bor nämligen i Täby, 5
minuter bort till fots från TEG så man skulle kunna säga jag har det
rätt så bekvämt på väg till skolan.
</p>
<p>
Jag valde teknik på TEG främst för att jag älskar alla former och
sorters teknik, och för att jag tyckte att TEG passade in i det
gymnasiet jag ville gå på. Den trevliga värmen, lärare som kan sina
saker och möjligheten att träffa likasinnade människor är bara
exempel på det som TEG har försedd mig under mina första dagar här.
Dessutom ville jag även lära mig mer programmering och fördjupa mig
in i de tekniska ämnena ännu mer, för att jag tycker att de är
jätteroliga ämnen och för att arbetsmarknaden är väldigt stark inom
exempelvis maskininlärning och cybersäkerhet samt kvantteknik. Andra
teknik som jag tycker låter väldigt fascinerande är medicinsk teknik
och robotik.
</p>
</section>
<section id="skolan">
<h2>Skolan</h2>
<p>
Jag har lite förkunskaper inom programmering mest, främst Python men
även lite (väldigt lite) Javascript, men inte riktigt inom märk-och
stilspråken som exempelvis HTML/CSS. Inom kursen förväntar jag att
lära mig så mycket som jag kan inom just HTML/CSS, då jag tycker det
är jättespännande att lära sig nya saker, särskilt inom
programmering/webbutveckling och dem tekniska ämnena (fysik, teknik
och matematik).
</p>
<p>
I framtiden tänker jag även att vidare utveckla mina
webbutvecklingskunskaper efter kursen är klart genom att födjupa mig
in i JavaScript, så att jag kan göra mer avancerade och interaktiva
webbsidor. Jag tycker att programmering och kodning är sjukt häftigt
för att jag tycker det är jättecoolt att kunna framställa sina idéer
genom att lära sig lite programmering och sen vidareutveckla sina
idéer framåt. Dessutom är det helt enkelt bara roligt att
programmera, jag vet inte riktigt hur annars jag ska beskriva
känslan.
</p>
<p>
Inom matematiken har jag mycket förkunskaper, då min kärlek till
matematik har varit en stor drivkraft för mig att fortsätta framåt i
gymnasiematten, där jag jobbar just nu med talteori inom
<em>Matematik 5</em> (nu kallad <em>Matte fördjupning</em>). I
närlligande framtid hoppas jag verkligen att kunna jobba lite mer
med matematik, där jag exempelvis vill gå teknisk
<a
href="https://www.kth.se/utbildning/civilingenjor/teknisk-matematik/teknisk-matematik-civilingenjor-300-hp-1.923907"
target="_blank"
>matematik</a
>/<a
href="https://www.kth.se/utbildning/civilingenjor/teknisk-fysik/teknisk-fysik-civilingenjor-300-hp-1.4216"
target="_blank"
>fysik</a
>
på KTH. Två andra inriktningar som jag tycker är också vädigt
fascinerande är finansmatematik/maskininlärning.
</p>
</section>
<section id="gillar">
<h2>Saker jag gillar</h2>
<p>
Informationen nedanför kommer att beskriva det jag tycker om att
göra på fritiden.
</p>
<ol>
<li>
<strong>Schack</strong>. Rated 1600 elo på
<a
href="https://www.chess.com/member/shaunkant2000"
target="_blank"
>Chess.com</a
>.
</li>
<li>
<strong>Pingis</strong>. Jag spelade mycket pingis under
högstadiet, men har aldrig kört i klubb.
</li>
<li>
<strong>Biljard</strong>. Jag brukade spela mycket biljard när jag
gick i 9:an, så jag är hyfsat bra på det.
</li>
</ol>
</section>
</article>
</main>
<footer>
<section>
<p>© Copyright Micke 2025</p>
</section>
</footer>
</body>
</html>
Och i css:
header {
text-align: center;
color:navy;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size:xxx-large;
margin-bottom: 0px;
}
h1 {
color:rgb(10, 94, 10);
}
.first-photo {
display: flex;
height: auto;
margin:20px auto;
width: 215px; /* adjust size if needed */
padding-bottom: 20px;
margin-top: 40px;
}
.second-photo {
float: right;
display: block;
width: 600px;
margin: 70px 50px 130px 70px
}
.header-container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
nav {
background-color: #f5f5f5;
padding: 10px;
margin-top: -40px;
}
nav ol {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 20px;
}
footer{
margin-top: 50px;
float:right;
}
body{
margin: 0;
padding: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
}
h2 {
color:rgb(38, 14, 190);
}
p {
font-size: larger;
}
li {
margin: 10px;
font-size: larger;
}
Snyggt formatterad kod uppskattas =)
Följande SO-svar kan vara behjälpligt. Du kan använda postarens fiddle och experimentera lite själv. Bara byt ut bilden mot nån som finns på webben, t.ex. https://i.imgur.com/nZzDbuz.jpeg eller kör koden lokalt med din egen bild.
thedifference skrev:Snyggt formatterad kod uppskattas =)
Följande SO-svar kan vara behjälpligt. Du kan använda postarens fiddle och experimentera lite själv. Bara byt ut bilden mot nån som finns på webben, t.ex. https://i.imgur.com/nZzDbuz.jpeg eller kör koden lokalt med din egen bild.
Tack! Jag tycker att lättläst kod borde alltid vara en viktig faktor i någons kod.
Jag ska testa och se om det fungerar, tack så mycket! Återkommer om jag stöter på några problem!
