4 Replies - 882 Views - Last Post: 11 November 2012 - 10:40 AM

#1 ravikiran032  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-January 09

My CSS & HTML code doesn't work exactly

Posted 11 November 2012 - 06:51 AM

HI,

I am beginner in CSS and HTML. I found this website very resourceful that can help me. I have Written the below code but i am facing issues.

#wrapper #item_list {
	background-color: #333;
float:left;
width:62%;

}


The width & float property in #wrapper #item_list rule is not working but it works when i write those values in the element itself using style attribute as <div id="item_list" style="width:62%; float:left">. Could you please let me know why it is not working when i define values in the rule.

My second question, if i define the values using style attribute , i am getting the structure what i need but the background of #site_links is overriding the background of #item_list.

#wrapper #site_links {
	background-color: #0FF;
		
}



Thanks in advance

Below is full code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color: #009;
}

#wrapper #rotating-item-wrapper {
	background-color: #C66;
	height: 300px;
	width: 400px;
	float:left;
}
.rotating-item {
	display: none;
	position: absolute;
}
#wrapper #header1 {
	background-color: #09C;
}
#wrapper {
	background-color: #999;
}
#wrapper #site_info {
	background-color: #936;
	height: 100px;
	overflow: hidden;
margin-left:20px;
}
#wrapper #other_info {
	background-color: #999;
	height: 160px;
	overflow: hidden;
padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}
#wrapper #strip
{
	background-color:inherit;
	height:auto;
	clear:both;
}
}
#wrapper #item_list {
	background-color: #333;
float:left;
width:62%;

}
#wrapper #site_links {
	background-color: #0FF;
	
	
}

</style>

</head>

<body>
<div id="wrapper">
<div id="header1">
header goes here
</div>

<div id="rotating-item-wrapper">
			
		
	
</div>

<div id="site_info"> fgf f fd information goes here 
</div>
<div id="other_info"> other information goes here
</div>
<div id="strip">
  <p>strip seperating; </p>

</div>
<div id="items">
  <div id="item_list" style="width:62%; float:left">
    <img src="images/Thumb_image1.jpg"/> 
    <img src="images/Thumb_image2.jpg"/> 
    <img src="images/Thumb_image3.jpg"/> 
    <img src="images/Thumb_image4.jpg"/> 
    <img src="images/Thumb_image5.jpg"/> 
    <img src="images/Thumb_image6.jpg"/> 
    <img src="images/Thumb_image7.jpg"/> 
    <img src="images/Thumb_image8.jpg"/> 
    <img src="images/Thumb_image9.jpg"/> 
    <img src="images/Thumb_image10.jpg"/>
</div>

<div id="site_links" style="width:auto"> 
  <p>site links goes here </p>
  <p>Quck access</p>
  <p>Purses</p>
  <p>Leather</p>
  <p>Calfskin</p>
</div>
</div>

</div>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: My CSS & HTML code doesn't work exactly

#2 ravikiran032  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-January 09

Re: My CSS & HTML code doesn't work exactly

Posted 11 November 2012 - 07:09 AM

I am unable to edit my post.. so i am specifying a small code change here.. Please remove the tag <div id="items"> and work with the code.
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,988
  • Joined: 08-June 10

Re: My CSS & HTML code doesn't work exactly

Posted 11 November 2012 - 07:13 AM

Hey.

If you check out the browser's Error Console, you should see a warning explaining this. Firefox tells me:
Timestamp: 11.11.2012 14:06:06
Warning: Selector expected.  Ruleset ignored due to bad selector.
Source File: http://htdocs.localhost/test/test.html
Line: 49



Line 49 is your #wrapper #item_list selector, and Firefox is complaining that it is invalid. If you look at the lines just above it, you should see the problem. The brackets don't match up. You've got an extra bracket that is messing up the syntax, causing Firefox to ignore the whole #wrapper #item_list block.

View Postravikiran032, on 11 November 2012 - 01:51 PM, said:

My second question, if i define the values using style attribute , i am getting the structure what i need but the background of #site_links is overriding the background of #item_list.

