Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post

    Trying to move an image in css, but wont budge

    Hey all,

    I added a divided image in my css, it's an thin image that I am trying to put right below my col1, col2, col3 so that it's split off and more organized on the site. I am new to coding so bare with me.

    This is the HTML for the div class:

    <div class="divider">
    </div>

    and then my css

    .divider {
    background-image:url(images/divider.png);
    background-repeat:no-repeat;
    height:5px;
    width:896px;
    padding:50px;
    }

    right now it is showing the image but it shows it all the way on the right cut off inside my div container. I just want to move it to the left some to center it. everytime I try an apply a margin-right or padding-right it doesn't move the image. This happens often to me, I try to apply some padding or margin and it doesn't move it. Why is this? Is my html code for that specific class not right?

    Thanks

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Not sure exactly what you mean. It seems you want to use an image for a border between elements.

    This demo uses a 100px x 50px image of a yellow border and places it along the top of elements providing a border between them. I have attached the image the demo uses.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #content {
                    width: 90%;
                    margin: 20px auto 20px auto;
                    border: 1px solid red;
                }
                .cols {
                    background: url("content-bg.png") repeat-x top left;
                }
                .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 10px 10px 10px;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="content">
                <div class="cols">
                    <div class="gutter">
                        <p>
                            Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                            Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                            pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                            ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc.
                        </p>
                    </div>
                </div>
                <div class="cols">
                    <div class="gutter">
                        <p>
                            Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
                            turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
                            posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
                            voluptas libero, sed mauris tincidunt, ultrices praesent. 
                        </p>
                    </div>
                </div>
            </div>
        </body>
    </html>
    Attached Images Attached Images  

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Hey, thanks for getting back to me.
    I just uploaded my first site "not done yet" to pvdemos.com please check it out, look under ( Professional Teams ) you'll see an a small gray line, I want that image in the middle of my container.


    Quote Originally Posted by bullant View Post
    Not sure exactly what you mean. It seems you want to use an image for a border between elements.

    This demo uses a 100px x 50px image of a yellow border and places it along the top of elements providing a border between them. I have attached the image the demo uses.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #content {
                    width: 90%;
                    margin: 20px auto 20px auto;
                    border: 1px solid red;
                }
                .cols {
                    background: url("content-bg.png") repeat-x top left;
                }
                .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 10px 10px 10px;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="content">
                <div class="cols">
                    <div class="gutter">
                        <p>
                            Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                            Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                            pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                            ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc.
                        </p>
                    </div>
                </div>
                <div class="cols">
                    <div class="gutter">
                        <p>
                            Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
                            turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
                            posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
                            voluptas libero, sed mauris tincidunt, ultrices praesent. 
                        </p>
                    </div>
                </div>
            </div>
        </body>
    </html>

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Which container? col3 or colImages

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by bullant View Post
    Which container? col3 or colImages
    I am trying to display the divider image below the three col images and the paragraphs. If you see where it is now, I just want to move it in the center of my container and move it down a little.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,929
    Thanks
    46
    Thanked 203 Times in 202 Posts
    ur img div is only in col3, also it is never closed
    you could potentially forget putting it into a div and float it in a fixed position and the text would flow around it... i dont know if that would work or not though....

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    So the divider you want to put in the center looks like separating the paragraphs and images? So you want the divider to be the same length as what it is now or stretch across your body page?

  • #8
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Dr3am3rz View Post
    So the divider you want to put in the center looks like separating the paragraphs and images? So you want the divider to be the same length as what it is now or stretch across your body page?
    Yes, but I want the divider to be below this ( gravida eget sagittis massa ) that is written on my site. The paragraphs below the 3 images, so I want the divider to display below those images and paragraphs.

    Thanks

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,929
    Thanks
    46
    Thanked 203 Times in 202 Posts
    it might not be the best approach (and if anyone has alternatives feel free to mention) but it seems (based on what I preceive you want) that it might be better to have 6 column divs... have three up top in a container, and then have three on the bottom in a container... then place a div btw these two containing ur picture element. this way you can have everything line up nicely.... but thats how id do it; im sure there are others

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    on your html try <div id="colImages">
    <div class="col1">
    <h3 class="port"> Professional Designs </h3>
    <a href="#"><img src="images/img1.png" alt="Image One" /></a>
    <p class="text">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
    pretium gravida eget sagittis massa. </p>
    </div>
    <div class="col2">
    <h3 class="port"> Professional Services</h3>
    <a href="#"><img src="images/img2.png" alt="Image Two" /></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
    pretium gravida eget sagittis massa.</p>

    </div>
    <div class="col3">
    <h3 class="port"> Professional Teams</h3>
    <a href="#"><img src="images/img3.png" alt="Image Three" /></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
    pretium gravida eget sagittis massa.</p>


    </div>
    <div class="divider">
    </div>
    <div id="random"><p>Phasellus ac elit lorem. Aenean porta quam sit amet enim lacinia a molestie risus aliquam. Nam augue sapien, ultricies sed elementum in, pharetra ac mi. Donec pretium tellus ac ligula feugiat vestibulum. Ut luctus cursus massa. Nulla facilisi. Curabitur bibendum orci sit amet turpis ultrices non dapibus ligula sodales. Vestibulum iaculis, sem a fringilla laoreet, diam dui vestibulum tortor, sit amet suscipit nunc sapien sed velit. Quisque condimentum, quam eget vestibulum pharetra, nunc nisl imperdiet erat, sit amet ultricies lacus dui in elit. Pellentesque non augue ligula. Praesent non leo nulla, at eleifend lorem. Ut gravida arcu eget enim tristique vel mattis lectus feugiat. Sed pellentesque commodo tortor in tempus. Fusce elit sapien, ullamcorper quis pharetra eget, mattis pulvinar dui. Morbi ut augue eros, non lobortis enim. Morbi sapien felis, gravida ac elementum at, ultrices in nulla. Aliquam erat volutpat. Praesent hendrerit fringilla ultricies. Aenean sodales lectus quis urna eleifend vitae varius mauris vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
    </div>
    </div>
    </div>


    and change this in your css
    .divider {
    background-image:url(images/divider.png);
    background-repeat:no-repeat;
    height:5px;
    width:896px;
    padding-bottom:50px;
    margin: 0 auto;
    }

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    ahh yeah go with the 6 divs more control

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,929
    Thanks
    46
    Thanked 203 Times in 202 Posts
    theres prob a ton of ways to do it.... the above code would work too i think... i would prob add clear: both; to the css part though to force it below the col divs

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #13
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    I'll give that a try here in a sec. Got a quick question, how come padding sometimes does not work? I am currenlty trying to apply some padding-bottom but it's not working, nothing happens. Although, padding-left is working.
    I have this problem with somethings.

    I need to learn when to close my divs. :/ any good guides on when to close div tags properly?

    Thanks all!!

  • #14
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Good ways of practise is always close a tag when you open a tag at the same time and type in the code you wan inside the open and close tag. That's what I always do. Hope you understand what I'm trying to say.

  • #15
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,929
    Thanks
    46
    Thanked 203 Times in 202 Posts
    as for padding, it may be as simple as not understanding what padding is (or the nature of it... padding is how close an item within an item will come... kind of like a reverse margin... id need to see the area where the padding isnt working to give you more insight...
    as for organizing divs to remember to close them, i follow strict organization that i set for myself... i always do three spaces in within containing items... heres an example of what i mean...

    <body>
    <div A>
    <ul>
    <li> text </li>
    </ul>
    </div>
    <div b>
    text within the div
    </div>
    </body>

    and i only break this rule for very specific situations such as an img i wll just do in line close; also lists (as can be seen above i closed them in the same line) this allows you to visually see the end tags...
    for me it is a nice way clean things up... then my company supplied me with visual studio which highlights active element tags... but its still good to keep a good code form
    I'm newer to web based coding but i had the unfortunate task of assisting in de-coding a lot of PLC/PIC code and when there is no structure it goes to H in a handbasket really quick...
    I'm beggining to rant... in closing two more tips that can also help are 1) to create your ending tag pair as you create the element, but this can cause issues when you want to nest and you accidently closed ur container and 2) COMMENT!!!!!!!!!!!! like crazy.... they dont hurt and you can remove them... i like to be perfectly blunt with my comments (the ones only I see- that get removed later) and say things like <!-- DO NOT FORGET TO CHANGE URLS! --> or something along those lines

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •