PDA

View Full Version : question about div inside of div


djbutter22
01-08-2010, 06:44 PM
Hi,
I have a div in the center of the page (div#colTwo) I inserted another div inside of this div where I want to put text that is seperate from the other text. (div#this week) I applied a border to the css of the inside div but it doesn't show up. Any ideas on what might be happening?

domedia
01-08-2010, 06:58 PM
You must have done something wrong. CSS borders have no bugs.
Link?

djbutter22
01-08-2010, 07:12 PM
ok thanks domedia, I will double check and then check again.

rattlsnak
01-08-2010, 07:19 PM
post the code or a link is what he meant..

djbutter22
01-08-2010, 07:25 PM
oh :wink: http://schools.cfisd.net/cylakes/index.htm

</div>
<div id="colTwo"><span class="style8"> <span class="style9">
<marquee behavior="scroll" direction="left"onmouseover="this.stop()" onmouseout="this.start()">
</marquee>
</span> </span>
<h2>&nbsp;</h2>
<h2>Welcome to Cypress Lakes!</h2>
<p><em><strong>Cypress Lakes High School </strong></em> was established in 2008. At the completion of our first year, we were honored with the <em>Recognized</em> status from the Texas Education Agency. </p>
<h1 class="style13"><strong>Cy Lakes This Week</strong></h1>
<div id="this week">
<h3>Project Prom Information Meeting - January 25, 2010 - 7:00 p.m. L.G.I. room
</h3>
Project Prom is a drug and alcohol-free lock-in celebration that has become a tradition over the years in area high schools. It takes place immediately after the prom ends, but is NOT part of the events planned and paid for by the school. Project Prom is organized and funded by a parent booster organization. NOW is the time for Class of 2011 parents to begin that process if we wish to establish this tradition at Cy Lakes. If this is an opportunity you want for our Spartan Seniors, please plan to attend the meeting! To receive a reminder email, please email your name and your Class of 2011 student's name to: <a href="http://www.cfisd.net/cgi-bin/Calcium40.pl?Op=ShowIt&amp;CalendarName=Cypress_Lakes_ High">Cypress (cylakesprojprom@gmail.com) Lakes Online Calendar</a></strong></p>
<p align="left" class="style6">&nbsp;</p>
<p align="center" class="style6"><img src="../images/Catchthedream.gif" alt="" width="300" height="250" /></p>
<h3 class="style13">&nbsp;</h3>
<div id="updatecolum" class="mybuggyelement">
<h2 align="center">News From The District</h2>
<ul><li><a href="/cylakes/PDF/UT Auto Admissions 20111.pdf" class="style6"><strong>The University of Texas' Auto Admissions Policy (A must Read!!)</strong></a><a href="#"></a></li>
<li><a href="/cylakes/PARENT right to know notification 2009-10 _Tiltle I Campuses.pdf"><strong>A Parent's Right to Know</strong></a></li>
<li><span class="style6"><a href="http://www.cfisd.net/spanish/depts/health/swine-sp.htm">Espa&ntilde;ol</a></strong></span></li (http://www.cfisd.net/dept2/health/swine.htm)>
<li> <span class="style6"><a href="

djbutter22
01-08-2010, 07:29 PM
Here is the CSS
body {
margin: 20px 0;
padding: 0;
background: #CECECE url(images/img1.gif);
font-family: "Courier New", Courier, monospace;
font-size: small;
font-style: normal;
font-weight: normal;
font-variant: normal;
left: auto;
top: auto;
right: auto;
bottom: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
h1, h2, h3 {
color: #FFFFFF;
}
h2 {
font-size: 1.6em;
}
h3 {
margin: 0;
font-size: 1em;
float:left;

}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
}
a:hover {
text-decoration: none;
}
img {
padding-top: 5px;
border: none;

}
/* Header */
#header {
width: 700px;
height: 179px;
background-image: url(../images/Web_Banner%20copy.jpg);
background-repeat: no-repeat;
background-color: #820A0B;
border: thin solid #CCCCCC;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header * {
margin: 0;
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
}
#header h1 {
float: left;
padding: 20px 0 0 330px;
font-size: 3em;
}
#header h2 {
float: left;
padding: 20px 0 0 0;
font-size: 1em;
}
/* Menu */
#menu {
width: 700px;
height: 40px;
background-color: #820A0B;
background-image: url(../images/nav-red-bar.png);
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 32px;
padding: 9px 20px 0 20px;
text-decoration: none;
color: #CCCCCC;
}
#menu a:hover, #menu .active a {
color: #FFFFFF;
background-image: url(../images/nav-red-bar.png);
}
/* Content */
#content {
width: 700px;
background-image: url(../images/nav-red-bar.png);
background-repeat: repeat-x;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#colOne {
float: left;
width: 160px;
background-image: url(../images/Red-Black_Bar.png);
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border: medium none #FFFFFF;
}
#colTwo {
float: left;
width: 360px;
background-image: none;
background-repeat: no-repeat;
background-color: #820A0B;
padding: 10px;
}
#colThree {
float: left;
width: 120px;
padding: 10px;
background-image: url(../images/Red-Black_Bar.png);
}
/* Footer */
#footer {
width: 700px;
margin: 0 auto;
padding: 10px 0;
background: url(images/img6.gif) repeat-x;
font-size: smaller;
}
#footer * {
color: #ffffff;
}
a:visited {
color: #ffffff;

}
.buttonimg {
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a:link {
color: none;

}
a:visited {
color: none;
}
#col4 {
width: 500px;
float: left;
padding: 10px;
background-color: #820A0B;
}
}
#updatecolum {
padding-bottom: 0px;
padding-top: 0px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#NewsColum {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12pt;
line-height: 1.5em;
}
#bodycolum {
position: relative;
top: 25px;
color: #FFFFFF;
font-weight: bold;
font-variant: normal;
}
#footballcolum {
background-color: #820A0B;
width: 700px;
background-repeat: no-repeat;
padding: 0px;
height: 900px;
}
#bigpicholder {
height: 288px;
position: relative;
left: 0px;
right: 0px;
width: 700px;
}
#cdt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #00FF00;
border: thin groove #CCCCCC;
}
}
#toppagecontent {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding-top: 40px;
}
#keyholder {
float: left;
width: 120px;
position: relative;
}
.indented
{
padding-left: 20px;
padding-right: 20px;
}
#this week {
border:#666666 thin groove;
}

