Amy Bills
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.
Inger
Senior Advisor
14,450 posts
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.
I think you need to be a bit more specific.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Amy Bills
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.
The three arrows are one image. The Access logo across the top is another image. The other two text elements are different sections.
Mansour ...
Ambassador
938 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.
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.
Amy Bills
Registered User
133 posts
Okay, I have attached a zip file. Hopefully someone can tell me how to organize this.
paintbrush
Ambassador
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
):
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>
<!--
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
https://www.callendales.com
Amy Bills
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>
<!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>
Amy Bills
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?
Now if someone could show me how to make the type go up the side like the sample?
paintbrush
Ambassador
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.
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
https://www.callendales.com
Mansour ...
Ambassador
938 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...
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.
