Forum Mjukvara Programmering och digitalt skapande Tråd

Behöver lite hjälp i CSS

1
Skriv svar
Permalänk
Medlem
●

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)

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Hur ser koden ut?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Foxmaner:

Hur ser koden ut?

Gå till inlägget

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Foxmaner:

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

Gå till inlägget

Okej tacka ska prova!

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

@Foxmaner: blir exakt samma resultat :/

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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;

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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 [].

Redigera
Citera flera Citera
Permalänk
Medlem
●
<!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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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!

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara