PDA

View Full Version : <ul> breaking out of my <div content>


Jittor
01-29-2010, 05:13 PM
Hello all,

In my CSS I have a my #content{} set up and within that I have #content ul{} but when I add an unordered list within my <div content> it does not apply the CSS and breaks out of my content div. I am still learning CSS, and can't seem to figure this one out. In the past I would just place it outside my content div, but this time I need it within my content div.

Thanks!



#content{
color:#000;
width:1000px;
height: auto;
}
#content p{
font:13px;
font-family:Arial, Helvetica, sans-serif;
padding:15px 5px 5px 5px;
margin-left:5px;
margin-right:15px;
}

#content ul{
font-weight:bold;
color:412362;
line-height:20px;
}

Corrosive
01-29-2010, 05:23 PM
What part of your list is breaking out?

Jittor
01-29-2010, 05:52 PM
the entire unordered list is breaking out. It''s following all of the other content rules just not staying within the content div.


<ul>
&bull; Text1<br />
&bull; Text2<br />
&bull; Text3<br />
&bull; Text4<br />
&bull; Text5<br />
&bull; Text6<br />
&bull; Text7<br />
&bull; Text8<br />
&bull; Text9<br />
</ul>

gentleone
01-29-2010, 06:03 PM
the entire unordered list is breaking out. It''s following all of the other content rules just not staying within the content div.


<ul>
&bull; Text1<br />
&bull; Text2<br />
&bull; Text3<br />
&bull; Text4<br />
&bull; Text5<br />
&bull; Text6<br />
&bull; Text7<br />
&bull; Text8<br />
&bull; Text9<br />
</ul>


You forgot some part that is crucial for an unordered list... the list item part: <li> ...and then the bullet will also appear by default.


<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>


See for a simple example here with the necessary CSS:
http://css.maxdesign.com.au/listamatic/vertical01.htm

Jittor
01-29-2010, 06:08 PM
Ya sorry I was playing around, same results either way - still breaking out of the content div.

Corrosive
01-29-2010, 06:10 PM
Ya sorry I was playing around, same results either way - still breaking out of the content div.

Is this online anywhere?

gentleone
01-29-2010, 06:12 PM
Yeah, full code please!

Jittor
01-29-2010, 06:16 PM
No, I can't make live until it's approved by the higher ups, but, I can post the code for you though.

gentleone
01-29-2010, 06:17 PM
No zip files, please... use the code tags!

Jittor
01-29-2010, 06:26 PM
Main 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=iso-8859-1" />

<meta name="keywords" content="" />

<meta name="description" content="" />
<meta name="verify-v1" content="XLTCGxIsgX3WHaf/a78AD7xZbuwe/kHctSAgu/Ve9tw=" >
<title></title>
<link rel="shortcut icon" href="favicon.ico" >
<link href="css/style_how.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: 18px}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>


<body>

<div id="wrapper">

<div id="header"></div>

<div id="coverNav"></div>
<div id="nav"><?include('nav.php');?></div>

<div id="content">
<div id="titlebar_home"><p>title here</p></div>

<p><img src="images/cover.gif" alt="cover" width="248" height="161" align="left" /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget libero felis, eu iaculis leo. Vestibulum risus quam, pharetra id aliquet sodales, consequat et quam. Phasellus sollicitudin, elit at pellentesque interdum, eros diam rutrum nisi, sit amet ornare urna magna sed lorem. Donec sollicitudin, libero ut scelerisque euismod, leo orci pretium sapien, a facilisis nibh arcu et mauris. Sed ante lectus, tincidunt nec egestas sed, tincidunt sed elit. Nulla facilisi. <br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ipsum lectus, volutpat ac pulvinar sed, <br />
<br />
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</p>


</div>



<div class="clearit"></div>


<div id="footer"><?include('footer.php');?></div>
<div id="copyright"><?include('copyright.php');?></div>


</div>

</body>
</html>

Jittor
01-29-2010, 06:27 PM
CSS:


*{
margin:0px;
padding:0px;
border:0px;
}


body{
/*background-image:url(../images/wrapper_newborn.gif); */
background-repeat:repeat-x;
background-color:#fff;

}
#wrapper{
background-image: url(../images/body.gif);
background-repeat:repeat-y;
width:1000px;
height:auto;
margin:0px auto;
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
/* width - left and right padding = widt\h */


}
#header{
background-image: url(../images/header.gif);
background-repeat:no-repeat;
background-color:#fff;
height:98px;
width:1000px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom:0px;
}
#coverNav{
background-image: url(../images/coverNav.jpg);
background-repeat:no-repeat;
height:158px;
width:1000px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom:0px;
}
/* CSS for content starts here */


