I wish to set multiple buttons to equal width in a container. I also wish to get the button to resize when it is in landscape mode or wider screen. How am I able to achieve that?
What I am trying to achieve is as follow
But what I get when I switch it back to Potrait
The code is in JSFiddle JSFiddle Code
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url("https://preview.ibb.co/kJvJ5e/1847p.png") no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
.currentposition{
position: -webkit-sticky;
position: sticky;
right:20px
}
.wrap {
width: 100%;
height: 50px;
padding-top: 10px;
padding-bottom:10px;
text-align: center;
}
button{
margin-left: 15px;
display: inline-block;
text-align: center;
white-space: nowrap;
color: #000000;
border-color: #B9E5fB;
text-transform: uppercase;
background-color: #B9E5fB;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 10px 10px;
font-size: 13px;
border-radius: 10px;
width:20%;
}
button:first-child{
margin-left: 0;
}
<body id="page-top" style="font-family:Arial">
<div class="card" >
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search classes" class="form-control" id="searchBar">
<label for="searchBar" class="glyphicon glyphicon-search" rel="tooltip" title="searchBar"></label>
</div>
</div>
<button class="btn-checkin" style="font-family:Arial">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid">
<img src="img/location.png" class="pull-left" style="width:25px;height:20px;padding-left:10px" />
<p class="pull-left" style="padding-left:10px;font-family:Arial">Current Location <b>Sri Petaling</b></p>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/7557.jpg" style="width:104px;height:64px;padding:10px 10px 10px 5px" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB;font-family:Arial" >PERSONAL TRAINING</h5>
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="margin-top:20px">
<div class="container">
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Plan your time</p>
</div>
<div class="wrap">
<button>All</button>
<button >Morning</button>
<button >Afternoon</button>
</div>
<div class="wrap">
<button>Evening</button>
<button>Tomorrow</button>
<button>This Week</button>
</div>
</div>
</div>
</body>
Results still not working? Please help
You can use bootstrap grid to achieve your goal. Wrap your buttons inside bootstrap columns as below. This creates columns of equal width and your buttons reside within each columns.
<div class="row">
<div class="col"> <button class="mybtn"> All </button> </div>
<div class="col"> <button class="mybtn">Morning</button> </div>
<div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>
You can add spacing between your buttons by providing a margin:
.mybtn
{
margin:0 5px;
}
Read more Here
Use col-md-4 for medium size devices, col-sm-4 for small devices, col-xs-4 for extra small devices.
Try this link.
http://jsfiddle.net/my5hdu6k/7/
To settle the button the way you want, you need to limit the width of them not exceeding 33.33% of total width in any screen size.For that, you need to use parent row div and wrap each button inside col div as shown in the code below.
<div class="wrap">
<div class="row">
<div class="col">
<button>Button 1</button>
</div>
<div class="col">
<button>Button 2</button>
</div>
<div class="col">
<button>Button 3</button>
</div>
</div>
Then, you have to trick the text to be ellipsis to safe guard the exceeding text for the smaller screen ( this may not be require for your this instance but it is good practice to plan for worst ). Look closely to the changes I made for the .button class in CSS.
.wrap {
width: 250px;
height: 50px;
padding: 25px;
text-align: center;
display: inline-block;
width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;} /* Customized the .row class of bootstrap */
button{
margin:5px 0; /* to undo your older style */
width:100%;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
button:first-child{
margin:5px 0; /* to undo your older style */
}
Please check the provided jsfiddle
Related
I'm currently attempting to build a basic website using HTML, CSS and Javascript. However there's a specific part of this website that I'm having difficulty building. Here's what the section is meant to look like, with the part on the left being the part that's tripping me up the most. It's a section which is meant to contain four basic squares next to each other; Image 1 (linked earlier) provides a visual.
Here's an image of what I've currently managed to get: All four squares are present, but they're stacked on top of one another instead. I haven't been able to get much closer to it.
Here's the html code behind it:
<div class="top-large-left">
<h3 id="hot">Interaction</h3>
</div>
<div class="small-top-right">
<h3 id="item">Location</h3>
</div>
<div class="large-left-section">
<div>
<section class="left-section">
<div class="btn-group button">
<div class="button1">
<button type="button1">Display X, Y</button>
</div>
<div class="button2">
<button type="button2">Theme</button>
</div>
<div class="button3">
<button type="button3">Modal</button>
</div>
<div class="button4">
<button type="button4">Swap Image</button>
</div>
</section>
</div>
As well as the CSS:
.btn-group button {
background-color: #428bca;
border-radius: 5px;
font-weight: bold;
font-size: 15px;
color: white;
padding: 32px 19px;
cursor: pointer;
display: inline-block;
margin: 2px 2px;
border: 1px;
text-align: center;
line-height: 25px;
}
.button1 {
width: 130px;
}
.button2 {
width: 130px;
}
.button3 {
width: 130px;
}
.button4 {
width: 130px;
}
How would I be able to achieve what is being shown in the first image? Is the css-grid function what I need to use, or something else? Feel free to say if I need to provide any more information, thanks.
Flex is your solution here. Flex makes your life easier.
Run the snippet on full window. (Full page)
.top-large-left {
background-color: #428bca;
padding: 0 1rem;
}
.top-large-left h3 {
margin:0;
}
.wrapper {
display:flex;
flex-direction:row;
}
.large-left-section,
.large-right-section{
flex: 1 1 50%;
border: 10px solid lightgrey;
text-align: center;
margin:5px;
}
.btn-group button {
background-color: #428bca;
border-radius: 5px;
font-weight: bold;
font-size: 15px;
color: white;
padding: 32px 19px;
cursor: pointer;
display: inline-block;
margin: 2px 2px;
border: 1px;
text-align: center;
line-height: 25px;
}
.large-left-section .left-section .btn-group.button{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.large-left-section .left-section .btn-group.button .btn {
flex: 0 0 45%;
margin:5px;
}
.large-left-section .left-section .btn-group.button .btn button {
width:100%;
}
<div class="top-large-left">
<h3 id="hot">Interaction</h3>
</div>
<div class="wrapper">
<div class="large-left-section">
<section class="left-section">
<div class="btn-group button">
<div class="btn button1">
<button type="button1">Display X, Y</button>
</div>
<div class="btn button2">
<button type="button2">Theme</button>
</div>
<div class="btn button3">
<button type="button3">Modal</button>
</div>
<div class="btn button4">
<button type="button4">Swap Image</button>
</div>
</div>
</section>
</div>
<div class="large-right-section">
</div>
</div>
I am new to HTML CSS. I am practicing to make a website.I am trying to create an image slider. On setting display: flex the flex-shrinks even if flex-grow is given?
For that I took a div container(class name is content) and inside that I took 3 other div container(class name is inner-content). After setting css properties for those 3 containers and if I set display:flex on outer div container the flex shrinks. I don't want that. I tried flex-basis but it doesn't work?
/=======Image before applying display:flex;===/
/=======Image after applying display:flex;===/
.content{
margin-top: 10px;
display:flex;
height:85vh;
background: yellow;
width: 100%;
/* overflow: hidden; */
padding:0px;
}
.inner-content{
padding:75px 50px 0px;
display:flex;
margin: auto;
border: 1px solid black;
}
.cont{
flex:1.5;
padding:90px 0px 0px 50px;
background: chocolate;
}
.cont h3{
font-size:30px;
padding-bottom: 10px;
letter-spacing: 1px;
text-shadow: 1px 0px black;
}
.cont p{
font-size:20px;
padding-bottom: 10px;
}
.cont button{
width:150px;
margin:auto;
height:11%;
margin-top:10px;
font-size:18px;
border:2px solid #072085;
color:#072085;
background: white;
border-radius:20px;
text-align: center;
}
.image-container{
align-items: center;
z-index: 1;
flex:1;
}
.image-container img{
max-width: 300px;
height: auto;
margin:0 auto;
animation:drop 1.5s ease;
z-index: 1;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<div class="main-page">
<div class="content">
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
<!----2nd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
<!----3rd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
</div>
</div>
You need to give min-width to your inner-content. Run the snippet and check in full page.
I am assuming you know how to implement slider functionality.
.content{
margin-top: 10px;
display:flex;
background: yellow;
width: 100%;
padding:0px;
overflow-x: scroll;
}
.inner-content{
padding:75px 50px 0px;
display: flex;
flex: 1;
border: 1px solid black;
min-width: 90vw;
}
.cont{
padding:90px 0px 0px 50px;
background: chocolate;
}
.cont h3{
font-size:30px;
padding-bottom: 10px;
letter-spacing: 1px;
text-shadow: 1px 0px black;
}
.cont p{
font-size:20px;
padding-bottom: 10px;
}
.cont button{
width:150px;
margin:auto;
height:11%;
margin-top:10px;
font-size:18px;
border:2px solid #072085;
color:#072085;
background: white;
border-radius:20px;
text-align: center;
}
.image-container{
align-items: center;
z-index: 1;
flex:1;
}
.image-container img{
max-width: 300px;
height: auto;
margin:0 auto;
animation:drop 1.5s ease;
z-index: 1;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<div class="main-page">
<div class="content">
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
</div>
</div>
<!----2nd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
</div>
</div>
<!----3rd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
</div>
</div>
</div>
</div>
My image separator covers the whole separator container on my first 2 html. But it doesn't work on the third one. On the third html there are 8 div rows and in each row there are 3 div columns. Some selectors are not found on the given css because i use it for 4 htmls
/*----------------REMINDERS------------------*/
/*Standard rule: Styles and layout of a webpage
should look like itself until window reaches 992px*/
/* To test responsiveness:
> On browser: press f12 to see dev tools
> click on the second icon to toggle responsive layout
> set width to 992px and leave the height to blank to get the max height of current window
(You can also choose desired device to test with.
Just click the dropdown beside current window width)
*/
/*Now on 991px, the design and layout should change to mobile view*/
/*Read more about "CSS Media Queries" to control styles on specific window sizes*/
/*------------------------------------------*/
/*Reset all styles of elements*/
*{
margin: 0;
padding: 0;
}
/*Observe this container on sections*/
.main-container {
width: 80%; /*This will always get the 80% of the body*/
margin: auto; /*To center element*/
}
/*Navigation*/
nav {
font-size: 0;
background-color: #ffdead;
position: fixed; /*Navigation will stay on top even on scroll*/
width: 100%;
box-shadow: -1px -8px 9px 9px; /*Shadow under navigation, this gives illusion that this element float*/
/*The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.*/
z-index:2; /*This will force other elements to stay on lower stack (higher numbers will do)*/
}
nav ul a li {
/*tdisplay: inline-block;o position li horizontally
(if this cause problems, you may use "vertical-align: top;" so it will stay at the same vertical position )*/
display: inline-block;
/*vertical-align: top;*/
padding: 10px;
transition: all .5s; /*animate on hover*/
}
nav ul a li:hover {
color: maroon;
}
nav ul a {
font-family: Garamond;
font-size: 20px;
font-weight: bolder;
color: maroon;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
}
li.active {
border-bottom: 5px solid maroon;
color: black;
}
/*Banner*/
.banner-container {
background-image: url("../images/banner.jpg");
background-size: cover; /*This will cover the whole container even on window resize*/
background-repeat: no-repeat;
background-attachment: fixed; /*To create parallax effect*/
background-position: bottom;
height: 370px;
}
/*Welcome*/
.welcome-container {
font-size: 35px;
padding-top: 70px;
text-align: center;
}
.welcome-container h1 {
letter-spacing: 3px; /*to adjust letter spacing*/
border-bottom: 2px solid #ffdead;
color: maroon;
padding-bottom: 20px;
font-size: 30px;
/*Set texts to uppercase*/
text-transform: uppercase; /*Always rely to set text-transform on styles and not directly to HTML*/
}
.welcome-container p {
margin-top: 20px;
color: maroon;
padding: 15px;
font-size: 18px;
}
/*Articles*/
.articles {
font-size: 0;
padding-top: 200px;
}
.articles h1 {
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 2px solid #e59866;
color: maroon;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
}
.article-item-container {
width: 33.33%; /*To get 1/3 of the .main-container*/
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.article-box {
background: #ffdead;
border-radius: 5px;
width: 90%; /*Get 90% width from 33.33%*/
margin: auto;
transition: all .325s; /*Animate on hover*/
}
.article-box:hover {
background: #f0b27a;
color: maroon;
}
/* ".article-content a" (child element of ".article-box") will
change color whenever mouse hovers on ".article-box" (parent element of ".article-content a") */
.article-box:hover .article-content a {
color: maroon;
}
.article-title {
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding-top: 20px;
letter-spacing: 3px;
}
.article-content {
font-size: 13px;
text-align: center;
padding: 20px 5px;
}
.article-content a {
font-size: 12px;
margin-left: 5px;
color: gray;
text-decoration: none;
font-style: italic;
transition: all .325s;
}
div.row.column.text {
text-align: left;
background-color: maroon;
color: darkgray;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.row .column input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
div input[type=button] {
background-color: #7b241c;
border: none;
color: white;
padding: 1px 5px;
text-align: center;
text-decoration: none;
font-size: 1px;
width: 85px;
height: 30px;
position: relative;
}
h6 {
text-align: left;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
color: maroon;
}
h5 {
font-size: 14px;
font-family: Garamond;
color: black;
text-align: auto;
text-transform: uppercase;
}
h3 {
padding-top: 3px;
text-align: center;
font-size: 15px;
margin-left: 5px;
color: maroon;
text-decoration: none;
font-family: Georgia;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.row{
display: flex;
padding-top: 20px;
}
.column {
flex: 33.33%;
padding: 5px;
margin:auto;
}
/*Image Separator*/
.separator-container {
margin-top: 40px;
background-image: url("../images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Same effect on banner*/
background-position: center;
height: 400px;
}
/*Set dark overlay on separator*/
.overlay {
background-color: ;
opacity: .8; /*To adjust tranparency, this only accept values from .1 to 1*/
width: 100%; /*Get full width of container ".separator-container" */
height: 100%; /*Get full height of container ".separator-container" */
}
/*Contact*/
.contact-container {
font-size: 0px;
margin-top: 40px;
}
.contact-container h1 {
font-size: 30px;
text-transform: uppercase;
color: maroon;
letter-spacing: 3px;
}
.contact-container form {
margin-top: 20px;
}
.contact-field {
width: 33.33%; /*Get 1/3 of .main-container*/
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%; /*Get 90% from 1/3 set of its container ".contact-field" */
padding: 10px;
border: 3px solid #ffdead;
color: black;
/*Try to remove this style "outline: none;" and click on the input*/
/*You should see a color blue outline*/
outline: none; /*use this to remove blue outline*/
margin-bottom: 10px;
transition: all .325s;
}
/* ":focus" executes when user clicks on an input*/
.contact-field input:focus {
border: 3px solid #f0b27a;
color: maroon;
}
.contact-field-full {
width: 100%;
}
.contact-field-full input {
float: right; /*Set to right of container ".contact-field-full"*/
margin-right: 12px; /*Adjust to align to the Message input*/
width: 20%; /*Always get 20% of container ".contact-field-full" */
padding: 10px;
margin-bottom: 10px;
outline: none;
border: none;
transition: all .325s;
cursor: pointer; /*To get a hand cursor*/
background-color: #ffdead;
}
.contact-field-full input:hover {
background: #f0b27a;
color: maroon;
}
<!DOCTYPE html>
<html>
<head>
<title>Shawn Mendes </title>
<!-- Call external CSS file -->
<link rel="stylesheet" type="text/css" href="css/blog.css">
<link rel="stylesheet" type="text/css" href="css/style-media-queries.css">
<!-- Meta tag viewport helps browser window to render webpages for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<!-- Always put title on anchor tags and don't leave blank hrefs -->
<a href="index.html" title="Home">
<li>Home</li>
</a>
<a href="about.html" title="Music">
<li>Music</li>
</a>
<a href="blog.html" title="Tour">
<li class="active">Tour</li>
</a>
<a href="register.html" title="Video">
<li>Video</li>
</a>
</ul>
</nav>
<section class="banner-container">
</section>
<div class="main-container">
<section class="welcome-container">
<h1>ON TOUR</h1>
</section>
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 8" value="MAR 8">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 10" value="MAR 10">
</div>
<div class="column">
<div class="caption">
<h6>ANTWERPS SPORTPALEIS</h6>
<h5>ANTWERP, BELGIUM</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 11" value="MAR 11">
</div>
<div class="column">
<div class="caption">
<h6>MERCEDES-BENZ ARENA</h6>
<h5>BERLIN-FRIEDRICHSHAIN, GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 13" value="MAR 13">
</div>
<div class="column">
<div class="caption">
<h6>OSLO SPEKTRUM ARENA</h6>
<h5>OSLO, NORWAY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 15" value="MAR 15">
</div>
<div class="column">
<div class="caption">
<h6>ERICSSON GLOBE</h6>
<h5>STOCKHOLM, SWEDEN</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 16" value="MAR 16">
</div>
<div class="column">
<div class="caption">
<h6>ROYAL ARENA</h6>
<h5>COPENHAGEN, DENMARK</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 18" value="MAR 18">
</div>
<div class="column">
<div class="caption">
<h6>LANXESS ARENA</h6>
<h5>KOLN,GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<section class="separator-container">
<div class="overlay"></div>
</section>
<div class="main-container">
<section class="contact-container">
<h1>Get Updates</h1>
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
<div class="contact-field">
<input type="text" name="email-address" placeholder="Postal Code" required/>
</div>
<div class="contact-field">
<input type="text" name="message" placeholder="Country" required/>
</div>
<div class="contact-field-full">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<h3>By submitting this form, you agree to our privacy policy </h3>
<h3> Disclaimer: The owner of this website does not own any of its images and contents. Credits to the rigtful owner. </h3>
</section>
</div>
</body>
</html>
I know it is dumb question, but i am struggling with following problem
It is one of my menu buttons. I want div the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block).
My current problem is that icon div (red) and text div (green dashed) wont place inline.
My HTML is:
<style>
.HomeMenuNavbarButton {
text-decoration: none;
color : black;
border-style:outset;
border-width:4px;
border-radius:15px;
display:block;
padding:4px;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
#foreach (var node in Model.Nodes)
{
if (!(node.IsRootNode) && node.Children.Any())
{
<div class="col-md-4">
<button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="#("#relatedNavList" + node.Title) ">#node.Title</button>
<div id="#("relatedNavList" + node.Title)" class="collapse">
#foreach (var child in node.Children)
{
<div class="HomeMenuNavbarButton" style="display:block;">
<div style="background-color:red;display:inline">
<div class="circle">
</div>
</div>
<div style="border-color: green; border-style: dashed; display:inline-block">
<div style="background-color:blue">#(child.Title)</div>
<div style="background-color:purple">#(child.Description)</div>
</div>
</div>
}
</div>
</div>
}
}
</div>
</div>
When you want to display stuff side by side in CSS, the easiest way is to use flexbox. Try to add display : flex; to your HomeMenuNavBar class.
Here is a complete document about flexbox from the Mozilla team.
Using a wrapper defined as a flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}
.circle {
height: 25px;
width: 25px;
border: medium dashed darkgray;
border-radius: 50%;
}
button {
background: dodgerblue;
color: white;
border-radius: 3px;
border: thin solid lightblue;
padding: 0.5em;
}
<div class="wrapper">
<button>Button</button>
<div class="circle"></div>
<span>Text</span>
</div>
You can do that just with display:inline-block on your button's elements
.elementButton
{
display:inline-block;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
.HomeMenuNavbarButton
{
display:block;
margin:5px;
}
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div>Title one</div>
<div>Content</div>
</div>
</div>
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div >Title two</div>
<div>Content</div>
</div>
</div>
I'm having a strange issue, I simply want to vertically and horizontally center my parent div while maintaining a left align child div (text,divs, etc.).
This is what I want:
But when I tried to add a text-align:center to the parent container this is what I got instead:
This is my Fiddle without the text-align:center, I've been working on this for too many days, and no matter what I do I can't keep the text left aligned when they they center, and the child div (numbers) refuse to center. Can someone please show me how to correctly vertically and horizontally center my Parent container while maintaining the left alignment?
Here's my CSS:
.bigwrapper {display:table; height:100vh; width: 100%; }
.listwrapper {background:#fff; vertical-align:middle!important;display:table-cell; }
.point {
padding-bottom: 10px;
padding-top: 10px;
white-space: nowrap;
}
.message {
display: inline-block;
}
.title {
color: black;
white-space: normal;
margin-right: 60px; font-size:19px;
}
.info {
color: #999;
white-space: normal;
margin-right: 60px; margin-top:5px;
}
.number {
font: 36px Arial, sans-serif;
width: 46px;
height: 46px;vertical-align:bottom;
margin-right: 10px; margin-top:5px;
float: left;
text-align: center;
}
.number {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
background: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
}
.listwrapper p {
font-size: 13px !important; font-weight:bold; color:#333;
}
.listwrapper .form-control {min-width:100%!important; height:35px; font-size:13px; padding-top:0px; padding-bottom:0px; display:inline-block;}
.listwrapper .btn {min-width:100%!important; display:block; height:35px; font-size:12px; margin-top:10px;}
.listwrapper .btn {background:#333 !important; color:#fff !important; font-weight:bold;}
.listwrapper .btn:hover {background:#000 !important; color:#fff !important;}
HTML
<div class="bigwrapper">
<div class="listwrapper">
<div class="point">
<div class="number">1</div>
<div class="message">
<div class="title">Upload your media and get discovered</div>
<div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
</div>
</div>
<div class="point">
<div class="number">2</div>
<div class="message">
<div class="title">Represent your city everytime you post</div>
<div class="info">Raise local awareness with tags linked to content in your area</div>
</div>
</div>
<div class="point">
<div class="number">3</div>
<div class="message">
<div class="title">Make real connections with users nearby</div>
<div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
</div>
</div>
<div class="point">
<div class="number">4</div>
<div class="message">
<div class="title">Get started by typing your email address</div>
<div class="guestlist">
<form class="guestlist-form form-inline" action="signup" method="post">
<input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
<input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!">
</form>
<div id="error-message"></div><span class="spam">Don't worry we won't spam</span>
</div>
</div>
</div>
</div>
</div>
You can add display: flex; align-items: center; justify-content: center; to .bigwrapper to center the element that holds all of that content .listwrapper.
align-items: center will vertically center .listwrapper inside of .bigwrapper and justify-content: center; will horizontally align it.
.point {
padding-bottom: 10px;
padding-top: 10px;
white-space: nowrap;
}
.message {
display: inline-block;
}
.title {
color: black;
white-space: normal;
margin-right: 60px;
font-size: 19px;
}
.info {
color: #999;
white-space: normal;
margin-right: 60px;
margin-top: 5px;
}
.number {
font: 36px Arial, sans-serif;
width: 46px;
height: 46px;
vertical-align: bottom;
margin-right: 10px;
margin-top: 5px;
float: left;
text-align: center;
}
.number {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
background: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
}
.listwrapper p {
font-size: 13px !important;
font-weight: bold;
color: #333;
}
.listwrapper .form-control {
min-width: 100%!important;
height: 35px;
font-size: 13px;
padding-top: 0px;
padding-bottom: 0px;
display: inline-block;
}
.listwrapper .btn {
min-width: 100%!important;
display: block;
height: 35px;
font-size: 12px;
margin-top: 10px;
}
.listwrapper .btn {
background: #333 !important;
color: #fff !important;
font-weight: bold;
}
.listwrapper .btn:hover {
background: #000 !important;
color: #fff !important;
}
.bigwrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
width: 100%;
}
.listwrapper {
background: #fff;
vertical-align: middle!important;
display: table-cell;
}
<body>
<div class="bigwrapper">
<div class="listwrapper">
<div class="point">
<div class="number">1</div>
<div class="message">
<div class="title">Upload your media and get discovered</div>
<div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
</div>
</div>
<div class="point">
<div class="number">2</div>
<div class="message">
<div class="title">Represent your city everytime you post</div>
<div class="info">Raise local awareness with tags linked to content in your area</div>
</div>
</div>
<div class="point">
<div class="number">3</div>
<div class="message">
<div class="title">Make real connections with users nearby</div>
<div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
</div>
</div>
<div class="point">
<div class="number">4</div>
<div class="message">
<div class="title">Get started by typing your email address</div>
<div class="guestlist">
<form class="guestlist-form form-inline" action="signup" method="post">
<input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
<input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!">
</form>
<div id="error-message"></div><span class="spam">Don't worry we won't spam</span>
</div>
</div>
</div>
</div>
</div>
</body>
You can set child div-s to be display:inline-block; and then for it parent width:100%;text-align:center;
But to center them vertically You need to use jQuery or redesign Your layout and set left element and right element to be display:inline-block in one container with text-align:center; and then use vertical-align property for left and right element.
Try modifying the css for the "big-wrapper" class to:
.bigwrapper {
position: relative;
top: 50%;
left: 50%;
display: table;
}