Need help getting started with this

User 457589 Photo


Registered User
133 posts

I'm having trouble getting my images to line up correctly. Can someone tell me how I should write this so that I get similar results to this? I'm not sure if I should use a table, or what would be the best way to code it and set it up. I've been working at using the HTML Editor, and want to create a page that has these elements. I will add some more, but I'm having trouble getting this basic layout to work.
Attachments:
User 122279 Photo


Senior Advisor
12,724 posts
Online Now

You are showing us an image. Which of the elements in that image are you wanting to position? The three arrows? They can be put in divs, and the divs can be positioned by means of margins, positive or negative.

I think you need to be a bit more specific.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 457589 Photo


Registered User
133 posts

Oh, I apologize.
The three arrows are one image. The Access logo across the top is another image. The other two text elements are different sections.
User 434929 Photo


Ambassador
937 posts

Please provide your HTML File with image asset in zip format and explain well what you need to do.

Please don't expect we can do magic without seeing the actual scenario .

Then whoever look at your file can help you better and clearly.
Guys at coffeecup are awesometacular.
User 457589 Photo


Registered User
133 posts

Okay, I have attached a zip file. Hopefully someone can tell me how to organize this.
Attachments:
User 271657 Photo


Administrator
3,816 posts

https://dl.dropboxusercontent.com/u/246 … eencap.jpg
Starting with the Editor's basic page set-up
(to avoid the mistakes on your access page ;)):
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
background-image:url('Background Image');
background-repeat:no-repeat;
}
.align {
display:inline-block;
width: 33%;
}
.one { text-align:left; margin-left: 3em; }
.two { margin: 1em 0 0 25%; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="align">
<img class="one" src="logo.png" width="216" height="61" alt="" title="" /><br>
<img class="two" src="crm-automation.png" width="216" height="209" alt="" title="" />
</div>
</body>
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 457589 Photo


Registered User
133 posts

Thank you so much Paintbrush! I tried pasting the code, but still cannot get it to show anything in the preview. Here is what I have:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 03 Mar 2015 02:40:09 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
background-image:url('Background Image');
background-repeat:no-repeat;
}
.align {
display:inline-block;
width: 33%;
}
.one { text-align:left; margin-left: 3em; }
.two { margin: 1em 0 0 25%; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="align">
<img class="one" src="logo.png" width="216" height="61" alt="" title="" /><br>
<img class="two" src="crm-automation.png" width="216" height="209" alt="" title="" />
</div>
</body>
</body>
</html>
User 457589 Photo


Registered User
133 posts

Okay, I got the code to work, and it looks great! Thank you so much for taking time to help me, paintbrush.

Now if someone could show me how to make the type go up the side like the sample?
Attachments:
User 271657 Photo


Administrator
3,816 posts

Here's one way to get it done:
http://calda.coffeecup.com/index2.html
Right click on the page to 'view source' and grab the code.

Keep in mind, this is on a blank page, when you get other content on there, some tweaking may be needed to get it all positioned just right.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 434929 Photo


Ambassador
937 posts

For Text Rotation :

HTML Part
<p class="vtext">Some text goes here</p>

CSS Part
.vtext {
float: left;
width: 225px;
min-height: 32px;
margin-top: 136px;
margin-left: 273px;
font-size: 1em;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(0, 0, 0);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}

Note :
At your side you may need to change or modify some of CSS property such as margin position and so on...
Guys at coffeecup are awesometacular.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.