#content{
color:#000;
width:1000px;
height: auto;
}
#content p{
font:13px;
font-family:Arial, Helvetica, sans-serif;
padding:15px 5px 5px 5px;
margin-left:5px;
margin-right:15px;
}

#content ul{
font-weight:bold;
color:412362;
line-height:20px;
}

#content left{
float:left;
border:2px solid #fff;
margin:3px;
}
#content a{
color: #0066FF;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
#content a:hover, #footer a:focus{
text-decoration:underline;
color:#000;
}




/* CSS for nav menu starts here */


#nav{
background-image:url(../images/navBar.gif);
display:block;
height:26px;
width:1000px;
font:12px Arial, Helvetica, sans-serif;
text-align:left;
font-weight:bold;

}
#nav p{
padding:6px 0px 0px 0px;
}

#nav p a{
color: #000;
text-decoration:none;
padding:0px 5px;
text-align:center;
widows:9em;
}
#nav p a:hover, #nav ul li a:focus{
color: #000066;
text-decoration:underline;
}
#nav p a:visited, #nav ul li a:focus{
color:#000066;
}


/* CSS for Sidebar starts here */


#sidebar{
background-image:url(../images/side_bar_wraper.gif);
background-repeat:repeat-y;
background-color:#fff;
font:12px Arial, Helvetica, sans-serif;
color: #000;
float:right;
margin-right:25px;
margin-top:0px;
margin-left:10px;
width:255px;
}
#sidebar p{
font:12px Arial, Helvetica, sans-serif;
padding:8px 15px 5px 20px;
}
#sidebar a{
color: #333;
font-weight:bold;
text-decoration:none;
}
#sidebar a:hover, #nav a:focus{
text-decoration:underline;
color:#0033FF;


/* CSS for Video Players starts here */

}
#object{
margin-left:210px;
}

#object p{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #000066;
line-height:36px;
}

#object a{
text-decoration:none;
color:#000099;
}
#object a:hover{
text-decoration:underline;
color:#666666;

/* CSS for text for Video Player links starts here - this is a page with just links */

}
#object2{
margin-left:130px;
margin-right:130px;
}

#object2 p{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #000066;
line-height:36px;
}

#object2 a{
font-size:18px;
text-decoration:underline;
color:#000099;
}
#object2 a:hover{
text-decoration:none;
color:#666666;


/* CSS for footer starts here */


}
#footer{
background-image: url(../images/footer.gif);
background-repeat:no-repeat;
background-color:#fff;
height:30px;
width:1000px;
text-align:center;
padding:5px 0px 0px 0px;
}
#footer p{
font:12px Tahoma;
color: #000;

}
#footer p a{
color:#000033;
text-decoration:none;
}
#footer a:hover, #footer a:focus{
text-decoration:underline;
color: #000033;


/* CSS for Copyright starts here */


}
#copyright{
background-color:#fff;
height:49px;
width:1000px;
margin-left:0px;
}
#copyright p{
font:11px Tahoma;
color:#000;
padding:5px 0px 0px 0px;
text-align:center;
}
#copyright p a{
color: #000;
text-decoration:underline;
}
#copyright a:hover, #footer a:focus{
text-decoration:none;
color:#fff;
}

/* CSS for title bars starts here */

#titlebar {
background-image:url(../images/title_bar.gif);
width:640px;
height:59px;
color:#000;

}
#titlebar p {
color:000;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
padding:10px 0px 0px 5px;
}
#titlebar_main {
background-image:url(../images/title_bar.gif);
background-repeat:no-repeat;
background-position:center;
width:900px;
height:59px;
color:#000;
margin-left:0px;

}
#titlebar_main p {
color:000;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
font-size:35px;
font-weight:bold;
padding:10px 0px 0px 5px;
}
#titlebar_home {
background-image:url(../images/title_bar.gif);
background-repeat:no-repeat;
background-position:center;
width:1000px;
height:59px;
color:#000;
padding-top:10px;

}
#titlebar_home p {
color:000;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
font-weight:bold;
padding:10px 0px 0px 5px;
}

/* CSS for Coming Soon starts here */

#comingsoon {
width:640px;
height:auto;
color:#000;
margin-top:15px;


}
#comingsoonr p {
color:000;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
padding:5px 0px 0px 5px;
}

/* CSS for forms starts here */


