I'm looking to create a HTML email that should work in all the major email clients. (Read - ugly table-based layouts)
The design looks something like:
.
I can't use absolute positioning for the image (the circle with thunder) because it's not supported in email clients.
Can anyone guide me in the right direction?
The EDM needs to be responsive as well as have the rounded corners on the rectangle.
Also the width of the rectangle can't be a fixed width either.
try this one:
.rectangle{
display:block;
height:250px;
width:250px;
background:orange;
position:relative;
margin-top:100px;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
p
{
margin-top:38px;
position:fixed;
color:white;
width:200px;
text-align:center;
padding:10px;
}
.circle{
position:absolute;
left:50%;
margin-left:-25px;
top: -40px;
}
.circle img{
position:absolute;
width: 100px;
border:3px solid white;
height: 100px;
border-radius: 100%;
left:50%;
margin-left:-25px;
top: -20px;
}
DEMO HERE
Use an external div for the thunder image.
Then give it a disply:block and use the text-align:center; to bring it to center
Demo
https://jsfiddle.net/gje91rzs/embedded/result/
Related
Please, no javascript.
Imagine this if you will. A page that has hundreds of boxes with each box containing a joke, cite, image... (all boxes with a display:inline-block;).
Now I'm trying to place A chart with a few components with position:absolute; and left: in one of the display:inline-block; boxes with no luck. The chart shows at the left side of the page with the next joke box underneath it.
How do I control it?
Cheers, All.
Part 2 (my box code):
.boxDarth{
border-radius:5px;
border:1px solid #663810;
box-shadow:-3px 5px 4px #000000;
margin:6px 3px;
padding:6px;
display:inline-block;
line-height:1.5;
text-align:left;
text-decoration:none;
font-weight:lighter;
letter-spacing:1.4;
text-shadow:-1px 1px 1px #37363b;
word-wrap:break-word;
vertical-align:top;
position:relative;
}
The chart ccs is quite long. If what I provide here is not enough, and since I've never asked a question here; should I paste it here? upload a file?
.pie{
position:absolute;
width:100px;
height:200px;
overflow:hidden;
left:150px;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-webkit-transform-origin:left center;
transform-origin:left center;
}
The container should have position: relative as a CSS attribute
The chart has to be a child of the inline block box, and the box needs to have position: relative; on it.
.inline-box {
display: inline-block;
background: violet;
width: 300px;
height: 300px;
position: relative;
}
.chart {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 150px;
background: cornsilk;
}
<div class="inline-box">
<div class="chart">
hi, I'm an absolutely positioned chart inside of a relatively positioned inline box
</div>
</div>
I'm wondering how to connect two div elements with a line which is even distanced kind of like the one in this website:
JSFiddle link: https://jsfiddle.net/mcbvb8m2/
How would you do this for horizontal and vertical divs?
Any help would be appreciated!
Thanks.
You can create a div with a class of something like connector and style this to look like the connector with the following CSS:
.connector {
border: 6px solid #333;
border-right: 0;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
height:50px;
width: 10px;
}
You can change the appearance of this by playing around with the border thickness, colour and border-radius. This takes care of the styling.
To position it correctly, you can use absolute or relative positioning. In this case to use absolute positioning, apply position:absoluteto the connector class. To position it use properties such as top, bottom, left and right. The absolute position will absolutely position the element relative to the entire page so I'd recommend adding position:relative to its parent container so it is positioned relative to this.
.container{
height:800px;
width:100%;
padding:50px;
background:#eeeeee;
position:relative;
}
.box-1{
height:300px;
width:300px;
background:blue;
color:#fff;
margin-bottom:30px;
}
.box-2{
height:300px;
width:300px;
background:red;
color:#fff;
}
.connector {
position:absolute;
top: 335px;
left: 35px;
border: 6px solid #333;
border-right: 0;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
height:50px;
width: 10px;
}
<div class="container">
<div class="box-1">
Box 1
</div>
<div class="box-2">
Box 2
</div>
<div class="connector"></div>
</div>
I have a problem, I want to set search results be like on picture: http://prntscr.com/62bbce (sry for my bad drawing skills :/)
But i get that: http://prntscr.com/62bbpw
this is my css code:
#search{
margin-left:100px;
width:300px;
border-radius:5px;
}
#search_results{
position:absolute;
background:white;
font-size:17px;
}
You have to set the width of the search results to 300px too if you want both divs to be the same width.
#search_results{
position:absolute;
background:white;
font-size:17px;
width: 300px;
}
You position it the same way as the other div:
#search_results{
border:1px solid grey;
background:white;
font-size:17px;
width: 300px;
margin-left: 100px;
margin-top: 15px
}
Full code: http://codepen.io/anon/pen/raYdLw
i would like to have a sort of minimum margin-top. Basically if you visit my webpage
NerdyFuture. And scale the browser window down, the carousel will get smaller that's why the last news header and box need to go up. But at some point I want it to stop going up, so that the box doesn't overlap the carousel. How can i do this? Is there some kind of hack for this?
Latest News Header:
#latest_news_header{
z-index:3;
position:relative;
float:left;
width:100%;
min-width: 613px;
max-width:45%;
display:inline;
margin-top:23.5%;
font-size: 1.0em;
text-align:left;
background-color:#828282;
margin-left:18.6%;
font-weight:400;
padding:3px;
font-family: Proxima-Nova,Helvetica,Arial,sans-serif;
text-transform:uppercase;
color:#30DB00;
text-shadow: 1px 1px 3px #333;
Latest News Box:
.latest_news_box{
z-index:2;
position:relative;
display:inline;
float:left;
width:100%;
margin-left:18.6%;
min-width: 619px;
max-width:44.9vw;
height:600px;
background-color:white;
}
In Header_CSS.css line 35 you have :
#header {
width: 100%;
z-index: 10;
background-color: #828282;
max-height: 46px;
max-width: 100%;
}
remove the
max-height: 46px;
and give your #latest_news_header a margin-top of something like 10px, or whatever you feel is right.
Right now I would like to have a plus sign with a circle around it.
http://jsfiddle.net/dtracers/cvtztcy1/1/
<h1>TEXY TXT <span>+</span></h1>
<style>
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0px;
padding-bottom:0.125em;
cursor:pointer;
margin:0px;
}
/* Just to see if that would modify anything */
h1 {
padding:0px;
margin:0px;
}
</style>
After looking at it you can tell that this is not a circle but instead an elipse.
I have realize that it is the text height that is causing this issue but is there a way to make it appear closer.
The background is dynamic so I can not use an image.
And I would rather not have a floating element that depended on absolute positioning.
I would also like the circle in height to be equal to its current width.
I know I can just make it wider but I don't want a giant circle I want a tight small circle
EDIT
For those that are saying this is the same question it is kinda.
The difference between what I am asking and what that person is asking is that in their case the circle is larger than the bounds of the text.
What I am asking is for a circle that is smaller than the bounds of the text.
As such none of the solutions given there will apply to my question.
You can achieve this using :after pseudo element. check the DEMO.
span {
position:relative;
padding:0; margin:0;
cursor: pointer;
}
span:after
{
content:"";
position:absolute;
display:inline-block;
left:-1px;
top:7px;
background:gold;
border-radius: 50%;
width:0.5em;
height:0.5em;
font-size:1.3em;
z-index:-1;
}
Adjust your padding value in css and all is good :
demo
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0 2%; /* updated */
/* padding-bottom:0.125em; removed */
cursor:pointer;
margin:0px;
}
This will lead to a perfect circle:
span {
border-radius: 150px;
border-style:solid;
border-width: 1px;
padding:1% 2%;
cursor:pointer;
margin:0px;
width:200px;
line-height:300px;
}
One solution is to make the span have equal width and height using em so it naturally adjusts to the font size.
h1 span {
display: inline-block;
width: 0.9em;
height: 0.9em;
line-height: 0.8em;
text-align: center;
color: teal;
background-color: palegoldenrod;
border: 0.18em solid;
border-radius: 1000px;
padding-left: 1px;
cursor: pointer;
}
Then center the plus sign with line-height and text-align.
Fiddle with the CSS:
http://jsfiddle.net/zx2c4drL