.mybuggyelement {
zoom: 1;}

rattlsnak
01-08-2010, 07:36 PM
for starters, this has too many brackets:

#col4 {
width: 500px;
float: left;
padding: 10px;
background-color: #820A0B;
}
}
#updatecolum {
padding-bottom: 0px;
padding-top: 0px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

And you didnt post enough of the HTML so we can see where the 'close divs' are..

rattlsnak
01-08-2010, 07:37 PM
And another:

#cdt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #00FF00;
border: thin groove #CCCCCC;
}
}
#toppagecontent {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding-top: 40px;
}

djbutter22
01-08-2010, 07:39 PM
:oops: yep I figured . The more I think I'm getting the hang of it, the more I realize I'm nowhere close.

djbutter22
01-08-2010, 07:42 PM
And you didnt post enough of the HTML so we can see where the 'close divs' are..



</div>
<div id="colTwo"><span class="style8"> <span class="style9">
<marquee behavior="scroll" direction="left"onmouseover="this.stop()" onmouseout="this.start()">
</marquee>
</span> </span>
<h2>&nbsp;</h2>
<h2>Welcome to Cypress Lakes!</h2>
<p><em><strong>Cypress Lakes High School </strong></em> was established in 2008. At the completion of our first year, we were honored with the <em>Recognized</em> status from the Texas Education Agency. </p>
<h1 class="style13"><strong>Cy Lakes This Week</strong></h1>
<div id="this week">
<h3>Project Prom Information Meeting - January 25, 2010 - 7:00 p.m. L.G.I. room
</h3>
Project Prom is a drug and alcohol-free lock-in celebration that has become a tradition over the years in area high schools. It takes place immediately after the prom ends, but is NOT part of the events planned and paid for by the school. Project Prom is organized and funded by a parent booster organization. NOW is the time for Class of 2011 parents to begin that process if we wish to establish this tradition at Cy Lakes. If this is an opportunity you want for our Spartan Seniors, please plan to attend the meeting! To receive a reminder email, please email your name and your Class of 2011 student's name to: <a href="http://www.cfisd.net/cgi-bin/Calcium40.pl?Op=ShowIt&amp;CalendarName=Cypress_Lakes_ High">Cypress (cylakesprojprom@gmail.com) Lakes Online Calendar</a></strong></p>
<p align="left" class="style6">&nbsp;</p>
<p align="center" class="style6"><img src="../images/Catchthedream.gif" alt="" width="300" height="250" /></p>
<h3 class="style13">&nbsp;</h3>
<div id="updatecolum" class="mybuggyelement">
<h2 align="center">News From The District</h2>
<ul><li><a href="/cylakes/PDF/UT Auto Admissions 20111.pdf" class="style6"><strong>The University of Texas' Auto Admissions Policy (A must Read!!)</strong></a><a href="#"></a></li>
<li><a href="/cylakes/PARENT right to know notification 2009-10 _Tiltle I Campuses.pdf"><strong>A Parent's Right to Know</strong></a></li>
<li><span class="style6"><a href="http://www.cfisd.net/spanish/depts/health/swine-sp.htm">Espa&ntilde;ol</a></strong></span></li (http://www.cfisd.net/dept2/health/swine.htm)>
<li> <span class="style6"><a href="

rattlsnak
01-08-2010, 07:45 PM
try putting a space between each class to seperate them:

#cdt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #00FF00;
border: thin groove #CCCCCC;
}

