Positing search div - html

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

Related

Fix floating box in Html

So I want my boxes to stay the same position even when I shrink my window.
But for now when I shrink them, they will resize and push the floating box to the bottom space and not making a line together.
.bodybox1
{
border:1px solid black;
width:45%;
background:white;
margin:1% auto 2% auto;
text-align:center;
font-size:2em;
padding:3%;
overflow:hidden;
}
.boxcoverblack
{
text-align:center;
width:120px;
padding:7%;
border:1px solid black;
margin-top:2%;
}
.signuparea
{
width:30%;
float:right;
border:1px solid black;
text-align:center;
padding:3%;
overflow:hidden
}
.signuptext
{
text-align:center;
width:180px;
padding:7%;
word-spacing:15px;
border:1px black solid;
line-height:35px;
}
.freeshipping
{
float:left; /*image*/
}
<div class="bodybox1">
<img class="freeshipping" src="https://via.placeholder.com/500x300" width="500" height="300" >
<div class="signuparea">
<div class="signuptext">Sign up to get freeshipping coupon code! ( per phone number )
</div>
<div class="boxcoverblack">Sign up</div>
</div>
</div>
help me please....
http://jsfiddle.net/abxf6c9h/
.bodybox1 {
display:flex;
justify-content:center;
border: 1px solid black;
width: 100%;
background: white;
margin: 1% auto 2% auto;
text-align: center;
font-size: 2em;
padding: 3%;
overflow: hidden;
}
Try this. I guess you want this box displayed as flexed. Tell me if that gave you a hint . I just added:
display:flex;
justify-content:center;
See my fiddle:
http://jsfiddle.net/abxf6c9h/1/
You need to use flexbox and a bit of arrangements :
use
display:inline-block
instead of
float:left
use vertical-align:top to remove the auto centering align from the wraping div
and finaly
display:flex;
flex-wrap:nowrap;
to the parent of the 2 involved divs
Here's the result
fiddle

Float image outside table in HTML Email

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/

How to add a minimum margin-top?

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.

How can you create an centered AJAX modal popup whose width is percentage based?

I'm using the following style, on an Ajax modal popup. The Width is set correctly, but it is aligned on the left side of the screen. If I set the width to a fixed number, eg 600px, it becomes centered. Is there a way to do both centered and based on a percentage?
.modalPopup {
background-color:#ffffff;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
position:relative;
width:80%;
}
Try
.modalPopup {
background:#fff;
border:3px solid gray;
padding:3px;
position:relative;
width:80%;
margin: 0 10%; /* percent based margins will do the trick */
}
This is what I ended up using, but Zoltan showed me the way. This has allows me to have a scrollbar if needed.
.modalPopup {
background:#fff;
border:3px solid gray;
padding:3px;
position:relative;
width: 80%;
height: 400px;
margin:0 10%;
overflow:auto;
}

Thumbnail of a Portion of an Image While Maintaining Aspect Ratio

I'm attempting to create thumbnails out of some images, each of which isn't necessarily the same size at the others.
Here is a Fiddle with my current code. I've read on some other sites, and even on here that I just need to set the width and height of the image class, then apply the overflow:hidden property, but that doesn't seem to be working. It's still changing the aspect ratio of the image. I know I could just simply remove either the height or width property, but I really just want to make a 100x100 crop of the image. I tried clip:rect() but couldn't figure out how to make it work. Ideally, I'd want to crop 100x100 from the center of the full-size image, but using clip, I don't think I can do this if the dimensions of my images aren't all the same.
.thumbnail {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
}
using css and html:
First solution:
html:
<div class="imageFrame">
<img src="your_path" alt="thumb" />
</div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
}
.imageFrame img{
position: absolute;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;
display: block;
}
Second solution:
here you will have to use some JS to add dynamically the image url path to the <div class="imageFrame".
html:
<div class="imageFrame" style="background-image: url('your_path');"></div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
background-repeat: no-repeat;
background-position: center center;
}