Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016

Behöver lite hjälp i CSS

Försöker göra knappar för att ladda ner olika iphone appar, och just nu går det dåligt, allt annat har funkat helt utan problem, här är en bild på vad som händer.
http://oi66.tinypic.com/34zwxfn.jpg
Iställer för att det blir en till knapp så fastnar den under, vet inte hur jag ska lösa det här.
(Det här är bara testknappar, kommer endast lägga upp mina egna projekt när hemsidan är klar)

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Tyresö
Registrerad
Apr 2014

Hur ser koden ut?

Intel i7 4770 | GTX 980 stockkylare | Corsair Vengeance 1600MHz | Coolermaster 412S | Evga supernova G2 750w Guld | Nzxt H440 röd | MSI Gaming 5 | Logitech G502 | Benq XL2430T 144 Hz | Xtrify XG1-R | Flygprylar: Thrustmaster warthog | Saitek combat rudder pedals | Oculus rift CV1

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016
Skrivet av Foxmaner:

Hur ser koden ut?

http://oi63.tinypic.com/28s51xz.jpg

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Tyresö
Registrerad
Apr 2014

Verkar som att du använder ID:s. Använd klasser istället. Blir te.x: .enKlass{ }

Intel i7 4770 | GTX 980 stockkylare | Corsair Vengeance 1600MHz | Coolermaster 412S | Evga supernova G2 750w Guld | Nzxt H440 röd | MSI Gaming 5 | Logitech G502 | Benq XL2430T 144 Hz | Xtrify XG1-R | Flygprylar: Thrustmaster warthog | Saitek combat rudder pedals | Oculus rift CV1

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016
Skrivet av Foxmaner:

Verkar som att du använder ID:s. Använd klasser istället. Blir te.x: .enKlass{ }

Okej tacka ska prova!

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016

@Foxmaner: blir exakt samma resultat :/

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

Det är helt okej att använda id istället för class i detta fallet.

#app li borde se ut enligt nedan, ta bort position: absolute; och float: left; och sätt display till inline-block istället för inline. Viktigt att ta bort dubbletter, exempelvis "display: inline;".

#app li { height: 80px; width: 80px; display: inline-block; text-align:center; margin: 0 62px 10px 0; }

Ändra #app ul till display: block;

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016

@kevvs: det blev bara värre nu, nu är inte ens appbilden i mitten och det är exakt likadant med den andra appen.

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

Ge oss din kod här så ska vi hjälpa dig att förstå vad det är som blir fel. Använd [ code ] DIN KOD [/ code ] utan mellanslag inom [].

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016

<!DOCTYPE html> <html> <head> <title> PHILLE131 - IPA</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <div id="header"></div> <div id="menubar"> <ul> <li><a href="index.html">Home</a> <li><a href="about.html">About me</a> <li><a href="ipas.html">IPA's</a> <li><a href="contact.html">Contact</a> </ul> </div> <div id="mainbody"> <div id="app"> <ul> <center> <il> <img src="https://s-media-cache-ak0.pinimg.com/564x/da/84/c2/da84c206c2..." width="80" height="80"> <p>Minecraft:PE</p> <il> <img src="http://is5.mzstatic.com/image/thumb/Purple111/v4/90/4e/dc/904..." width="80" height="80"> <p>Goat Simulator</p> </il> </il> </center> <ul> </div> </div> <div id="footer"> <center> <p>Copyright &copy 2017 PHILLE131</p> </center> </div> </div> <div id="leftbar"> <p>This is a bar, on the left side of the website, I haven't figured out what do with this yet.</p> </div> </body> </html>

Dold text

body{ background-image: url("backgrounds.jpg"); } #header{ background-image: url("header.jpg"); background-color: white; width: 800px; height: 175px; position:absolute; border-radius: 20px; } #main{ width: 800px; height: 800px; position:absolute; left: 50%; margin-left: -400px; border-radius: 20px } #menubar{ background-color: white; width: 800px; height: 25px; position:absolute; margin-top: 180px; border-radius: 20px; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); } #menubar ul{ display: inline; } #menubar li{ height: 25px; float: left; display: inline; margin-right: 82px; text-align: center; margin-left: 10px; } #menubar a:link{ background-color: #42a7f4; font-family: "Courier New"; color: white; text-decoration: none; width: 78px; height: 25px; font-size: 14px; margin-left: 200px; position:absolute; border-right: 1px solid black; border-left: 1px solid black; border-radius: 10px; } #menubar a:visited{ background-color: #42a7f4; font-family: "Courier New"; color: white; text-decoration: none; border-left: 1px solid black; border-right: 1px solid black; } #menubar a:hover{ background-color: #1c54bc; text-decoration: underline; color: white; } #mainbody{ background-color: white; word-wrap: break-word; padding: 10px; width: 780px; height: 500px; position:absolute; margin-top: 210px; border-radius: 20px; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); } h2{ margin: auto; font-family: "Courier New"; } #footer{ background-color: white; padding: 10px; width: 780px; height: 50px; position:absolute; margin-top: 735px; border-radius: 20px; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); } #leftbar{ background-color: white; width: 70px; height: 800px; position:absolute; left:0%; margin-left: 0px; border-radius: 20px; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); } p{ font-family: "Courier New"; } #app{ background-color: white; width: 160px; height: 160px; position:absolute; border-radius: 20px; text-align: center; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); } #app ul{ display: block; } #app li{ height: 80px; display: inline-block; margin-right: 82px; text-align: center; margin-left: 10px; } #app a:link{ background-color: #42a7f4; font-family: "Courier New"; color: white; text-decoration: none; width: 80px; height: 80px; font-size: 14px; margin-left: 10px; border-right: 1px solid black; border-left: 1px solid black; border-radius: 10px; } #app a:visited{ background-color: #42a7f4; font-family: "Courier New"; color: white; text-decoration: none; } #app a:hover{ background-color: #1c54bc; text-decoration: underline; color: white; }

Dold text

@Kevvs

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

Där är många fel i din kod. Bland annat så finns inte <il>, du öppnar <ul> på flera ställe utan att stänga med </ul> så jag kan förstå att din kod inte fungerar...

Du kan läsa mer här.

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Maj 2016
Skrivet av kevvs:

Där är många fel i din kod. Bland annat så finns inte <il>, du öppnar <ul> på flera ställe utan att stänga med </ul> så jag kan förstå att din kod inte fungerar...

Du kan läsa mer här.

jaha, oj då, min ursäkt får väl va att jag inte har gjort något sånt här på mer än 6 månader
Tack!

i5 3350 3.10hz, GeForce Gtx 750ti, Corsair 4x2 DDR3 RAM, 2tb Seagate Barracuda 7200rpm

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

Gå in på länken som jag tipsade om och lär dig lite om html och dess taggar. Det är för många saker att lära dig och peka ut alla fel skulle ta lång tid. Vi hjälper dig gärna med specifika frågor dock.