Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member ymmit987's Avatar
    Join Date
    Dec 2010
    Posts
    11
    Member #
    25423
    I am a fairly new CSS coder, but I am learning quickly. I am currently working on a layout for a tumblr blog, but I am having trouble with my div boxes. If I add an attribute (such as a horizontal rule or a border) to one div, it is applied to all of the divs. Can anyone help me fix this problem?

    Code:
    Code:
    <html>
        <head>
    
    
    <style>
    
    
    /* Misc Styles */
    
    body
    {background:url('http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/blubg.jpg') repeat-x #7893ff fixed;
    }
    
    p.description 
    {text-align:center;
    font-family:arial;
    font-size:20px;
    }
    
    a
    {text-decoration:none;
    color:#3d3d3d;
    }
    
    a:hover
    {color:#000;
    }
    
    .container
    {float:left;
    margin-left:50px;
    width:60%;
    min-width:600px;
    background-color:#transparent;
    text-align:center;
    padding:0px;
    }
    
    .sidebar
    {float:right;
    right:50px;
    width:250px;
    margin-top:70px;
    background-image:url('http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/sidebar.png');
    position:fixed;
    height:355px;
    }
    
    p.side
    {text-align:center;
    font-size:12px;
    color:#fff;
    font-family:helvetica;
    }
    
    h1
    {text-align:center;
    font-family:georgia;
    font-size:70px;
    color:#3d3d3d;
    letter-spacing:-5px;
    }
    
    .h1_div
    {width:600px;
    align:center;
    background-color:transparent;
    }
    
    
    /* DIV Colors */
    
    div.clear
    {background-color:transparent;
    }
    
    .topbar
    {background-color:#fff;
    }
    
    div.text
    {background-color:#FFBBBB;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.photo
    {background-color:#FFACEC;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.photoset
    {background-color:#fff;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.quote
    {background-color:#fff;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.link
    {background-color:#DDCEFF;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.chat
    {background-color:#fff;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.audio
    {background-color:#A3FEBA;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    div.video
    {background-color:#FFFFB5;
    padding:0px;
    border:1px solid #3d3d3d;
    }
    
    
    
    </style>
    
    
            <title>{Title}</title>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
        </head>
        <body>
    
    
    
    <div class="sidebar">
    
    
    
    </div> 
    
    
    
    <div class="container">
    
        
    
    <div class=".h1_div">
    <a href="/"><h1>{Title}</h1></a>
    </div>
    
       <div class="topbar"><img src="http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/topbar-1.png" width="100%"></div>
    
            
                {block:Posts}
    
    
    
    
                    <div class="text">{block:Text}
                        
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            {Body}
                        
                    {/block:Text}</div>
    
    
    
                    <div class="photo">{block:Photo}
                       
                            <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                       
                    {/block:Photo}</div>
                    
    
    
                     <div class="photoset">{block:Photoset}
                        
                            {Photoset-500}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        
                    {/block:Photoset}</div>
    
    
    
                     <div class="quote">{block:Quote}
                        
                            "{Quote}"
    
                            {block:Source}
                                <div class="source">{Source}</div>
                            {/block:Source}
                        
                    {/block:Quote}</div>
    
    
    
    
                     <div class="link">{block:Link}
                        
                            <a href="{URL}" class="link" {Target}>{Name}</a>
    
                            {block:Description}
                                <div class="description">{Description}</div>
                            {/block:Description}
                        
                    {/block:Link}</div>
    
    
    
                     <div class="chat">{block:Chat}
                        
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            <ul class="chat">
                                {block:Lines}
                                    <li class="{Alt} user_{UserNumber}">
                                        {block:Label}
                                            <span class="label">{Label}</span>
                                        {/block:Label}
    
                                        {Line}
                                    </li>
                                {/block:Lines}
                            </ul>
                        
                    {/block:Chat}</div>
    
    
                     <div class="audio">{block:Audio}
                        
                            {AudioPlayerBlack}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        
                    {/block:Audio}</div>
    
    
                     <div class="video">{block:Video}
                        
                            {Video-500}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        
                    {/block:Video}</div>
    
                     
                {/block:Posts}
            
    <div class="botbar"><img src="http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/topbar-1.png" width="100%"></div>
    
            <p id="footer">
                {block:PreviousPage}
                    <a href="{PreviousPage}"> Previous</a>
                {/block:PreviousPage}
    
                {block:NextPage}
                    <a href="{NextPage}">Next </a>
                {/block:NextPage}
    
            </p>
    
      
    
    </div>
    
    
        </body>
    </html>

  2.  

  3. #2
    Member
    Join Date
    Dec 2010
    Location
    Birmingham
    Posts
    52
    Member #
    25366
    hi ymmit987, im sorry this isnt an answer to your question, but a question of my own: i just wondered what the {block:classname} stuff all over your code is? i guess its to improve readability, but i just wondered because ive never seen it before.

  4. #3
    Junior Member ymmit987's Avatar
    Join Date
    Dec 2010
    Posts
    11
    Member #
    25423
    Quote Originally Posted by tortopapir View Post
    hi ymmit987, im sorry this isnt an answer to your question, but a question of my own: i just wondered what the {block:classname} stuff all over your code is? i guess its to improve readability, but i just wondered because ive never seen it before.
    That's alright.
    Those are tags used by Tumblr.com to define the certain types of Blog posts. For example, {block:Photo} would begin the portion of code for all Photo blog posts, and {/block:Photo} would end it.

  5. #4
    Member
    Join Date
    Dec 2010
    Location
    Birmingham
    Posts
    52
    Member #
    25366
    oh rite, cheers

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Well with the css you show, border is listed in all the divs. Can't you edit them?

  7. #6
    Junior Member ymmit987's Avatar
    Join Date
    Dec 2010
    Posts
    11
    Member #
    25423
    I have modified the code, and the problem still occurs. Here is what I have now.

    Notice that the border attribute is only applied to the div.text tag.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    
    <html>
      <head>
    
    
        <style>
    
    
    /* Misc Styles */
    
    body
    {background: repeat-x #7893ff fixed;
    }
    
    .container
    {float:left;
    margin-left:50px;
    width:60%;
    min-width:600px;
    background-color:#transparent;
    text-align:center;
    }
    
    .sidebar
    {float:right;
    right:50px;
    width:250px;
    margin-top:70px;
    background-image:url('http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/sidebar.png');
    position:fixed;
    height:355px;
    }
    
    a
    {text-decoration:none;
    color:#3d3d3d;
    }
    
    a:hover
    {color:#000;
    }
    
    h1
    {text-align:center;
    font-family:georgia;
    font-size:70px;
    color:#3d3d3d;
    letter-spacing:-5px;
    }
    
    div.side_text
    {margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    width:170px;
    height:270px;
    }
    
    p.side
    {text-align:justify;
    font-size:19px;
    color:#3d3d3d;
    font-family:arial;
    letter-spacing:2px;
    }
    
    
    /* DIV Colors */
    
    .title_div
    {align:center;
    background-color:transparent;
    }
    
    .topbar
    {background-color:#fff;
    }
    
    div.text,div.photo,div.photoset,div.quote,div.link,div.chat,div.audio,div.video
    {background-color:#fff;
    padding:0px;
    }
    
    div.text
    {border:1px solid #000;
    }
    
        </style>
    
            <title>{Title}</title>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
        </head>
    <body>
    
    
    
      <div class="sidebar">
        <div class="side_text"><p class="side">we are a cross between panda bears, concrete sidewalks, and magical comedy</p></div>
      </div> 
    
    
    
      <div class="container">
    
        
    
        <div class="title_div">
          <a href="/"><h1>{Title}</h1></a>
        </div>
    
        <div class="topbar">
          <img src="http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/topbar-1.png" width="100%">
        </div>
    
            
                {block:Posts}
    
    
    
    
                    <div class="text">{block:Text}
                        
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            {Body}
                        
                    {/block:Text}</div>
    
    
    
                    <div class="photo">{block:Photo}
                       
                            <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                       
                    {/block:Photo}</div>
                    
    
    
                     <div class="photoset">{block:Photoset}
                        
                            {Photoset-500}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        
                    {/block:Photoset}</div>
    
    
    
                     <div class="quote">{block:Quote}
                        
                            "{Quote}"
    
                            {block:Source}
                                <div class="source">{Source}</div>
                            {/block:Source}
                        
                    {/block:Quote}</div>
    
    
    
    
                     <div class="link">{block:Link}
                        
                            <a href="{URL}" class="link" {Target}>{Name}</a>
    
                            {block:Description}
                                <div class="description">{Description}</div>
                            {/block:Description}
                        
                    {/block:Link}</div>
    
    
    
                     <div class="chat">{block:Chat}
                        
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            <ul class="chat">
                                {block:Lines}
                                    <li class="{Alt} user_{UserNumber}">
                                        {block:Label}
                                            <span class="label">{Label}</span>
                                        {/block:Label}
    
                                        {Line}
                                    </li>
                                {/block:Lines}
                            </ul>
                        
                    {/block:Chat}</div>
    
    
                     <div class="audio">{block:Audio}
                        
                            {AudioPlayerBlack}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        
                    {/block:Audio}</div>
    
    
                     <div class="video">{block:Video}
                        
                            {Video-500}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        
                    {/block:Video}</div>
    
                     
                {/block:Posts}
            
        <div class="botbar">
          <img src="http://i1095.photobucket.com/albums/i469/pplanetplaygroundd/topbar-1.png" width="100%">
        </div>
    
            <p id="footer">
                {block:PreviousPage}
                    <a href="{PreviousPage}"> Previous</a>
                {/block:PreviousPage}
    
                {block:NextPage}
                    <a href="{NextPage}">Next </a>
                {/block:NextPage}
    
            </p>
    
    
    </div>
    
    
        </body>
    </html>

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Hey Ymmit, did you ever figure that out?

  9. #8
    Junior Member ymmit987's Avatar
    Join Date
    Dec 2010
    Posts
    11
    Member #
    25423
    No I did not. I may just start from scratch and see if i can work my way around the problem the second time. If not i'll just move on to another project.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com