Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Positionering inom- och mellan divar

1
Skriv svar
Permalänk
Medlem
●

Positionering inom- och mellan divar

Jag gjorde en bild för det är lättare att förstå vad jag menar då

Jag har gjort en border på varje div för att ni ska se den. Rubriken är t.ex. en h3 och texten i en p-tagg.
Jag har försökt och jag får inte till positioneringen på objekten inuti divent samt divarnas relation till varandra.

Varje objekt består alltså av en div, en img, en h3 och en p. Vilken sorts positionering ska jag använda på respesktive?

Tack

Visa signatur

//Andreas Olsson

Redigera
Citera flera Citera
Permalänk
Medlem
●

Borde väl fungera om du gör såhär:

<div>
<img>
<h3>
<p>
</div>

Sätt sedan h3, p som float: left;

Möjligtvis att du behöver sätta img som float left också, men tror inte du behöver göra det.

Hoppas det var detta du undrade över.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Kommer antalet "boxar" vara dynamiskt eller kommer det alltid att vara 4?

Här är ett litet test, du får laborera dig fram.

<html>
<head>
	<title>Test</title>
	<style type="text/css">
		.box {
			border: 1px solid #555;
			padding: 20px;
			width: 300px;
		}
		.image {
			border: 1px solid #AAA;
			float: left;
			height: 50px;
			width: 50px;
		}
		.text {
			display: inline;
			float: left;
			margin-left: 20px;
			width: 225px;
		}
		.clear {
			clear: both;
		}
		
		.boxarea {
			width: 800px;
		}
		.boxes {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		.boxes li {
			float: left;
			margin: 5px 25px 50px 25px;
		}
	</style>
</head>
<body>

<div class="box">
  <img src="" alt="" class="image" />
  <div class="text">
    <h3>Rubrik</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis magna id metus mattis rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
  </div>
  <div class="clear"></div>
</div>

<hr>

<div class="boxarea">

<ul class="boxes">
	<li>
		<div class="box">
		  <img src="" alt="" class="image" />
		  <div class="text">
			<h3>Rubrik</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis magna id metus mattis rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
		  </div>
		  <div class="clear"></div>
		</div>
	</li>
	<li>
		<div class="box">
		  <img src="" alt="" class="image" />
		  <div class="text">
			<h3>Rubrik</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis magna id metus mattis rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
		  </div>
		  <div class="clear"></div>
		</div>
	</li>
	<li>
		<div class="box">
		  <img src="" alt="" class="image" />
		  <div class="text">
			<h3>Rubrik</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis magna id metus mattis rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
		  </div>
		  <div class="clear"></div>
		</div>
	</li>
	<li>
		<div class="box">
		  <img src="" alt="" class="image" />
		  <div class="text">
			<h3>Rubrik</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis magna id metus mattis rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
		  </div>
		  <div class="clear"></div>
		</div>
	</li>
</ul>

</div>

</body>
</html>
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag rekommenderar att du använder overflow: hidden istället för clear-divs för att expandera boxhöjden.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Teknocide
Jag rekommenderar att du använder overflow: hidden istället för clear-divs för att expandera boxhöjden.

ehh, varför då? Så att det inte ska se lika ut i olika webbläsare?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av thrawn
ehh, varför då? Så att det inte ska se lika ut i olika webbläsare?

Det gör det väl inte? De flesta rekommenderar overflow: auto eller hidden.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Teknocide
Det gör det väl inte? De flesta rekommenderar overflow: auto eller hidden.

Kanske är snyggar om man lyckas få till det, men IE tolkar det så olika mellan versionerna och plattformar så jag tycker alltid att det är krångligt att få till det. Sätter man hidden så är det lätt hänt att man gömmer innehåll, sätter man auto så får man lika lätt scrollbars, båda fallen är ju oönskade. Det blir helt enkelt mycket meck mellan webbläsarna. Därav använder jag en clear:both tagg... Visst, det är inte lika snyggt, men är väldigt mycket lättare att implementera. Då jag ofta får ganska invecklade designer till de sidor jag implementerar så är den tiden som jag slipper krångla värd mycket.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för hjälpen och det tydliga exemplet. Det fungerade perfekt!

Visa signatur

//Andreas Olsson

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