WordPress.org

Ready to get started?Download WordPress

Forums

can i... css question (34 posts)

  1. ayteale
    Member
    Posted 10 years ago #

    can i lower the "lighttight"graphic so the bottom of it is level with the bottom of my h2 ("archives/next)????
    http://ryanflynnphoto.com/blog
    thanks

  2. Root
    Member
    Posted 10 years ago #

    Yes you can. In the img tag in your index php define a class. eg class="logo".
    In your wp-layout css style the class eg .logo {padding-top: 20px;}
    The padding-top will drive the logo down to the required position. HTH. Welcome to WP. Cool looking blog. ;)

  3. ayteale
    Member
    Posted 10 years ago #

    Thanks Root, but that didnt work.....I did learn that the . before logo or whatever defines it as a class (I couldnt figure out why the padding wasnt doing anything at first so I put a # before it, then found the . is the key) so thats cool.
    Anyway, that just added a padding between the rap border and the top of the logo...
    Any other suggestions?
    And thanks for the compliment...its been a long hard lesson, but made easier by NSX and Laughing Lizzard and others on here

  4. ayteale
    Member
    Posted 10 years ago #

    Oh, Root, your post also made me look up HTH...so Ive learned 2 things from your post :)

  5. Root
    Member
    Posted 10 years ago #

    Sorry. That should be margin-top. I have had a long day too. You should be motoring now.

  6. ayteale
    Member
    Posted 10 years ago #

    Thanks root, but that didnt work eiter...it did the same as the padding and just pushed the whole site down....

  7. Root
    Member
    Posted 10 years ago #

    I have had another look. This time at the index.php in more detail. This is definitely the heads up:-). That darn logo image is in an h1 tag of all things. This is wrong. H1 is strictly text. (we are not talking Farhner image relacement here). It is clearly causing you all kinds of problems. Get it out of the h1 and
    float: left; margin-top; as required. HTH (Finally). Still looks cool.

  8. ayteale
    Member
    Posted 10 years ago #

    I think I took it out, but now i am totally lost.....the rap border isnt working , and im not too sure where I am supposed to put the image...in the css header? how will i make it link back to home? I appreciate your help

  9. Root
    Member
    Posted 10 years ago #

    I hope I am not confusing you. It is difficult to judge how much detail you need.
    At the moment you currently have an h1 header open. No header in it and no closing h1 tag. For the time being delete it.
    The image should be inserted using img src etc plus class="logo".
    Then in wp-layout.css (I am presuming you are using a text editor not the template - no probs if you are but it is easier to use say Textpad the ftp) but back to wp-layout- just add a class by adding
    .logo{margin-top: 20px;}.
    So in summary. Insert image and define the class in index. In the css style the class for the image. I am sure we'll do it. You can check my blog a very new work in progress with the css in the index at
    here. I use floated images in my posts. Sometimes. Have a look.

  10. ayteale
    Member
    Posted 10 years ago #

    I know your probably refreshing my site, watching me screw up every 20 seconds! hehe
    Ya, im totally new to all this....my question next is where do I insert the image in the index? I just plopped it in there but it is now not inside my rap???
    I do appreciate it!

  11. ayteale
    Member
    Posted 10 years ago #

    hold up, I think im getting it!

  12. Root
    Member
    Posted 10 years ago #

    This is Houston. You are looking good. Just a bit of fine tuning from here.

  13. ayteale
    Member
    Posted 10 years ago #

    Houston, my damnproblem is back....now looking almost right, cleaned it up as you instructed me, but that damn thing will not scoot down without just moving the rest down with it....geez!

  14. Root
    Member
    Posted 10 years ago #

    Fine. In your css the .logo is coming on but has two typos in it. One has px and no value, one (padding) is unnecessary. Just fine tuning but it is disturbing the image position. You are now right on the money.

  15. ayteale
    Member
    Posted 10 years ago #

    it just aint working for me...i put a 50px top so you can see what i mean

  16. Root
    Member
    Posted 10 years ago #

    OK. This is not semantic and might temporarily break validation but you could take out the height and width for the img as a test. Something wierd is happening.

  17. Root
    Member
    Posted 10 years ago #

    This is your css for the img class logo and the adjustment needed. You are styling the div probably. Just stick with .logo.
    .logo {
    margin-left: 28px;
    margin-top: [THIS IS WHERE WE NEED A VALUE!]px;
    padding-top:;[NO NEED FOR PADDING AT ALL!]
    }

  18. ayteale
    Member
    Posted 10 years ago #

    thats what I have, and its not working....am i missing something in the index? like the div you are talking about?

  19. Root
    Member
    Posted 10 years ago #

    There is something odd about the line up. You have a content div in the index but it is not styled. Here is a really cool trick. Add brightly colored borders to all the divs involved and the image. Then we can see what the heck is where. This is a pro's hack and is very useful at this stage. When we are lined up we can delete them.

  20. ayteale
    Member
    Posted 10 years ago #

    Ok, my noobieness has totally gotten me lost with your last post...also what is a good bright color?...do i do this in the css, and just like border: 3px #whatever; ?????

  21. Root
    Member
    Posted 10 years ago #

    Yup. In the css adjust #div whatever by including {border: 2px solid red;}
    Put a border on each of the effected parts using say blue red and green.

  22. ayteale
    Member
    Posted 10 years ago #

    I didnt do everything but hopefully this will do it......

  23. ayteale
    Member
    Posted 10 years ago #

    i think i understand now....

  24. ayteale
    Member
    Posted 10 years ago #

    well, i thought i did.....i just dont see why now?

  25. ayteale
    Member
    Posted 10 years ago #

    when i put a blue border on "a img{" it showed up around the logo, but it went to green when i put a green one on the .logo{

  26. ayteale
    Member
    Posted 10 years ago #

    well, im dead tired, i saved a copy of the css with borders but i had to take them off for the night....i just cant figure it out....i dont think i put in the logo in the right place in the index.php
    Thanks root...good night

  27. Root
    Member
    Posted 10 years ago #

    We lost communication. My ISP suddenly went into their increasingly frequent maintenance routine and we were disconnected. A tough night for you I know and you are gainingg in confidence and control of the css. But here is the thing. The logo,and the h2 are now in two different divs, one above the other. The logo is in logo and the h2 in content. Hence the image won't push down. The default behavior for rendering a new div is to go down and left. So what you need to do is lift the h2 text up into the new logo div above. Do not style it as h2. Just put it in as the text you want. An h2 would also break to a new line but plain text will flow to the right of the image. Then you can adjust for formatting and position. You might prefer to move to email. I am at blog at atthe404.com. I will be offline for eleven hours fron now. Talk to you soon.

  28. ayteale
    Member
    Posted 10 years ago #

    Yup, that was hard but very educational, thanks for all your help.
    I got the text into the logo now, i just cant figure out how to push it over to the right, I have tried a lot of things and I just can't figure it out. The only thing i could think of now is to put in an image to act as a spacer to puch the text over....what do you think? (although I know it is not "right" :)

  29. Root
    Member
    Posted 10 years ago #

    Wow. Now you really are right on the money. You have set a class of textnav I think and styled it in the css. Brilliant. All you need to do now is increase the
    margin-left and it should push it across. Fingers crossed. Fabulous job. I admire your perseverance. For my part I wish I had been a bit more concise and maybe focussed earlier on but now we seem to be there. Drop by my blog if you have a minute. As always - a work in progress. Good luck. And welcome to Word Press ;)

  30. Root
    Member
    Posted 10 years ago #

    Heck are you still going at this ? :-) Last time I looked it was fine and just needed a bit of tuning. Everything was in the right place (code wise) , you only needed to increase the margin you had already allocated in the CSS to the required value. Alternatively you can add a class to the img src tag and style that with a margin-right to push the text away. HTH

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.