Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 08-10-2009, 04:12 PM Div inside a div...
Novice Talker

Posts: 7
Trades: 0
Hello all!

I am pretty new to CSS and using <div>'s. What I am trying to do is insert a div into another div and assign a background image to it.

Basically I have the "main div" as <div id="maincontent"> and the div I want to put inside of it and assign the background image to is <div class="welcomeimage">

My main goal is to lay the secondary div in the main div and then have it display the background image so I can lay raw text over it.

I have been reading a bit but I am not sure which direction to go towards to accomplish this.

thanks in advance,

Rob
digitalrob is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-10-2009, 04:17 PM Re: Div inside a div...
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
This is very basic and very easy:
Quote:
<div id="maincontent">
<div id="welcomeimage>
<p>text goes here</p>
<p>text goes here</p>
<p>text goes here</p>

</div>
</div> <!-- end maincontent -->
In your css - set up the dimensions for #maincontent and #welcomeimage, and define the background image for #welcomeimage like this:

#welcomeimage{background: url(image.gif) no-repeat;}

If you WANT the image to repeat, remove the no-repeat from the properties.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 08-10-2009, 04:37 PM Re: Div inside a div...
Novice Talker

Posts: 7
Trades: 0
Quote:
Originally Posted by LadynRed View Post
This is very basic and very easy:


In your css - set up the dimensions for #maincontent and #welcomeimage, and define the background image for #welcomeimage like this:

#welcomeimage{background: url(image.gif) no-repeat;}

If you WANT the image to repeat, remove the no-repeat from the properties.

Thank you very much for your help on this. I attempted to do what you said and ran into some more issues. I was able to create the div but the background is not displaying.

Here is my CSS code (divs in question are in red):

@charset "utf-8";
body {
background: #666666;
margin: 0;
text-align: center;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 50px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColFixRtHdr #container {
width: 758px;
text-align: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-repeat: no-repeat;
background-color: #FFF;
float: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
clear: none;
background-attachment: fixed;
}
.twoColFixRtHdr #header {
background: #DDDDDD; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 204px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 12px;
padding-left: 5px;
background-color: #c0c7e2;
background-image: url(images/sidebartest.jpg);
left: 10px;
}
.twoColFixRtHdr #mainContent {
margin-top: 0;
margin-right: 250px;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-right: px;
padding-bottom: 0;
padding-left: 15px;
}
.twoColFixRtHdr #welcomeimage {
width: 497px
background-image: url(images/maincontent_welcomerev2.jpg);
}
.twoColFixRtHdr #footer {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background-color: #a1968a;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixRtHdr #container #sidebar1 .advantages table tr td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

.twoColFixRtHdr #container #sidebar1 .lslcode {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: 233e98;
}
.twoColFixRtHdr #container #sidebar1 .lslcode div {
color: #233e98;
}
digitalrob is offline
Reply With Quote
View Public Profile
 
Old 08-10-2009, 05:54 PM Re: Div inside a div...
Novice Talker

Posts: 7
Trades: 0
I dont know if this helps at all but I am using dreamweaver, when I select the div and go to its properties it seems to already be populated with the main divs properties (background color width etc). When I make a change in the inside div the main div changes as well...
digitalrob is offline
Reply With Quote
View Public Profile
 
Old 08-10-2009, 06:03 PM Re: Div inside a div...
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
The inside div will have the properties of the main div because the main div is the parent - that's the cascading part of CSS - styles "cascade" down to the children elements.

Can you post the HTML too?
__________________

Please login or register to view this content. Registration is FREE
angele803 is offline
Reply With Quote
View Public Profile
 
Old 08-10-2009, 06:14 PM Re: Div inside a div...
Novice Talker

Posts: 7
Trades: 0
Quote:
Originally Posted by angele803 View Post
The inside div will have the properties of the main div because the main div is the parent - that's the cascading part of CSS - styles "cascade" down to the children elements.

Can you post the HTML too?
Thanks for your help much appreciated! Here is the HTML you requested, thanks again:

<title>Welcome To Lifestyle Lift Letters!</title>
<link href="lsllettersrevamp.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
h6 {
font-size: 11px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
}
h5 {
font-size: 13px;
color: #039;
}
body {
background-color: #a1968a;
}
h4 {
font-size: 18px;
color: #FFF;
}
h3 {
font-size: 11px;
vertical-align: middle;
}
-->
</style></head>

<body class="twoColFixRtHdr">

<div id="container">
<div id="header">
<img src="images/lettersheader.jpg" width="758" height="190" alt="Lifestyle Lift Header" /><img src="images/letters_menu.jpg" width="759" height="35" alt="Lifestyle Lift Menu\" />
<!-- end #header -->
</div>
<div id="sidebar1">
<h4 align="center"> Advantages<br />
of Lifestyle Lift®
</h4><div class="advantages">
<table width="200" border="0">
<tr>
<td width="38" height="100"></td>
<td width="131">- Local Anesthetic<br />
- Awake &amp; Relaxed<br />
- Affordable<br />
- Natural Results<br />
- Minimally Invasive<br />
- Takes About One Hour<br />
- Quick Recovery</td>
<td width="17">&nbsp;</td>
</tr>
</table>
</div>
<h3 align="center">
<div class="rightline"><img src="images/rightbar_line.jpg" width="182" height="3" align="middle" /><br />
<br /></div>
</h3>
<h3>
<div class="rightbar">
<div align="center">Enter your e-mail address below<br />
to receive special offers from<br />
Lifestyle Lift®.</div>
</div>
</h3>

