Boxproblem (CSS)

Det här forumet visas bäst i en modern webbläsare med JavaScript påslaget.

Boxproblem (CSS)

MAlM

Hejsan,

Är ny inom området webdesign och har lärt mig CSS för ett tag sen. Har gjort 3 boxar men bara 2 visas. Alla boxar har exakt samma kod på alla boxar förutom positioneringen då.

Boxkoden:

<style type="text/css">
<!--
body {margin: 25px;}
#ap3 {width: 300px; margin: 20px auto 20px auto;}
#box3 {background-color: #00CED1;
width: 150px;
padding: 25px; position: absolute;}
-->
</style>

HTML dokumentet:

<html>
<title>stillmad.gaming</title>
<center><img src="http://data.fuskbugg.se/skalman01/sentana.JPG"; width="700" height="150"></center>
<head>
<link href="stillmadcss.css" rel="stylesheet" type="text/css">
<link href="stillmadcss2.css" rel="stylesheet" type="text/css">
<link href="stillmadcss3.css" rel="stylesheet" type="text/css">
</head>
<div id="ap">
<div id="box"><center><p>innehåll här</p><p>innehåll här</p></center></div>
<div id="ap2">
<div id="box2"><center>innehåll här</center></div>
<div id="ap3">
<div id="box3"><center>innehåll här</center></div>
</div>

Någon som vet vad felet är?

MVH

MAlM

frisko

Din kod ser allmänt rörig ut. Du har ingen body-tagg, din html-tagg avslutas inte och head-taggarna har du placerat lite fel.

Dina ap-boxar avslutas inte, och vad är de till för?

MAlM

FRISKO:

Citerar en vän som gav mig ett tips: "Okej, ett par tips då: För att centrera hela sidan (skapa en div med allt innehåll), skriv

#divens_namn(det är ap){
margin: 0 auto;
}

För att sedan få alla boxar bredvid varandra kan du göra så att du ger varje box ett id.

#box1{
float: left;
}

#box2{
float: left;
}

#box3{
float:left;
}

Edit: Avslutade ap nu så nu funkar det :) Tack för hjälpen

john

Vilken box visas inte?

neme

Fixade in all kod inom < code></code> (utan mellanslag) så det ser lite bättre ut.

För övrigt borde htmldokumentet se ut något åt det här hållet:

<html>
	<head>
		<title>stillmad.gaming</title>
		<link href="stillmadcss.css" rel="stylesheet" type="text/css">
		<link href="stillmadcss2.css" rel="stylesheet" type="text/css">
		<link href="stillmadcss3.css" rel="stylesheet" type="text/css">
	</head>
	
	<body>
		
		<!-- Det här borde också vara inom en div -->
		<center><img src="http://data.fuskbugg.se/skalman01/sentana.JPG"; width="700" height="150"></center>
		
		<div id="ap">
			<div id="box"><center><p>innehåll här</p><p>innehåll här</p></center></div>
		</div>
		
		<div id="ap2">
			<div id="box2"><center>innehåll här</center></div>
		</div>
		
		<div id="ap3">
			<div id="box3"><center>innehåll här</center></div>
		</div>
		
	</body>
	
</html>

Och varför kör du med tre olika stilmallar? Räcker det inte med en?

wimpey

john_ skrev:

Vilken box visas inte?

Edit: Avslutade ap nu så nu funkar det :) Tack för hjälpen

Johan

MAlM skrev:
innehåll här
Eftersom center-taggen inte är ett inline-element utan kan jämföras med en div i nivå, är det mer korrekt om du "inlindar" hela bodyns innehåll med center-taggen - om det nu är effekten du vill uppnå.

http://htmlhelp.com/reference/wilbur/block/center.html skriver:

The CENTER tag is not text-level markup, so do not use it to center single lines of text inside a paragraph or any other block element.

ice

Använd inte <center> taggen. Den är deprecated från version 4.01 och stöds inte i xhtml.

Vill du centrera ett element så använd

.center {
  margin:0 auto;
}

För att använda det

<div class="center">Hey World!</div>

Johan

ice skrev:

Använd inte taggen. Den är deprecated från version 4.01 och stöds inte i xhtml.

Vill du centrera ett element så använd
.center {
  margin:0 auto;
}
För att använda det
Hey World!

Nu måste jag klaga på semantiken igen :P. Eftersom HTML-koden bara ska strukturera dokumentet, och inte styra layouten är det mer passande att döpa det till något som beskriver vad det ska innehålla, t.ex. så skulle kanske:

<div class="red-and-shiny">2005-04-09 12:01:34</div>

Passa bättre som:

<div class="timestamp">2005-04-09 12:01:34</div>

Förstås skillnaden? Ett undantag är förstås om du ska visa olika textformatteringsstilar i en artikel eller något.

ice

Johan skrev:

ice skrev:

Använd inte taggen. Den är deprecated från version 4.01 och stöds inte i xhtml.

Vill du centrera ett element så använd
.center {
  margin:0 auto;
}
För att använda det
Hey World!
Nu måste jag klaga på semantiken igen :P. Eftersom HTML-koden bara ska strukturera dokumentet, och inte styra layouten är det mer passande att döpa det till något som beskriver vad det ska innehålla, t.ex. så skulle kanske:
2005-04-09 12:01:34
Passa bättre som:
2005-04-09 12:01:34
Förstås skillnaden? Ett undantag är förstås om du ska visa olika textformatteringsstilar i en artikel eller något.

Det var bara ett exempel, där jag ville visa att man kan centrera innehåll med en css regel, istället för att använda taggen <center>, som inte stöds i xhtml och som är deprecated i html 4.x.

Jag vet att man inte ska döpa saker och ting till obegripliga namn som inte beskriver innehållet.