Custom Page alignment

[toothfaerie]

 I do apologize if this has already been asked, I have used the search function but not been able to find what I am looking for. I am trying to create a custom page that has two image links but I want one to be aligned to the right and one on the left. I need them to stay left and right and not stick next to each other so when I make another HTML page underneath they all align. 

 So sorry I cannot explain it any better, but I want the two to be the same width as the larger image underneath the two. Gosh I have even confused myself now. 

 Thank you to anyone who can help. 


edit: Like baby squids three cells or stacked two links in the custom pages. 




www.aloog.net/page/forum

Hopefully that can be seen but it is not accessible to our clients right now. 

[Azy]

Add float:left; margin-left:70px; to the CSS of the images you want on the left side, and float:right; margin-right:70px; for the right side. 
Be warned, with such big images, it's gonna break the format on smaller client areas (phones, tablets and so forth). I believe there is a way to scale images to the client area dimensions, though, if this is what you want, too?

Actually that was easier than I thought. Add the following CSS styles. Lemme know if you want help implementing 

For small images on the left, use:
float:left;
margin-left:5%;
width:40%;

For small images on the right, use:
float:right;
margin-right:5%;
width:40%;

And for the wide images that span the page, use:
margin-left:5%;
width:90%;

[toothfaerie]

Thank you so much Azayles. I guess I will be making a new thread soon after all the clients go mad because they cannot use their mobiles and such like.

[Azy]

Sept 30, 2015 5:00:13 GMT -8 toothfaerie said:

Thank you so much Azayles. I guess I will be making a new thread soon after all the clients go mad because they cannot use their mobiles and such like.

With the image scaling, setting the widths to percentages, they'll shrink down nicely on mobile devices 

[toothfaerie]

I am totally lost Azayles, HELP! If you look up moronic imbecile in the dictionary it says look at ToothFaerie.

[Azy]

Oh bless
You'll need to add classes to each of the images in your widgets. Can you post for me the HTML code you have in each of the five HTML widgets on that page? I can add the classes, then post it back for you to replace the code you have at the moment. Then I can write the CSS for you

[toothfaerie]

Top images.

<a href="http://www.aloog.net/board/18/who-desire"> <float:left;> <img src="http://i1019./af317/horus9339/ALOOG%20FORUM/New_Forum_Images/ALOOG-What_We_Desire_zpsaou8z0ra.png~original">

<a href="http://www.aloog.net/board/7/introduce-oneself"><img src="http://i1019./af317/horus9339/ALOOG%20FORUM/New_Forum_Images/Intro_zps1mnvpstt.png~original">


long middle image.

<center> <a href="http://www.aloog.net/board/21/banned-blacklisted-review-requests"><img src="http://i1019./af317/horus9339/ALOOG%20FORUM/New_Forum_Images/Blacklist_zpsm2wpopqz.png~original"> </center>


I hope you don't mind me just sending those lines as I would like to see what you do so I do not have to bother you again.

'Oh Bless'  LOL I love you, brilliantly put. LOL

[Azy]

xD! Thought you'd like that LOL.

Anyways, here's the rechooched code. I've taken out those <float> tags as they don't appear to be doing anything anyway apart from adding a space characters width worth of padding to the image (which it will, 'cause being invalid HTML, it's not a block element, but I digress )

Top Images

<a href="http://www.aloog.net/board/18/who-desire">
<img src="http://i1019./af317/horus9339/ALOOG%20FORUM/New_Forum_Images/ALOOG-What_We_Desire_zpsaou8z0ra.png~original" class="ImageLeft">
</a>

<a href="http://www.aloog.net/board/7/introduce-oneself">
<img src="http://i1019./af317/horus9339/ALOOG%20FORUM/New_Forum_Images/Intro_zps1mnvpstt.png~original" class="ImageRight">
</a>


Long Middle Image

<a href="http://www.aloog.net/board/21/banned-blacklisted-review-requests">
<img src="http://i1019./af317/horus9339/ALOOG%20FORUM/New_Forum_Images/Blacklist_zpsm2wpopqz.png~original" class="ImageSpan">
</a>

I've also taken out the center tags, and you had zero width link in on of the images that already linked to somewhere anyway, so removed that.

Add that to replace the codes in the first two widgets, then I can give you the CSS when I know that works

[toothfaerie]

Now I know why you wear your underpants ourside of your fishnets! You are my hero. Thank you Azayles, thank you very much for your hard work.


edit: Now I am going to ask a silly question, get ready, sit down, deep breath. Should there be two

class="ImageLeft"

Or should the one on the right have "ImageRight" ?


 Anyhooo, I have completed the task set by you.


 Now the scary stuff. I know I am going to mess this CSS stuff up I can see it already.  lol

[Azy]

High praise indeed
And ohh you're right! The one on the right has ImageRight as the class

Ok here's the CSS, put this at the very bottom of your CSS page:

.ImageLeft {
   margin-left: 5%;
   width: 40%;
}

.ImageRight {
   float: right;
   margin-right: 5%;
   width: 40%;
}

.ImageSpan {
   margin-left: 5%;
   width: 90%;
}

Then just add the left, right and span classes to the images in the other widgets

[toothfaerie]

That looks absolutely wonderful, Now if I knew what you had just made me do. LOL
I can see a visit to the library in my not too distant future, 44 years old and now I have to learn a new language. BUMS!

Thank you just does not cover it, but Thank you Azayles. Thank you, thank you, thank you.

[Azy]

Never to old to learn! And you're very welcome! Always happy to help
Definitely get some books on CSS3, it's a fascinating and frustratingly convoluted language