Jump to content

Code Problem


CSS_Noob

Recommended Posts

I'm writing the CSS in DreamWeaver, and it looks fine, but when I preview it in Firefox from www.founderweb.com the text is shown outside the element in which it is placed. What am I doing wrong?~

<!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><title>Supernova</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">/* Begin CSS *//* Background Color */body {background-color: #000000}h1 {background-color: #000000}h2 {background-color: #000000}p {background-color: #000000}/* Text Color */h1 {color: #FFFFFF}h2 {color: #FFFFFF}p {color: #FFFFFF}/* Tables */td.pad {padding: 0.2cm}/* Left Div */div {background-color:#000000;width:150px;height:750px;overflow:auto}div.pos_abs{position:absolute;left:8px;top:100px}/* Center Div */div1 {background-color:#000000;border-color: #FFFFFF;border-style: dashed;border-bottom-width: medium;width:550px;height:750px;overflow:auto}div1.pos_abs{position:absolute;left:166px;top:100px}</style></head><body><div class="pos_abs"><p></p></div><div1 class="pos_abs"><table><tr><td class="pad"><p align="center">Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags Test tags posts</p></td></tr></table></div1></body></html>

Link to comment
Share on other sites

First of all, div1 is not a tag. I suggest changing the class for that div to something unique for that div. Why do you have a 1 cell table in your div? It doesn't do anything. You can remove it and add the padding in the div instead.

Link to comment
Share on other sites

Thanks for your help, vchris. I've rectified my mistake and used different classes to differentiate between my elements.I've also come up with a new problem, unfortunately.Although both these elements are placed (I think) 100px from the top, they are showing up as uneven.

<!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><title>Supernova</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">/* Begin CSS *//* Background Color */body {background-color: #000000}h1 {background-color: #000000}h2 {background-color: #000000}p {background-color: #000000}/* Text Color */h1 {color: #FFFFFF}h2 {color: #FFFFFF}p {color: #FFFFFF}/* Div */div{background-color:#000000;overflow:auto}/* Div Classes */div.pos_left{position:relative;border-style: dashed;border-color:#FFFFFF;border-bottom-width: medium;width:150px;height:750px;left:0px;top:100px;}div.pos_abs{position:absolute;border-color: #FFFFFF;border-style: dashed;border-bottom-width: medium;width:550px;height:750px;left:200px;top:100px}</style></head><body><div class="pos_left"><p>Column</p></div><div class="pos_abs"><p>Main Text</p></div></body></html>

Link to comment
Share on other sites

Add the style "margin: 0;" to your body tag in your css. This will remove the default margin in your document. Thus your divs will be equal. I have tested this.You should consider having all the properties of h1 for example in one location. h1 { color: white; background: #000000; }Your CSS will be smaller and cleaner.

Link to comment
Share on other sites

I'd like to have the text in the second div set for "overflow: visible" so that all the displayed blogger posts in the body section in that div will display and lengthen the webpage instead of having an ugly scrollbar (not saying the entire page isn't ugly anyway). When I change the overflow from auto to visible, though, the page width increases.Can anyone tell me why this occurs, and perhaps how to fix it?

<!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><title>Supernova</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">/* Background Color */body {background-color: #000000}h1 {background-color: #000000}h2 {background-color: #000000}p {background-color: #000000}/* Text Color */h1 {color: #FFFFFF}h2 {color: #FFFFFF}p {color: #FFFFFF}/* Div */div{background-color:#000000;border-style: none;}/* Div Classes */div.pos_abs0{position:absolute;overflow: inherit;z-index:+1;top: 0;left: 0;width: 1014;height: 100;}div.pos_abs1{position:absolute;overflow: auto;padding: 5px;width:200px;height:490px;left:5px;top:105px;}div.pos_abs2{position:absolute;overflow: visible;padding: 5px;width:500px;height:490px;left:220px;top:105px}div.pos_abs3{position:absolute;overflow: auto;padding: 5px;width:274px;height:490px;left:735px;top:105px}</style></head><body marginheight="0" marginwidth="0"><div class="pos_abs0"><img src="http://img.photobucket.com/albums/v316/Jedgar/Top.jpg" height="100" width="1024"></div><div class="pos_abs1"><p>Column</p></div><div class="pos_abs2"><title><$BlogPageTitle$></title><$BlogMetaData$><!-- Begin #content --><div id="content"><!-- Begin #main --><div id="main"><div id="main2"><Blogger>    <BlogDateHeader>  <h2 class="date-header"><$BlogDateHeaderDate$></h2>  </BlogDateHeader>         <!-- Begin .post -->  <div class="post"><a name="<$BlogItemNumber$>"></a>         <BlogItemTitle>    <h3 class="post-title">  <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>  <$BlogItemTitle$>  <BlogItemUrl></a></BlogItemUrl>    </h3>    </BlogItemTitle>          <div class="post-body">	<div>      <$BlogItemBody$>    </div>    </div>        <p class="post-footer">      <em>posted at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>      <MainOrArchivePage><BlogItemCommentsEnabled>         <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>      </BlogItemCommentsEnabled><BlogItemBacklinksEnabled></BlogItemBacklinksEnabled></MainOrArchivePage>  <$BlogItemControl$>    <hr></p>    </div>  <!-- End .post -->        <!-- Begin #comments --> <ItemPage>  <div id="comments">	<BlogItemCommentsEnabled><a name="comments"></a>        <h4><$BlogItemCommentCount$> Comments:</h4>        <dl id="comments-block">      <BlogItemComments>      <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>        <$BlogCommentAuthor$> said...      </dt>      <dd class="comment-body">        <p><$BlogCommentBody$></p>      </dd>      <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>   <$BlogCommentDeleteIcon$>   </dd>      </BlogItemComments>    </dl>  <p class="comment-timestamp">    <$BlogItemCreate$>    </p>    </BlogItemCommentsEnabled>         <BlogItemBacklinksEnabled>    <a name="links"></a><h4>Links to this post:</h4>    <dl id="comments-block">    <BlogItemBacklinks>        <dt class="comment-title">        <$BlogBacklinkControl$>        <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>        </dt>        <dd class="comment-body"><$BlogBacklinkSnippet$>        <br />        <span class="comment-poster">        <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>        </span>        </dd>    </BlogItemBacklinks>    </dl>    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>    </BlogItemBacklinksEnabled>  <p class="comment-timestamp">	<a href="<$BlogURL$>"><< Home</a>    </p>    </div></ItemPage>  <!-- End #comments --></Blogger></div></div><!-- End #main --></div><!-- End #content --></div><div class="pos_abs3"><p>Column 2</p></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...