I've been really struggling making a horizontal card. I don't want to use flexbox, because I'm not very experienced with it. I want something to look like this:
I've already tried making the card and I'm able to get it to look similar although it doesn't adjust correctly to the text inputted in it.
I would recommend you learn some basic CSS in order to do simple layouts. Anyway here's a simple draft:
.container {
margin: auto;
width: 650px;
height: 150px;
padding: 0px;
text-align: center;
}
.leftbox,
.rightbox {
display: inline-block;
width: 200px;
height: 150px;
vertical-align: middle;
text-align: left
}
.leftbox {}
.rightbox {
border: 2px dashed pink;
background-color: pink;
width: 300px;
height: 146px;
}
.header {
margin: 10px 5px;
}
.data>p {
margin: 5px;
margin-left: 8px;
}
.leftbox {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG');
background-size: contain;
background-repeat: no-repeat;
}
<div class="container">
<div class="leftbox">
</div><div class="rightbox">
<div class="header">CARAMEL MACCHIATO</div>
<div class="data">
<p>SIZE</p>
<p>TOPPINGS</p>
<p>DELIVEERY</p>
<p>AMOUNT</p>
</div>
</div>
</div>
Related
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
I'm trying to add two square ads to the right of the image on the web-site. The idea is to make this responsive like this:
http://s9.postimg.org/pdecyqi8f/div.png
Is this possible to achieve using CSS?
I use inline-block to position ads to the right and max-width: 100% to scale the image. I need the support of IE 9+ and mobile browsers.
I tried different approaches, don't even know which code example to show. It is relatively easy to position ads to the right of the image using inline-block:
div{
border: 2px solid;
}
#img,#container{
display: inline-block;
vertical-align: middle;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="img"> </div>
<div id="container">
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/w7zfj1ju/
Yet in this case I won't get desired view on narrow screens. Also, since max-width: 100%; is used for #img this div would cover #ad1 and #ad2 on narrow screens.
To achieve desired mobile view I had to change HTML to the following:
div{
border: 2px solid;
display: inline-block;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
http://jsfiddle.net/gxnqo8da/
In this case I didn't really know how to position #ad1 to the right of the #img. I gave a try to absolute positioning, it did not work. Flex also seemed not to be an option due to compatibility reasons.
I also tried to use direction:rtl; like this:
div{
border: 2px solid;
display: inline-block;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/n1mo76bv/
and this:
div{
border: 2px solid;
text-align: left;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
display: inline-block;
}
#ad1{
display: inline-block;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
</div>
<div id="ad2">ad2</div>
http://jsfiddle.net/w7sknehL/
didn't help much since I could not position #ad2.
So, I don't ask to write any code. I'm just desperate for an advice.
If you don't need to support Android 2 and Opera Mini you can still use flexbox to achieve this result via media query. Example below:
.img {
width: 100%;
max-width: 100%;
height: 300px;
background: blue;
}
.ad {
background: red;
width: 100px;
height: 100px;
}
#media (min-width : 801px) {
.wrapper {
padding-right: 110px;
}
.img {
float: left;
}
.ad {
clear: right;
float: right;
margin-right: -110px;
margin-bottom: 10px;
}
}
#media (max-width : 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.img {
order: 2;
margin: 10px auto;
}
.ad {
margin: 0 auto;
}
.ad1 {
order: 1;
}
.ad2 {
order: 3;
}
}
<div class="wrapper">
<div class="img"> </div>
<div class="ad ad1">ad1</div>
<div class="ad ad2">ad2</div>
</div>
Also:
I didn't use browser prefixes for flexbox, so it will not work in all browsers. Add prefixes or use autoprefixer to make it work there.
Fix media query parameters for you needs, I only inserted width 800 as example value, real query to detect mobile will differ.
I am trying to create some specific divs to hold content and I'm stuck trying to just create them using colors.
I went ahead and uploaded a crude idea of what I'm trying to create so I could show you guys.
http://imgur.com/lPJLuqE
I can get the first large square to show but not the other ones, can anyone shed some insight?
#row-one {
padding-top: 1em;
}
#left-block {
float: left;
width: 45%;
height: 25em;
background-color: black;
}
#right-block {
float: right;
width: 45%;
}
#block-one {
width: 100%;
height: 12em
background-color: black;
vertical-align: top;
}
<div id="row-one">
<div id="left-block">
<!--PLACEHOLDER-->
</div>
<div id="right block">
<div id="block-one"></div>
<div id="block-two"></div>
</div>
</div>
You were missing the semicolon ; after height: 12em and there were no styles specified for #block-two. Also, you specified the styles for the right-block div but were also missing the - in <div id="right block">.
#row-one {
padding-top: 1em;
}
#left-block {
float: left;
width: 45%;
height: 25em;
background-color: black;
}
#right-block {
float: right;
width: 45%;
}
#block-one, #block-two {
width: 100%;
height: 12em;
background-color: black;
vertical-align: top;
margin-bottom: 10px;
}
<div id="row-one">
<div id="left-block">
<!--PLACEHOLDER-->
</div>
<div id="right-block">
<div id="block-one"></div>
<div id="block-two"></div>
</div>
</div>
This is driving me crazy. I am relatively new to this stuff so trying to figure this one out for the past hour. I'll be really thankful if someone can help me with this.
I have the following code:
<div class="middle_box">
<div class="box left">
Some large text
</div>
<div class="box right">
Some large text as well
</div>
</div>
CSS:
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
}
.box {
float: left;
font-size: 21px;
margin-right: 50px;
margin-top: 25px;
padding-top: 25px;
width: 390px;
}
As you can tell the width of the container is 960px. Now, I want to center the two .box elements within the 960px container and that's where I am lost.
What did I try?
I tried using margin: 0px auto; and I tried faking it by adding margin-left on both sides but it just didn't work. How can I achieve this?
You need to clear ".middle_box", as its children elements are floated.
.middle_box:before, .middle_box:after {
content: "";
display: table;
}
.middle_box:after { clear: both; }
should do the trick
best way to use this hack calls clearfix :
.middle_box:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
When you are using fixed widths anyway, 960px and 390px, why not set the margin as well? Easy to calculate, no need for advanced CSS "magic" here in such setup.
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
background-color: red;
}
.box {
float: left;
font-size: 21px;
margin-left: 60px; /* <--- */
margin-top: 25px;
padding-top: 25px;
width: 390px;
background-color: yellow;
}
Here's a Fiddle
HTML
With floating - different dimensions
<div class="middle_box">
<div class="box0 left">
Some large text
</div>
<div class="box0 right">
Some large text as well
</div>
</div>
Without floating - same dimensions
<div class="middle_box">
<div class="box1">
Some large text
</div>
<div class="box1">
Some large text as well
</div>
</div>
With clear - one on the top of another
<div class="middle_box">
<div class="box2 clear">
Some large text
</div>
<div class="box2 clear">
Some large text as well
</div>
</div>
CSS
.middle_box {
margin: 0 auto 10px;
width: 960px;
height: 260px;
text-align: center;
text-transform: uppercase;
border: 1px solid #333;
}
.box0 {
font-size: 21px;
padding-top: 25px;
height: 65px;
border: 1px solid #333;
}
.left {
float: left;
width: 585px;
margin: 24px 6px 0 24px;
}
.right {
float: right;
width: 300px;
margin: 24px 24px 0 6px;
}
.box1 {
float: left;
font-size: 21px;
margin-top: 25px;
margin-left: 25px; /* margin-left | calculate 960px - boxes width - borders */
padding-top: 25px;
height: 65px;
width: 438px;
border: 1px solid #333;
}
.box2 {
font-size: 21px;
margin: 25px auto 25px;
padding-top: 25px;
width: 442px;
height: 65px;
border: 1px solid #333;
}
.clear {
clear: both;
}
Centring floats is tough, but do you need to use float? Why not use:
display: inline-block
There are advantages/disadvantages to using both float and inline-block and both have their quirks but ultimately I find inline-block much more useful and easier to develop with. Here is a fiddle for the solution to your problem using inline-block
DEMO FIDDLE
Also a heads up about its white-space quirk if you do use it (but an easy one to fix):
http://css-tricks.com/fighting-the-space-between-inline-block-elements/