<form id="emailaddresses" method="post" action="form2csvtable.php">
<p align="center">
<input type="text" name="email" id="email" />
<br />
<input type="submit" name="submit" id="submit" value="Submit" />
<input name="table_name" type="hidden" id="table_name" value="emailaddresses" />
<input name="redirect" type="hidden" id="redirect" value="confirmed.html" />
</p>
</form>
<div class="seal">
<div align="center"><img src="images/seal.gif" width="117" height="117" alt="Lifestyle Lift Seal" /></div>
</div>
<br />

<div class="lslcode">
<div align="center">The Lifestyle Lift®<br />
Code of Internet<br />
Conduct and Assurance</div>
</div>
<div class="lslcodedesc">
<h6>Lifestyle Lift® pledges that all Internet communications accompanied by the trademarked Lifestyle Lift® logo are fair and accurately represent the latest in medical information about facial firming procedures.<br />
<br />
The comments and photographs are from actual patients and fairly represent the results and opinions of thousands of our patients. <br />
<br />
Lifestyle Lift® is proud to take a leadership role in establishing new standards of Internet conduct and communications.<br />
<br />
We promise that any Internet communication accompanied by our logo can be relied upon as true and accurate; and all communications originating from our practice will be clearly identified with the Lifestyle Lift® logo. If you have any questions or concerns about the authenticity of any internet content or postings, please contact Lifestyle Lift®. </h6>
</div>
<p><br />
</p>
<p>&nbsp;</p>
</div>
<div id="mainContent">
<div class="welcomeimage">Content for class "welcomeimagerev2" Goes Here</div>
<br />
<h6>At Lifestyle Lift® we have 100,000 clients to date! We regularly receive letters of praise from clients who are delighted with their results and choose to share how it has improved their lives. In turn, we would like to share some of those experiences with you to help give you an idea of what Lifestyle Lift® has done for them and what it could do for you. Some of these letters may address questions you have or give you a better idea of what you may expect if you choose to have a Lifestyle Lift® facial firming procedure.</h6>
<h6>Several of our patients have also agreed to share their Lifestyle Lift® reviews via video testimonials, so you can see and hear the excitement and joy as some of our patients share their experiences. Our Lifestyle Lift® reviews include actual letters received describing transformed lives of tens of thousands of clients, the vast majority of which report absolutely no problems or complaints. These clients often write or call to express gratitude for the procedure and for the renewed vitality their younger, rejuvenated appearance has given them.</h6>
<h6><img src="images/maincontent_reviews.jpg" width="494" height="244" alt="Lifestyle Lift Reviews and Case Studies" /> </h6>
<h2><img src="images/maincontent_lslfoundation.jpg" width="347" height="46" alt="Lifestyle Lift Foundation" /><br />
<img src="images/maincontent_foundation.jpg" alt="Lifestyle Lift Charity" width="285" height="210" align="right" /></h2>
<h6>There are those that are looking to have the cosmetic enhancement to improve their image, while others may need help with cosmetic dilemmas, including birth defects. In fact, the Lifestyle Lift® Foundation is dedicated to identifying children who suffer from these birth defects and providing cosmetic surgery free of charge.</h6>
<h5><u>Click here to learn more &gt;&gt;</u></h5>
<h6><img src="images/maincontent_line.jpg" width="494" height="9" /><img src="images/maincontent_problemscomplaints.jpg" width="334" height="52" alt="Lifestyle Lift Problems" /><br />
The problems and complaints associated with the Lifestyle Lift® facial firming procedure are often minimal, and are generally a result of the minor bruising and swelling that occurs. Compared to more traditional face lifts, however, Lifestyle Lift® procedure usually results in much less trauma to the face.
</h6>
<h5><u>Click here to read more &gt;&gt;</u></h5></div>
<div id="footer">
<p>&nbsp;</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
digitalrob is offline
Reply With Quote
View Public Profile
 
Old 08-10-2009, 06:39 PM Re: Div inside a div...
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
In your css, you have "welcomeimage" set as an id, in the HTML, you are using it as a class. Change either the HTML or the CSS so they match up and you should be good.
__________________

Please login or register to view this content. Registration is FREE
angele803 is offline
Reply With Quote
View Public Profile
 
Old 08-11-2009, 10:50 AM Re: Div inside a div...
Novice Talker

Posts: 7
Trades: 0
Thank you for your help I appreciate it. Any suggestion on some tutorials or good guides for learning divs on both the html and css side?

Thanks again,
Rob
digitalrob is offline
Reply With Quote
View Public Profile
 
Old 08-11-2009, 11:52 AM Re: Div inside a div...
Ninja's Avatar
Experienced Talker

Posts: 30
Trades: 0
w3schools is always a good place to start for the basics
Ninja is offline
Reply With Quote
View Public Profile
 
Old 08-11-2009, 01:39 PM Re: Div inside a div...
Novice Talker

Posts: 7
Trades: 0
Quote:
Originally Posted by Ninja View Post
w3schools is always a good place to start for the basics
Thank you very much! That site has a lot of cool stuff after looking at it a bit, I will definitely be going through some of those guides thats for sure.

Thanks again for everyone who helped!
digitalrob is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Div inside a div...
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.49801 seconds with 12 queries