form{
background-image: url(../images/form_bkgd.gif);
background-repeat:repeat-y;
height: auto;
width: 570px;
border: 1px solid #3E0069;
margin-left:180px;
margin-right:0px;
margin-top: 20px;
}
#formcontent{
color:#000;
border:0px;
}
#formcontent p{
font:80% Tahoma;
padding:5px 5px 5px 5px;
text-align:right;
margin-left:0px;
margin-right:35px;
}
textarea {
font-size: 12px;
color: #000000;
background: #e4e6dc;
height: 100px;
width: 200px;
border: 1px solid #000000;
}
input {
font-size: 12px;
color: #000000;
background: #e4e6dc;
height: 15px;
width: 150px;
border: 1px solid #000066;
}
.but {
font-size: 12px;
font-weight:bold;
color: #000;
text-decoration: none;
background: url(../images/submit_but.gif) no-repeat;
height: 26px;
width: 76px;
border:0px;
}
legend {
font-size: 12px;
color:#000066;
text-align:left;
text-decoration: none;
padding:4px 0px 0px 8px;
}
label {
font-size: 12px;
color: #000000;
text-align:left;
text-decoration: none;
padding:10px 6px 0px 0px;
}
select {
font-size: 12px;
color: #000000;
background: #e4e6dc;
height: auto;
width: 150px;
border: 1px solid #000066;
}
.deviderform{
width:550px;
height:1px;
margin-left:5px;
border-top:1px solid #000;
}
.fields{
margin-left:37px;
}


/* Text styles start here */

.highlight{
color: #FFF;
font-size:14px;
font-weight:bold;
}
.highlight1{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#000066;
font-weight:bold;
text-align:left;
padding:2px 0px 2px 0px;

}
.highlight2{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #3C2961;
font-weight:bold;
text-align:center;
padding:5px 0px 0px 0px;

}
.highlight3{
font-family:Arial, Helvetica, sans-serif;
color: #412362;
font-weight:bold;
}

.highlight4{
font-family:Arial, Helvetica, sans-serif;
color: #000033;
font-size:16px;
font-weight:bold;
text-align:left;
}
.highlight5{
font-family:Arial, Helvetica, sans-serif;
color: #412362;
font-size:18px;
font-weight:bold;
text-align: center;
}
.highlight6{
font-family:Arial, Helvetica, sans-serif;
color: #3C2961;
font-size:22px;
font-weight:bold;
text-align:left;
}
h3{
font-family:Arial, Helvetica, sans-serif;
color:#3366CC;
text-align:center;
}

h4{
font-family:Arial, Helvetica, sans-serif;
color:#3366CC;
text-align:left;
margin-left:40px;
margin-top:10px;
}
/* Misc styles start here */

.devider1{
width:820px;
height:1px;
margin-left:40px;
border-top:1px solid #4D3972;

}

.devider2{
width:520px;
height:1px;
margin-left:10px;
border-top:1px solid #4D3972;
}

.devider3{
width:540px;
height:1px;
margin-left:10px;
border-top:1px solid #4D3972;
}

.clearit {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}

gentleone
01-29-2010, 06:40 PM
Okay... quite a piece of code, but I believe its because you have your unordered list within a paragraph. Take him out of there and see what happens.

Jittor
01-29-2010, 06:48 PM
Unfortunately that did not work. It looks the same. :(

gentleone
01-29-2010, 07:03 PM
As far as I can see by your CSS I don't see any structure. You have a wrapper, but I don't see any positioning. The same goes for your other divs. You must use some kind of relative positioning or a float left and/or right.

Your CSS... it doesn't make sense to me.

If you could put it online somewhere then I could also better understand what you mean with 'breaking out the content div'. Now its still guessing to me.

Jittor
01-29-2010, 07:26 PM
I sent you a PM.

I am open for suggestions on how to make my CSS better.

fyrye
03-07-2010, 11:20 PM
Found the solution via google, but since this is the first result.
You have to assign a ul rule to your css:

ul {
list-style-position: inside;
}


It's good to have a default rule set for all elements on your pages, modify it to make it work for your application.
Like so:
default.css

html,
body,
iframe,
p,
div,
img,
h1,
h2,
h3,
h4,
li,
ul,
dl,
dd,
dt,
form,
table,
td,
tr {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
input,
select {
margin:0;
padding:0;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
ul {
list-style-position: inside;
}



Then you can include them as needed like so:
Screen.css

@import url(./default.css); /*Resets all other rule sets before loading our own*/
@import url(./Layout.css); /*Positioning info, heights, widths*/
@import url(./Style.css); /*Colors, borders, and such*/

The ./ refers to current directory,


Then include the css on your application's page
<link media="screen" rel="stylesheet" type="text/css" href="/Template/Screen.css?20100307" />

Which makes it easier to track and disable things in your application, and allows you to force refresh the css file if you make changes without changing the physical name on the server.