Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Make a sidebar white also white as content?

background footer content

  • Please log in to reply
2 replies to this topic

#1 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 28 August 2012 - 09:38 PM

Hi, I want to make a sidebar background is also white, like a content and with a size of content, is it possible?

hope fiddle and picture will help to understand the situation: http://jsfiddle.net/Stasonix/HrEmH/

foto http://www.imagebam....d0109c208174895

My page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="public/css/style1.css" media="all">
<title>test.loc</title>
</head>
<body>
<div id="wrapper">
<div id="header">

	 <h1 class="rule"><a href="http://test.loc"><span>test.loc</span></a></h1>
	
	 <ul>
		 <li><a href="http://test.loc/jQuery.html">jQuery</a></li>
		 <li><a href="http://test.loc/php.html">PHP</a></li>
		 <li><a href="http://test.loc/html.html">HTML</a></li>
		 <li><a href="http://test.loc/css.html">CSS</a></li>
	 </ul>

</div>
<div id="container">

	 <div class="emptyline"></div>

	 <div id="sidebar">
	
		 <div id="sub">
			 <h4>Message</h4>
			 <ul>
			 <li><a href="/a.html"><strong>a</strong></a></li>
			 <li><a href="/b.html">b</a></li>
			 <li><a href="/c.html">c</a></li>

			 <li><a name="web" class="new" href="/new/new.html">new</a></li>
			 <li><a href="/e.html"><strong>e</strong></a></li>
			 <li><a name="apl" class="new" href="/f/new.html">new</a></li>
			 </ul>
			 <h4>message</h4>
			 <p>message</p>
			 <h4>message</h4>
			 <p></p>
			 <li class="l1"><a title="placeholder" href="#"><img width="135" height="70" alt="placeholder" src="public/img/image.gif"></a></li>
			 <p></p>
			 <h4>message</h4>
			 <p>message</p>
			 <p>message</p>
			 </div>
		
	 </div>
	 <div id="content">
		 <div id="caption"><h2>Title</h2></div>
		
		 <div id="main">
		
		 <div id="slider">SLIDER OF IMAGES</div>
		
		
					 <h3>hash</h3>
		 <p>Overview</p>
		 <h3>test</h3>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		 <p>
			
			 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			
			 </p>
		
<h3>Rec:</h3>
		 <p></p>
		 <ul class="img">
			 <li class="l1"><a href="#" title="placeholder"><img src="public/img/image.gif" alt="placeholder" height="70" width="135"></a></li>
			 <li><a href="#" title="placeholder"><img src="public/img/image.gif" alt="placeholder" height="70" width="135"></a></li>
			 <li><a href="#" title="placeholder"><img src="public/img/image.gif" alt="placeholder" height="70" width="135"></a></li>
</ul>
<p></p>
<p></p>
<p></p>
<p></p>
		 </div>
	 </div>
</div>
</div>

<div id="footer">
<span><a href="#header"><img src="http://bawyka.loc/public/img/top.gif" alt="top" height="30" width="29"></a></span>
<p>Content © <a href="#">Author</a>. Design © AsIs</p>
	
</div>
<!-- End. footer.php -->
</body>
</html>

and a css of it:

* {
margin: 0;
padding: 0;
}
html, body {
background: none repeat scroll 0 0 #660000;
height: 100%;
width: 100%;
}
ul {
line-height: 1.8em;
list-style-type: none;
padding: 0;
text-align: left;
}
ul, p {
font-size: 1em;
line-height: 1.4em;
margin: 15px 0 20px;
text-align: left;
}
a {
border-bottom: 1px solid #FFC4C4;
color: #FF0000;
text-decoration: none;
}
.new {
color: #61B0FF;
}
h3, h4 {
color: #000000;
font-size: 2em;
font-weight: normal;
margin: 0;
}
h4 {
font-size: 1.7em;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#header:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#header {
width: 100%;
}
#header h1 {
color: white;
font-family: Georgia,Times New Roman,Times,serif;
font-size: 2em;
font-weight: normal;
padding: 1.2em 0 28px 1.1em;
}
#header h1 a {
border: medium none;
color: #FFFFFF;
text-decoration: none;
}
#header h1 a span {
color: #FF0000;
}
#header ul {
float: right;
font-size: 1em;
line-height: 1em;
list-style-type: none;
margin: -6.9em 0 0;
padding: 0 10px;
text-align: left;
}
#header ul li {
background: none repeat scroll 0 0 transparent;
float: left;
font-size: 1em;
line-height: 1.8em;
list-style-type: none;
margin: 0 10px;
padding: 0;
text-align: center;
}
#header ul li a {
border-bottom: 0.3em solid #3F0000;
color: #FFFFFF;
display: block;
font-size: 1.2em;
line-height: 1.8em;
list-style-type: none;
padding: 2em 10px;
text-align: center;
text-decoration: none;
}
#header ul li a:hover {
border-color: #FF0000;
}
.emptyline {
display: block;
height: 20px;
padding: 5px 0;
}
#container {
background: none repeat scroll 0 0 #FFFFFF;
height: auto !important;
}
#sidebar {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
height: auto !important;
min-height: 300px;
width: 200px;
}
#sub {
background-color: #FFFFFF;
float: left;
height: auto !important;
min-height: 267px;
padding: 20px 10px 0 20px;
width: 172px;
}
.li {
border: medium none !important;
list-style: none outside none;
margin: 0 !important;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
height: auto !important;
min-height: 300px;
width: 800px;
}
#content #caption {
background: none repeat scroll 0 0 #660000;
height: 1%;
margin: 0 auto;
width: 740px;
}
#content #caption h2 {
color: #FFFFFF;
font-size: 1.9em;
font-weight: normal;
margin: 0;
padding: 45px 170px 47px 30px;
}
#content #main {
margin: 10px auto;
width: 740px;
}
#content #main #slider {
height: 103px;
text-align: center;
}
#content ul.img {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#content ul.img:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#content ul.img li {
background: none repeat scroll 0 0 transparent;
float: left;
margin-bottom: 10px;
margin-left: 10px;
padding: 0;
}
#content ul.img li a {
border: medium none;
}
#content ul.img li img {
border: 7px solid #990000;
padding: 1px;
}
#content ul.img li a:hover img {
border-color: #000000;
}
#footer {
clear: both;
width: 100%;
}
#footer a {
border: medium none;
}
#footer p {
color: #FFFFFF;
margin: 0;
padding: 10px;
}
#footer span {
float: right;
margin: 0 10px 0 0;
}
#footer p a {
color: #FFFFFF;
}

  • 0

#2 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 28 August 2012 - 09:44 PM

Do you want to make a sidebar's background color to be the same as the content's background, whatever that is, and make the height of the sidebar always the same height as the content part?
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#3 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 28 August 2012 - 10:13 PM

CC Mentor, yes, the same!
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download