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 16
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Move up posts near header?

    I'm new at this and it's probably very simple, but I was trying out to put a picture in the lower left corner of my header, and everything just dropped down. Do I need to somehow overlap the picture with the posts? If you know what I mean? I'm the worst at explaining and I'm not even english so that makes this so much more complicated. Just have a look at my blog:

    http://sknutsson.blogspot.com

    Hope someone can help me with this!

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't know if you need to look at the coding of the picture, but here it is anyway:

    <p class='pos_absolute'><a href='http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png' imageanchor='1' style='margin-left: 1cm; margin-right: 1cm;'><img border='0' height='248' src='http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png' width='300'/></a></p></div>

    I might have messed it up a bit haha. But it works! Kind of.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    When you post a link to your live site, we can see all the code and css.

    If you change the position:relative; to absolute, if will allow the content to move up fine, but you'll have other issues when you resize your browser.

    I'm thinking your image should have been inside the region-inner main-inner div. Then using the absolute position, position it in the place you need it.
    Teed

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So basically, I should move the code of the picture someplace else? I can't find the position:relative code anywhere near the pictrue? I'm sorry if I'm slow..

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    could you post a link?

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay so I found something under the *Main section, where it said position:relative so I changed it. Nothing happened obviously, because I must put in measures somewhere, right?


    .main-outer {
    margin-top: $(main.cap.height);
    background: $(main.background);
    }

    .main-inner {
    padding-top: $(main.padding.top);
    }

    .main-cap-top {
    position: absolute;
    }

    .main-cap-top .cap-right {
    position: absolute;

    height: $(main.cap.height);
    width: 100%;

    Now it looks something like this. the bold text is what I changed from being position: relative.
    Nope, can't be it right? That has something to do with the text only right.
    Last edited by sandradecibell; 02-20-2012 at 05:02 PM.

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by 5nakne View Post
    could you post a link?
    Link to what, my blog? I did!

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    <div style="clear: both; text-align: left;" class="separator">
    <a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
    <img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>
    Thats the Rose image, right?

    Then the CSS for that img is:

    Code:
    a img {
        border: medium none;
        position: absolute;
    }
    which is in the File:

    static/v1/widgets/3808626252-widget_css_2_bundle.css
    Teed

  • #9
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Code:
    <div style="clear: both; text-align: left;" class="separator">
    <a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
    <img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>
    Thats the Rose image, right?

    Then the CSS for that img is:

    Code:
    a img {
        border: medium none;
        position: absolute;
    }
    which is in the File:

    static/v1/widgets/3808626252-widget_css_2_bundle.css
    Oh my god, dude. Nailed it. Now all i need to do is move down "favoriter", and I'm done!
    Last edited by sandradecibell; 02-20-2012 at 06:22 PM.

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay so the problem with this (I think it's because of that edit at least) is that all pictures on my blog gets really weird (see last post on the front page) how do I fix that?

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by sandradecibell View Post
    Okay so the problem with this (I think it's because of that edit at least) is that all pictures on my blog gets really weird (see last post on the front page) how do I fix that?
    You'll need to assign a class or id to the image you want to style. Then style that class/id

    So instead of a img {some styles here}

    you could do

    <img id="rose" src="rose.jpeg">

    then in your style sheet replace "a img" with:

    #rose {
    border: medium none;
    position: absolute;
    }

    If you apply a style to the img tag, then of course every img in your site will get those css attributes applied to them. If you give a single image an id or class, and then style that id or class, then only the img with that id or class gets styles. You can read more about specificity here. Hope this helps.
    Last edited by teedoff; 02-20-2012 at 07:10 PM.
    Teed

  • #12
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    You'll need to assign a class or id to the image you want to style. Then style that class/id

    So instead of a img {some styles here}

    you could do

    <img id="rose" src="rose.jpeg">

    then in your style sheet replace "a img" with:

    #rose {
    border: medium none;
    position: absolute;
    }
    Okay that makes sense, do I paste <img id="rose" src="rose.jpeg"> into the HTML template? Near the code for the photo or something?

  • #13
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried using the img id code but it only allowed me to save the following: <div class='rose' src=' free+digital+stamp_rose+illustration+(1).png'/>

    When I put #rose {
    border: medium none;
    position: absolute;
    } into the CSS absolutely nothing happened. I tried to put a img {
    border: medium none;
    position: relative;
    } into it as well because I thought that would make all the other pictures position relative? Nope, I was wrong once again. haha

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    No, no, you need to find that section of code in your markup where the image is coded:

    Code:
    <div style="clear: both; text-align: left;" class="separator">
    <a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
    <img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>
    Then give it an id="rose":

    <div id="rose" style="clear: both; text-align: left;" class="separator">
    <a href="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s1600/free+digital+stamp_rose+illustration+(1).png" imageanchor="1" style="margin-left: 1cm; margin-right: 1cm;">
    <img width="300" height="248" border="0" src="http://2.bp.blogspot.com/-K8ZracELseo/T0I5OEYLSXI/AAAAAAAAAK8/TVSSYYF7fgk/s320/free+digital+stamp_rose+illustration+(1).png"></a></div>

    Then change the:
    Code:
    a img {
        border: medium none;
        position: absolute;
    }
    to:
    Code:
    #rose{
        border: medium none;
        position: absolute;
    }
    Teed

  • Users who have thanked teedoff for this post:

    sandradecibell (02-20-2012)

  • #15
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yeeessss thank you so much! It's not easy being new at this, nothing really makes any sense to me yet haha. If I could, I would hug you. I've learned a lot!


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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