#toppagecontent {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding-top: 40px;
}


That way you can easily see if each item has opening and closing brackets. That should help you.

And did that fix your issue?

rattlsnak
01-08-2010, 07:49 PM
OK, there must be more. Your code can't end with "Order your Yearbook"! :)

rattlsnak
01-08-2010, 07:53 PM
Ok, i think we crossed over each other. You need to post the ENTIRE code, not just half the page..

djbutter22
01-08-2010, 08:10 PM
sorry, it won't let me post all of the code but the link is up there

rattlsnak
01-08-2010, 08:59 PM
Are you typing in the "quick reply" section or choosing the button to the left that says "post reply" ?

just post half of it at a time if you have to..

gentleone
01-08-2010, 09:09 PM
If you want to post your code, then go to 'post reply' and wrap your code in code tags. In the menu it's the hash #

djbutter22
01-11-2010, 01:13 PM
deleted by author

djbutter22
01-11-2010, 01:19 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--[if IE]>
<style type="text/css">
.mybuggyelement { zoom: 1;}
</style>
<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cypress Lakes High School</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../salt+pepper/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
h1 {
color: #FFFFFF;
}
h2 {
color: #FFFFFF;
}
h3 {
color: #FFFFFF;
}
.style6 {font-weight: bold}
.style7 {
font-size: 11pt;
font-weight: bold;
}
.style8 {
color: #00FF66;
font-size: 16pt;
}
body,td,th {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
background-color: #66FF00;
}
.style9 {font-size: smaller}
.style13 {
color: #CCCCCC
}
-->
</style>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="header"></div>
<div id="menu">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','700','heigh t','40','src','../navbarNew','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="700" height="40">
<param name="quality" value="high" />
<param name="SRC" value="../navbarNew.swf" />
<embed src="../navbarNew.swf" width="700" height="40" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript>
</li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h2>Spartan News</h2>
<h3><a href="http://schools.cfisd.net/cylakes/PDF/Horizons Open Referral Information.pdf">Horizons Open Referral Information</a></h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="/cylakes/PDF/ATTENDANCE TIPS.pdf"><strong>Attendance Tips ~</strong></a></h3>
<h3><a href="/cylakes/PDF/080818 ATTENDANCE TIPS Spanish.pdf"><strong> Espanol</strong></a></h3>
<p>&nbsp;</p>
<h3><strong><a href="https://secure.smart-pay.com/">Order your Yearbook Here!</a></p>
<p class="style7"><a href="

djbutter22
01-11-2010, 01:27 PM
<p class="style7"><a href="https://secure.smart-pay.com/"><img (https://secure.smart-pay.com/%22%3E%3Cimg) src="../images/Yearbook copy1.jpg" alt="Yearbook" width="105" height="127" class="buttonimg" id="Yearbook" /></a></p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
<p class="style7">&nbsp;</p>
</div>
<div id="colTwo"><span class="style8"> <span class="style9">
<marquee behavior="scroll" direction="left"onmouseover="this.stop()" onmouseout="this.start()">
</marquee>

<h2>&nbsp;</h2>
<h2>Welcome to Cypress Lakes!</h2>
<p><em><strong>Cypress Lakes High School </strong></em> was established in 2008. At the completion of our first year, we were honored with the <em>Recognized</em> status from the Texas Education Agency. </p>
<h1 class="style13"><strong>Cy Lakes This Week</strong></h1>
<div id="this week">
<h3>Project Prom Information Meeting - January 25, 2010 - 7:00 p.m. L.G.I. room
</h3>
Project Prom is a drug and alcohol-free lock-in celebration that has become a tradition over the years in area high schools. It takes place immediately after the prom ends, but is NOT part of the events planned and paid for by the school. Project Prom is organized and funded by a parent booster organization. NOW is the time for Class of 2011 parents to begin that process if we wish to establish this tradition at Cy Lakes. If this is an opportunity you want for our Spartan Seniors, please plan to attend the meeting! To receive a reminder email, please email your name and your Class of 2011 student's name to: <a href="mailto:cylakesprojprom@gmail.com"><strong>cylakesprojprom@gmail.com</strong></a> (parents only, please). </div>
<p>&nbsp;</p>

<p><strong><a href="mailto:cylakes@cfisd.net?subject=keycommunicator"><img src="../images/key_comm_icon.gif" alt="KeyHolder" width="62" height="62" class="buttonimg" /></a></span><br clear="left" />Click the key to be added to the Key Communicator List"</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
<p>Copyright &copy; Cypress Lakes High School.<a href="mailto:dennis.butterworth@cfisd.net (dennis.butterworth@cfisd.net)"> Email web master</a></p>
</div>
</body>
</html>

rattlsnak
01-11-2010, 04:50 PM
[COLOR=#000080]color=royalblue]<div id=[COLOR=#0000ff]"this week">

this is not correct. it needs to be styled in the CSS portion.

#thisweek {
border:1px;
border-color:blue;
}

There are other ways and short cuts for that, but take no offense as we are all learning, but your code is REALLY not good. You really need to take a few tutorials. There are multiple issues all over the place, but that should fix your border issue.

djbutter22
01-12-2010, 01:38 PM
Thanks Rattlsnak ! believe me I take no offense at all. I know I need help, that's why I turn to the experts on this forum. I relish the constructive crticism I get on here , the more brutally honest the better. I don't want people to "sugar coat" an answer for fear of offending me.

djbutter22
01-12-2010, 01:40 PM
[COLOR=#000080]color=royalblue]<div id=[COLOR=#0000ff]"this week">

this is not correct. it needs to be styled in the CSS portion.

#thisweek {
border:1px;
border-color:blue;
}

There are other ways and short cuts for that, but take no offense as we are all learning, but your code is REALLY not good. You really need to take a few tutorials. There are multiple issues all over the place, but that should fix your border issue.

Oh, the color=royal blue is not part of my code. I changed the color on here to royal blue as to highlight the div id I was talking about.

domedia
01-12-2010, 02:17 PM
The very best you can do i upload your page somewhere temporarily on the web. This makes it really easy for anyone to view and debug the page.

djbutter22
01-12-2010, 02:25 PM
This is it http://schools.cfisd.net/cylakes/index.htm
using CSS I placed a border around the div-this week.

rattlsnak
01-13-2010, 03:46 PM
ok, dont put anything in your code that isnt part of your code!! ('color -blue'). we are looking for errors, etc, and things like that pop out. you should always post your code as it is, so we can find the errors!

anyway, did you get it fixed?

djbutter22
01-13-2010, 03:57 PM
ok, dont put anything in your code that isnt part of your code!! ('color -blue'). we are looking for errors, etc, and things like that pop out. you should always post your code as it is, so we can find the errors!

anyway, did you get it fixed?

ok! I haven't fixed it yet, I've been cleaning up my code getting rid of all the useless stuff. I used a template and changed things but didn't delete the old code.

djbutter22
01-14-2010, 02:32 PM
issue solved!