[HTML5/CSS]Plassering av "div"

High Magus

23. oktober 2013

Kan noen fortelle meg hvorfor rektangelet under de tre første ikke flytter seg?
Her er screenshot:
http://i.imgur.com/lsKNjpM.png

HTML - index.html

Kode

<!DOCTYPE html>
<html>
	<head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
		<script src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src='script.js'></script>
		<title>Memory</title>
	</head>
	<body>
	    <div id="1" class="1">1</div>
	    <div id="1" class="1">1</div>
	    <div id="2" class="2">2</div>
		<br>
	    <div id="2" class="2" class="mid">2</div>
	    <div></div>
	    <div id="id2True"></div>
	    <div id="id1True"></div>
	    <div id="test"></div>
	    <div id="test2"></div>
	</body>
</html>

CSS - style.css

Kode

div{
    border: 2px solid black;
	border-radius: 7px;
    width: 70px;
    height: 50px;
	margin: 10px 10px 0px 10px;
    background-color: black;
}

.mid{
	margin: 10px 10px 0px 100px;
}

andrew92

16 3

23. oktober 2013

Sitat av 10100

Kan noen fortelle meg hvorfor rektangelet under de tre første ikke flytter seg?
Her er screenshot:
http://i.imgur.com/lsKNjpM.png

HTML - index.html

Kode

<!DOCTYPE html>
<html>
	<head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
		<script src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src='script.js'></script>
		<title>Memory</title>
	</head>
	<body>
	    <div id="1" class="1">1</div>
	    <div id="1" class="1">1</div>
	    <div id="2" class="2">2</div>
		<br>
	    <div id="2" class="2" class="mid">2</div>
	    <div></div>
	    <div id="id2True"></div>
	    <div id="id1True"></div>
	    <div id="test"></div>
	    <div id="test2"></div>
	</body>
</html>

CSS - style.css

Kode

div{
    border: 2px solid black;
	border-radius: 7px;
    width: 70px;
    height: 50px;
	margin: 10px 10px 0px 10px;
    background-color: black;
}

.mid{
	margin: 10px 10px 0px 100px;
}

Vis hele sitatet...

Du må gjøre det slik om du skal benytte to klasser.

Kode

<div id="2" class="2 mid">2</div>

Slik ser det ut for meg, etter jeg gjorde slik jeg skrev over.

http://gyazo.com/785e63086f49874c0333c064fe7f664a.png

10100

High Magus

Trådstarter

404 156

23. oktober 2013

Takk

Hvordan gjør jeg hvis jeg vil flytte den opp slik at den blir på linje med de andre? Prøvde med "margin-top: -100px" men da flyttet alt på seg slik at de lå over hverandre.

Yochi

1.020 230

23. oktober 2013

Du kan foreksempel eksperimentere med "float: right;" eller "float: left;", eller se på de forskjellige mulighetene med "display: inline" og "display: inline-block;".

andrew92

16 3

23. oktober 2013

Da kan du benytte float.

CSS:

Kode

div{
    border: 2px solid black;
	border-radius: 7px;
    width: 70px;
    height: 50px;
	margin: 10px 10px 0px 10px;
    background-color: black;
}

.mid{
	margin: 10px 10px 0px 100px;
}

.floatleft{
	float: left;
}

HTML:

Kode

<!DOCTYPE html>
<html>
	<head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
		<script src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src='script.js'></script>
		<title>Memory</title>
	</head>
	<body>
	    <div id="1" class="1">1</div>
	    <div id="1" class="1">1</div>
	    <div id="2" class="2 floatleft">2</div>
	    <div id="2" class="2 mid floatleft">2</div>
	    <div></div>
	    <div id="id2True"></div>
	    <div id="id1True"></div>
	    <div id="test"></div>
	    <div id="test2"></div>
	</body>
</html>

Resultat:
http://gyazo.com/9e6b8835d2b69119c77954f33f86f007.png

Årsaken til at det er distance i mellom den div`en som er mest til høyre og den til venstre for den, er pga. margin-left som er satt til 100px i css`en under .mid

Sist endret av andrew92; 23. oktober 2013 kl. 11:44.