I'm not sure I follow you here. From what I can see, when you use the style attribute, the #item_list doesn't have a background, and when defined, it sits on top of the #site_links. - Could you maybe post a screenshot of what you are talking about?
Was This Post Helpful? 1
  • +
  • -

#4 ravikiran032  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-January 09

Re: My CSS & HTML code doesn't work exactly

Posted 11 November 2012 - 07:37 AM

I have found my mistake , in css code after rule #wrapper #strip, there is an additional brace. i have removed it and the code works fine. There is one thing examine.. the width of #item_list is 62% and I have have given margin of 2% to the #site_links. I couldn't find any margin in it but if give the margin of 64%( 2% more than the width of #item_list), i could get 2% margin. I believe the #site_links is starting from the left edge of #wrapper but not from the right-edge of #item_list. Please advise.
Was This Post Helpful? 0
  • +
  • -

#5 ravikiran032  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-January 09

Re: My CSS & HTML code doesn't work exactly

Posted 11 November 2012 - 10:40 AM

View PostAtli, on 11 November 2012 - 07:13 AM, said:

I'm not sure I follow you here. From what I can see, when you use the style attribute, the #item_list doesn't have a background, and when defined, it sits on top of the #site_links. - Could you maybe post a screenshot of what you are talking about?


Thanks for quick response. I have removed the extra braces and ran the code. It looks good but there is one thing i need to understand, the width of #item_list is 62% and I gave margin width of 2% to the #site_links. I couldn't find any margin in it but if i change the margin value to 64%( 2% more than the width of #item_list), i could get 2% margin. I believe the #site_links is starting from the left edge of #wrapper but not from the right-edge of #item_list. Please confirm and why so?

If i use margin:2%, the output is as below:

I have attached the output image as i couldn't insert into post. in the image, you can see the green color portion is starting from the beginning of wrapper but not from the right edge of #list_items. Please explain.



Below is my changed code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color: #009;

}

#wrapper #rotating-item-wrapper {
	background-color: #C66;
	height: 300px;
	width: 400px;
	float:left;
}
.rotating-item {
	display: none;
	position: absolute;
}
#wrapper #header1 {
	background-color: #09C;
}
#wrapper {
	background-color: #999;
}
#wrapper #site_info {
	background-color: #936;
	height: 100px;
	overflow: hidden;

	}
#wrapper #other_info {
	background-color: #999;
	height: 200px;
	overflow: hidden;
   
}
#wapper #strip
{
	background-color:inherit;
	height:auto;
	clear:both;
}

#wrapper #item_list {
	/*background-color: #333;*/
	width:62%; float:left;
	}
#wrapper #site_links {
	background-color: #0C0;
	margin-left: 64%;

	/*margin-left: 30px;	*/
}

</style>

</head>

<body>
<div id="wrapper">
<div id="header1">
header goes here
</div>

<div id="rotating-item-wrapper">
			<img src="images/image1.jpg" alt="a person entering a building" class="rotating-item" width="400" height="300" />

      <img src="images/image3.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="400" height="300" />
      <img src="images/image4.jpg" alt="building lobby window reflections" class="rotating-item" width="400" height="300" />  
		
	
</div>

<div id="site_info"> fgf f fd information goes here vjxchvkjxhvkjhxvhxckjh
</div>
<div id="other_info"> other information goes here
</div>
<div id="strip">
  <p>strip seperating; </p>
</div>

  <div id="item_list" >
    <img src="images/Thumb_image1.jpg"/> 
    <img src="images/Thumb_image2.jpg"/> 
    <img src="images/Thumb_image3.jpg"/> 
    <img src="images/Thumb_image4.jpg"/> 
    <img src="images/Thumb_image5.jpg"/> 
    <img src="images/Thumb_image6.jpg"/> 
    <img src="images/Thumb_image7.jpg"/> 
    <img src="images/Thumb_image8.jpg"/> 
    <img src="images/Thumb_image9.jpg"/> 
    <img src="images/Thumb_image10.jpg"/>
</div>

<div id="site_links"> 
  <p>site links goes here </p>
  <p>Quck access</p>
  <p>Purses</p>
  <p>Leather</p>
  <p>Calfskin</p>
</div>


</div>


</body>
</html>



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1