Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Hjälp med simpelt CSS fel

Svara
2013-06-29, 17:07
  #1
SchmiDt-
Medlem
SchmiDt-s avatar
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
ozzle
Medlem
ozzles avatar
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
SchmiDt-
Medlem
SchmiDt-s avatar
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
SchmiDt-
Medlem
SchmiDt-s avatar
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
SchmiDt-
Medlem
SchmiDt-s avatar
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
..FAN..
Medlem
..FAN..s avatar
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
SchmiDt-
Medlem
SchmiDt-s avatar
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
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback