10700K | NVIDIA RTX 3080
Hjälp med formatering CSS/HTML
Hur minskar jag mellanrummet i vänsterkolumn mellan "Kils hund och kattklipp" och navigeringsmenyn? Det är ju enormt.
Känns som jag testat att ändra padding/margin top/bottom överallt i CSS men ingenstans får jag det att ändra på sig. Lyckats ändra formatering på headers osv innan men ja, denna har jag gått bet på.
Ett väldigt bra verktyg är att använda webbläsarens utvecklarverktyg.
Använder du Chrome så kommer du åt det genom att trycka på F12. Detta kommer då öppna ett till fönster med information om sidan du är inne på. Uppe i vänstra hörnet har du en pil, detta ger dig en markör som gör att du kan välja ett element på sidan för att inspektera det.
Håll över det elementet du vill justera, du kommer att se en grön och en orange ruta runt om elementet. Det gröna representerar padding och det oranga margin.
Trycker du på elementet så får du även upp all CSS som påverkar detta element i en till ruta åt höger, här kan du testa och ändra värden hur du vill, det är inget som sparas.
När du har värden du är nöjd med så kan du lägga till dessa i din CSS fil för sidan.
Vill du läsa mer om Chrome Devtools så kan du läsa dokumentationen https://developers.google.com/web/tools/chrome-devtools/dom/
Nummer två: i formuläret längst ner - vart ställer jag in vilken mail det ska skickas till när man klickar på "skicka"?
Templates eller HTML generellt är bara statiska sidor utan någon funktionalitet. Behöver du kunna skicka mail så får du använda dig av serverkod (t.ex. PHP, Java, JS, C#) eller t.ex. https://www.emailjs.com/ och programmera funktionerna för formuläret. Default funktionaliteten för en POST är att bara refresha sidan.
Nummer tre: Hur får jag denna formateringen av text:
bild -> text
text -> bild
bild -> text
Just nu är det ju
bild -> text
bild -> text
bild -> text
Har inte kollat i templaten då det är en zipfil på 15mb, inget jag har lust att ladda ner och öppna nu.
Men låter som det är någon typ av gridsystem eller flexbox. Vill du byta plats på text och bild så är det bara att kolla i HTML markupen och byta plats på texten och <img> taggen. Det ligger säkerligen i någon <div>.
Då jag antar att du gör sidan statiskt utan en databas, d.v.s du skriver direkt i HTML filerna?
Edit: Tyvärr kunde jag inte hålla mig.
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 col-xs-12 push-lg-4 push-md-5">
<header>
<h2 class="tm-blue-text tm-section-title tm-margin-b-15">Tjänster</h2>
</header>
<header> <h3> Klippning </h3></header>
<p>I klippningen ingår alltid badning och föning, det ger ett fantastiskt resultat! Det ingår även kloklippning, öronrensning och öronryckning. Har din hund besvär av fyllda analsäckar ingår även tömning av säckarna. Vill du klippa din trimhund ska du tänka på att pälsen kanske inte kommer gå att ryckas efteråt, då får man forstätta klippa. Vill du klippa till exempel en golden eller en border collie ska du tänka på att pälsen kan bli fjunigare, glanslös och förlora förmågan att vara fuktavvisande.</p>
<header> <h3> Trimning </h3></header>
<p>I trimning ingår trimning, kloklippning, öronryckning och öronrensning. De flesta hundar kan även bli badade och fönade efter trimning för bästa resultat. Vi har ett superbra, snällt schampo som lugnar och mjukar upp hud och päls som även går att använda efter trimning. Utborstning av underull (på ex japansk spets eller finsk lapphund) ingår i samma "kategori" som trimning, samma tjänster ingår och samma pris gäller.!</p>
<header> <h3> Bad</h3></header>
<p>I badet ingår dubbel schamponering, föning, kloklippning, öronrensning och öronryckning samt analsäckstömning. Jag rekommenderar att hundar med tovor blir urtovade innan bad, annars kan tovorna bli hårdare än innan, schampot sköljs inte ur ordentligt och kan irritera huden. Hundar med mycket underull bör ullas ur innan bad, annars kan de få stå i fönen och bli varma i onödan samtidigt som ullen ändå måste borstas ur för att de ska bli torra, det är skönare för hunden att ulla ur torr päls.</p>
</div>
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12 pull-lg-8 pull-md-7 tm-about-img-container">
<img src="img/n2.jpg" alt="Image" class="img-fluid">
</div>
</div>
Templaten använder sig av Bootstrap, vilket i sin tur använder ett gridsystem på 12 kolumner.
Dv.s. varje row kan hålla i 12 columner. (Flexbox).
Som du ser ovan så är det en <div class="row"> följt av en column som är 8 kolumner bred på stora skärmar. Längre ner hittar du din <img> tagg, nästad under en div med klassen col-lg-4, dv.s. denna ska sträcka sig 4 kolumner bred på stora skärmar.
Vilket ger dig en rad med följande template. (t = text, b = bild)
Rad: t t t t t t t t | b b b b
Däremot så är det massa offsets med push/pull, vilket gör att det blir förskjutet åt höger/vänster.
Tar du bort dessa klasser så bör bilden hamna till höger och texten till vänster.
<div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
text...
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12 tm-about-img-container">
bild...
Mer om Bootstraps gridsystem https://getbootstrap.com/docs/4.0/layout/grid/
Ett väldigt bra verktyg är att använda webbläsarens utvecklarverktyg.
Använder du Chrome så kommer du åt det genom att trycka på F12. Detta kommer då öppna ett till fönster med information om sidan du är inne på. Uppe i vänstra hörnet har du en pil, detta ger dig en markör som gör att du kan välja ett element på sidan för att inspektera det.
Håll över det elementet du vill justera, du kommer att se en grön och en orange ruta runt om elementet. Det gröna representerar padding och det oranga margin.
Trycker du på elementet så får du även upp all CSS som påverkar detta element i en till ruta åt höger, här kan du testa och ändra värden hur du vill, det är inget som sparas.
När du har värden du är nöjd med så kan du lägga till dessa i din CSS fil för sidan.
Vill du läsa mer om Chrome Devtools så kan du läsa dokumentationen https://developers.google.com/web/tools/chrome-devtools/dom/
Templates eller HTML generellt är bara statiska sidor utan någon funktionalitet. Behöver du kunna skicka mail så får du använda dig av serverkod (t.ex. PHP, Java, JS, C#) eller t.ex. https://www.emailjs.com/ och programmera funktionerna för formuläret. Default funktionaliteten för en POST är att bara refresha sidan.
Har inte kollat i templaten då det är en zipfil på 15mb, inget jag har lust att ladda ner och öppna nu.
Men låter som det är någon typ av gridsystem eller flexbox. Vill du byta plats på text och bild så är det bara att kolla i HTML markupen och byta plats på texten och <img> taggen. Det ligger säkerligen i någon <div>.
Då jag antar att du gör sidan statiskt utan en databas, d.v.s du skriver direkt i HTML filerna?
Edit: Tyvärr kunde jag inte hålla mig.
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 col-xs-12 push-lg-4 push-md-5">
<header>
<h2 class="tm-blue-text tm-section-title tm-margin-b-15">Tjänster</h2>
</header>
<header> <h3> Klippning </h3></header>
<p>I klippningen ingår alltid badning och föning, det ger ett fantastiskt resultat! Det ingår även kloklippning, öronrensning och öronryckning. Har din hund besvär av fyllda analsäckar ingår även tömning av säckarna. Vill du klippa din trimhund ska du tänka på att pälsen kanske inte kommer gå att ryckas efteråt, då får man forstätta klippa. Vill du klippa till exempel en golden eller en border collie ska du tänka på att pälsen kan bli fjunigare, glanslös och förlora förmågan att vara fuktavvisande.</p>
<header> <h3> Trimning </h3></header>
<p>I trimning ingår trimning, kloklippning, öronryckning och öronrensning. De flesta hundar kan även bli badade och fönade efter trimning för bästa resultat. Vi har ett superbra, snällt schampo som lugnar och mjukar upp hud och päls som även går att använda efter trimning. Utborstning av underull (på ex japansk spets eller finsk lapphund) ingår i samma "kategori" som trimning, samma tjänster ingår och samma pris gäller.!</p>
<header> <h3> Bad</h3></header>
<p>I badet ingår dubbel schamponering, föning, kloklippning, öronrensning och öronryckning samt analsäckstömning. Jag rekommenderar att hundar med tovor blir urtovade innan bad, annars kan tovorna bli hårdare än innan, schampot sköljs inte ur ordentligt och kan irritera huden. Hundar med mycket underull bör ullas ur innan bad, annars kan de få stå i fönen och bli varma i onödan samtidigt som ullen ändå måste borstas ur för att de ska bli torra, det är skönare för hunden att ulla ur torr päls.</p>
</div>
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12 pull-lg-8 pull-md-7 tm-about-img-container">
<img src="img/n2.jpg" alt="Image" class="img-fluid">
</div>
</div>
Templaten använder sig av Bootstrap, vilket i sin tur använder ett gridsystem på 12 kolumner.
Dv.s. varje row kan hålla i 12 columner. (Flexbox).
Som du ser ovan så är det en <div class="row"> följt av en column som är 8 kolumner bred på stora skärmar. Längre ner hittar du din <img> tagg, nästad under en div med klassen col-lg-4, dv.s. denna ska sträcka sig 4 kolumner bred på stora skärmar.
Vilket ger dig en rad med följande template. (t = text, b = bild)
Rad: t t t t t t t t | b b b b
Däremot så är det massa offsets med push/pull, vilket gör att det blir förskjutet åt höger/vänster.
Tar du bort dessa klasser så bör bilden hamna till höger och texten till vänster.
<div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
text...
<div class="col-lg-4 col-md-5 col-sm-12 col-xs-12 tm-about-img-container">
bild...
Mer om Bootstraps gridsystem https://getbootstrap.com/docs/4.0/layout/grid/
Hahah, riktigt kul att du inte kunde hålla dig.
Men toppen, tack för ditt utmärkta svar. Då kan jag nog lösa detta själv!
Hur skapar man en klickbar länk av navigeringssakerna på vänster kolumn?
<nav class="tm-main-nav">
<ul class="tm-main-nav-ul">
<li class="tm-nav-item">
<a href="index.html" class="tm-nav-item-link">Välkommen</a>
</li>
Har skapat en ny exakt kopia fast utan texten där man enbart har ett galleri i höger kolumn.
Vill att man ska kunna trycka på t.ex välkommen så hoppar man tillbaks till index.html-sidan men ingenting händer när jag trycker. Antar att dessa inte fungerar som vanliga knappar i och med att de normalt sett går till olika sektioner på hemsidan.
edit: F12 i webbläsaren fungerade helt sinnessjukt bra - löste problemet med texten vid navigeringsmenyn på ca 2 sekunder..
@kwame:
Det är för att templaten är en s.k. Single Page. Dv.s. att allt innehåll är på en sida och länkarna till vänster är enbart anchor-tags som scrollar dig nedåt på sidan.
Det ligger JavaScript och blockerar länkarna, därför det inte fungerar att göra som du vill.
Bläddrar du längst ner i html dokumentet så hittar du en tagg för
<script src="js/jquery.singlePageNav.min.js"></script> Single Page Nav (https://github.com/ChrisWojcik/single-page-nav)
Tar du bort denna så fungerar det att göra som du vill.
Toppen, tack!
Vad är din spontana tanke på sidan som den är nu?
http://pdev.educationhost.cloud/
Någon fatal brist eller något som skulle göra den betydligt bättre?
10700K | NVIDIA RTX 3080
@kwame: En snabb fix som jag tror skulle göra den behagligare att se på är att ta bort den enorma paddingen som ligger på toppen av loggan i menyn till vänster.
.tm-logo-div {
padding-top: 200px; <-- Ta bort helt eller prova ~20px
padding-bottom: 20px;
}
Haha, är det bara på min skärm det ser bättre ut med paddingen?
För mig hamnar loggan och navigeringsmenyn mer i mitten av sidan då?
edit: Jag har bara testat ha fullhöjd och ändrat bredden på sidan - men så fort som jag sänker höjden så ser sidan ut som en påse med skit så nu ser jag vad du menar.
Hur får jag den att vara centrerad hela tiden oavsett höjd?
10700K | NVIDIA RTX 3080
Okej, har egentligen bara en fråga. Finns det någon bra lösning för att den stora hunden som är huvudbilden i högerkolumnen att bli bra i över 2560 upplösning? Dvs att den täcker hela bilden. Upp till 2560*1440 så gör den det.
https://www.kilshundochkattsalong.se/
Jag har ändrat text och dylikt så att det ska se helt okej ut när det är större upp till 4k.
Men enda sättet jag lyckades lösa bilden var att köra på en bild i högre upplösning, men då blev den ju > 5mb och ja, den laddades långsamt.
edit: hur får man den även att i de vanliga upplösningarna täcka hela bilden höjdmässigt också? (dvs i 1920*1080, 2560*1440)
10700K | NVIDIA RTX 3080
- Igår Asus först med grafikkort för små chassin 15
- 14 / 6 Snabbtest: Termoelektrisk mobilkylare från Cooler Master 7
- 14 / 6 Gigabyte visar upp SSD med 14 GB/s i läshastighet 37
- 14 / 6 Läckta tester visar lovande resultat för Snapdragon X Elite 45
- 13 / 6 Testpilot: MSI Raider GE78 HX 14VHG – kraftfull speldator för gaming på språng 10
- Igår Microsoft raderar Minecraft-konton – rör upp känslor på Reddit 50
- 14 / 6 Microsoft: Därför ska du inte använda lokalt konto 65
- 13 / 6 Aktivister stämmer Valve för osund konkurrens 81
- 13 / 6 Ny sajt läcker kommande spel från Epic Games Store 19
- 12 / 6 Gratis är gott! Del 1: De bästa gratisalternativen till Photoshop 79
- Igår Metas tränar inte sin AI via Instagram och Facebook 8
- Igår Krönika: Apple Intelligence är en frisk fläkt 14
- Igår Helgsnack: Varför valde du din processor? 88
- 14 / 6 WWDC-veckan 2024: De största nyheterna från Apples utvecklarfest 14
- 14 / 6 Microsoft stoppar kritiserade lanseringen av Recall – inte redo 42
- Asus först med grafikkort för små chassin15
- Hörlurar med mikrofon (för samtal) blåtand för cykling?1
- Aktivister stämmer Valve för osund konkurrens81
- Miniräknare som du använder! (programerbara eller inte)80
- Mobilt bredband till sommarstugan, räcker 5mbit/s?45
- Sony tar bort ”8K” från Playstation-kartonger i smyg96
- bra grafikkort4
- Win11 på en 2600k?1
- Diablo IV – den stora tråden3840
- Tipsa om youtube-kanaler ni följer.353
- Köpes Steamdeck el motsv
- Säljes ASUS 27" ROG Swift PG279Q 165 Hz G-Sync
- Säljes Garderobsrensning bla 13600KF, DDR5 A-die, Nintendo Switch, vattenkylning och cable sleeving m.m.
- Köpes Söker nästan komplett dator i delar (Utan chassi)
- Säljes MSI RTX 3060 Ventus 12GB OC
- Säljes Dell latitude E7470
- Säljes Acer Predator XB271HU (165hz, G-sync, IPS, 1440p)
- Köpes Kompakt digitalkamera köpes
- Säljes Ninjutso Sora V2
- Säljes 108” motordriven tab-tension Euroscreen REACT
- Metas tränar inte sin AI via Instagram och Facebook8
- Krönika: Apple Intelligence är en frisk fläkt14
- Asus först med grafikkort för små chassin15
- Helgsnack: Varför valde du din processor?88
- Microsoft raderar Minecraft-konton – rör upp känslor på Reddit50
- WWDC-veckan 2024: De största nyheterna från Apples utvecklarfest14
- Snabbtest: Termoelektrisk mobilkylare från Cooler Master7
- Gigabyte visar upp SSD med 14 GB/s i läshastighet37
- Läckta tester visar lovande resultat för Snapdragon X Elite45
- Microsoft stoppar kritiserade lanseringen av Recall – inte redo42