Img & Text

Get Started
1

i’m learning to code and I’m trying out a facebook page. I want some text and an arrow next to the text ( and possition the arrow ) but noting is working right as the arrow is not moving up enough. I’m trying the following codes:

<div id="pages">
<div id="pages-inside">
<p><img src="http://organicwebdesigns.co/facebook/images/logo_s1.png" alt="logo" class="logo" /></p>
<ul>
<li>LIKE US TO WIN</li>
<li><img src="http://organicwebdesigns.co/facebook/images/arrow_s1.png" class="arrow" /></li>
</ul>

css:

#pages {
width: 100%;
float: right;
margin-bottom: 15px;
}

#pages-inside {
width: 500px;
height: 72px;
margin: auto;
position: relative;
border: none;
}

.logo {
margin-top: 12px;
float: left;
border: none;
width: 160px;
}

#pages-inside ul {
list-style-type: none;
list-style-image: none;
padding: 10px 0px 0px 0px;
margin: 15px 0px 0px 15px;
float: right;
}

.arrow {
height: 67px;
width: 81;
margin-bottom: 10px;
}
2

Do you have a link to this? It’s pretty hard to visualize what’s happening here, and the code seems somewhat incomplete.

3
Off Topic:

hantaah, I love your avatar! Any significance?

4

hi there. It’s on my facebook fan page, http://www.facebook.com/pages/&#8203;Organic-Web-Designs/1956627371&#8203;57883 however I want to place an arrow on the end pointing to the like button on the top but I’m getting the arrow below the words, stuck to the top banner and it won’t go up. Is there anyway to send attachments on here?

5

Thank you - it ties in with the organic web designs theme of my website

6

Hmm. This what I get:

The page you requested was not found.

You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.

You can upload a zipped file if you want.

7

mm try this or type in search organic web designs look for my logo

Organic Web Designs - HTML iFrame | Facebook

8

OK, it’s showing now.

On the end of what? I don’t see an arrow anywhere at the moment. Is it meant to be there?

9

right at the top it says like us to win fb design and I want to place an arrow at the end, pointing up towards the like button but the arrow isn’t there yet as it is positioning underneath the txt and sticking to the top banner when I do it

here is the arrow

http://organicwebdesigns.co/facebook/images/arrow_s1.png

10

There’s no real point in using a UL there for ne item (better use a <p>) but anyhow, you could give the LI some right padding and place the arrow as a background image on the LI, with position: 100% 50%.

11

when it comes to coding from scratch, It’s very new to me, so i’m just trying all this out.

so take out the ul and put it in p. I think I tried it before, I’ll have another play around

12

OK, turn it into

<p class=“arrow”>Like Us To Win Free FB Design</p>

and than try this:

.arrow {
float: right;
padding-right: 85px; 
line-height: 67px; 
background: url(http://organicwebdesigns.co/facebook/images/arrow_s1.png) no-repeat 100% 50%;
}

Or you could do this in the HTML:

<p class="arrow">Like Us To Win Free FB Design <img src="http://organicwebdesigns.co/facebook/images/arrow_s1.png" alt=""></p>

and then this in the CSS:

.arrow {
float: right;
line-height: 67px; 
}

.arrow img {vertical-align: middle; padding-left: 10px;}
13

ok, 2nd onw worked, kinda, just needs to be adjested a little. it’s all a little confusing to me at the moment. I’m wondering if I’ll ever get the hang of it. Any tips on how to master it?

14

You didn’t add in any of those styles I suggested:

.arrow {
float: right;
line-height: 67px; 
}

.arrow img {vertical-align: middle; padding-left: 10px;}

At least add this to your style sheet:

.arrow {float: right;}

You may not like the other styles.

Any tips on how to master it?

A lot of people seem to stumble around over this stuff rather than attack the subject systematically. When I decided to learn this stuff, I found a good book, sat down, and studied it meticulously for a few weeks. Then I had a comprehensive, solid foundation for learning more—a lot of that learning having taken place around here. :slight_smile:

15

I did or maybe I didn’t save it, let me check

16

hi just checked and it’d there in the style sheet

17

Looks like it’s behaving now. :slight_smile:

18

it sure is!!! I’ve bought a few months of coding training so hoping to get a little practice from that.

Thanks again

Only thing now is the like button doesn’t seem to be working - what happens when you click it? :slight_smile:

19

Works fine for me.