Hjälp med simpelt CSS fel

2013-06-29, 17:07 #1

Medlem

Reg: Apr 2009

Inlägg: 636

Hej! Det är så att jag håller på lär mig mer om CSS. Men det jag har fastnat lite på är att jag har gjort två stycken Sidebar A och B som är åt högersida.

Det som är problemet är att när jag skriver text i sidebaren så åker själva bakgrunden mer och mer mot mitten och texten kommer mot mitten.

Kolla på bilderna.

Så är det utan text: http://www.bilddump.se/bilder/201306...02.132.219.jpg

När jag skriver in text i sidebaren: http://www.bilddump.se/bilder/201306...02.132.219.jpg

Så ser min index.html ut:

HTML-kod:

</head>


<body>

<div id="page-container">

	<div id="main-nav">
	<dl class="hidden">
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</div>
	
	<div id="header">Header</div>
	
	<div id="sidebar-a"></div>

	<div id="sidebar-b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	</div>
	
	<div id="content">	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.	</div>
	
	<div id="footer">Footer</div>

</div>

</body>
</html>

Så ser min master.css ut:

Kod:

.hidden {
	display: none;
}

#page-container {
	width: 1280px;
		margin: auto;

}
#main-nav {
	background: blue;
	height: 50px;
	
}

#header {
	background: green;
	height: 150px;

}
#sidebar-a {
	background: purple;
	float: right;
	padding-right: 150px;
	padding: 150px;
}

#sidebar-b {
	background: #770276;
	clear: both;
	float: right;
	padding-right: 150px;
	padding: 150px;

}
#content {
	background: orange;
	margin-right: 500px;
	height: 600px;
}

#footer {
	background: black;
	clear: both;
	height: 100px;
}
html, body {
	margin: 0;
	padding: 0;
}

Hoppas någon vet vad jag ska skriva så att Sidebaren håller sig på plats och kan skriva text där

Citera

2013-06-29, 17:19 #2

Medlem

Reg: Jan 2009

Inlägg: 48

Såg att både sidebar A och B har egenskapen float:right; är inte jättehaj på CSS men prova med en absolut positionering med egenskapen right:0px;

Hoppas det löser sig.

Edit: kom på att det kanske funkar om du slänger in en div mellan A och B med egenskapen clear:both; istället för att ha den i B.

M.v.h. Ozzle

__________________
Senast redigerad av ozzle 2013-06-29 kl. 17:21.

Citera

2013-06-29, 17:22 #3

Medlem

Reg: Apr 2009

Inlägg: 636

Citat:

Ursprungligen postat av ozzle

Såg att både sidebar A och B har egenskapen float:right; är inte jättehaj på CSS men prova med en absolut positionering med egenskapen right:0px;

Hoppas det löser sig.

M.v.h. Ozzle

Det har jag inte tänkt på, ska testas! Tack.

Citera

2013-06-29, 17:28 #4

Medlem

Reg: Apr 2009

Inlägg: 636

Citat:

Ursprungligen postat av ozzle

Såg att både sidebar A och B har egenskapen float:right; är inte jättehaj på CSS men prova med en absolut positionering med egenskapen right:0px;

Hoppas det löser sig.

Edit: kom på att det kanske funkar om du slänger in en div mellan A och B med egenskapen clear:both; istället för att ha den i B.

M.v.h. Ozzle

ok, jag testade det med right som du sade först och funkade inte ej. Men ska testa med div clear

Citera

2013-06-29, 17:37 #5

Medlem

Reg: Apr 2009

Inlägg: 636

Citat:

Ursprungligen postat av ozzle

Såg att både sidebar A och B har egenskapen float:right; är inte jättehaj på CSS men prova med en absolut positionering med egenskapen right:0px;

Hoppas det löser sig.

Edit: kom på att det kanske funkar om du slänger in en div mellan A och B med egenskapen clear:both; istället för att ha den i B.

M.v.h. Ozzle

Funkade inte om du tänkte på att jag gör så här:

HTML-kod:

<div id="sidebar-a"></div>
	
<div style="clear:both"></div>

	<div id="sidebar-b">

EDIT: Jag fixade det, jag var tvungen att sätta in ett margin-left: 1000px; och ta bort padding verkar det som! hoppas det funkar bättre nu. Tack för hjälpen i alla fall

__________________
Senast redigerad av SchmiDt- 2013-06-29 kl. 17:48.

Citera

2013-06-29, 17:56 #6

Medlem

Reg: Dec 2008

Inlägg: 2 662

Fattar inte exakt hur du vill ha det men lägg en div runt sidebar-a och b.

HTML:

HTML-kod:

<div id="sidebar">
	<div id="sidebar-a"></div>

	<div id="sidebar-b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	</div>

</div>

CSS:

HTML-kod:

#sidebar {
	float:right;
	width:400px;//eller hur bred du vill ha den
}

och ta bort clear och float i #sidebar-b och #sidebar-a.

EDIT: missade din edit att problemen var lösta

Citera

2013-06-29, 18:00 #7

Medlem

Reg: Apr 2009

Inlägg: 636

Citat:

Ursprungligen postat av ..FAN..

Fattar inte exakt hur du vill ha det men lägg en div runt sidebar-a och b.

HTML:

HTML-kod:

<div id="sidebar">
	<div id="sidebar-a"></div>

	<div id="sidebar-b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	</div>

</div>

CSS:

HTML-kod:

#sidebar {
	float:right;
	width:400px;//eller hur bred du vill ha den
}

och ta bort clear och float i #sidebar-b och #sidebar-a.

EDIT: missade din edit att problemen var lösta

Tack så mycket. Det ser faktiskt bättre ut än det jag har gjort. Ska testa det också.

Citera

Hjälp med simpelt CSS fel

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in