Could you please advise how can I style my divs, so they are displayed next to each other in two rows? I have few items in html and three of them are .card1 and the other .card2, .service is for the whole container. I wish the divs are placed next to each other in two lines. Could you please help me in styling them? :)
.service {
background: #08122f;
width: 100%;
padding: 100px 0px;
}
.card1 {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #251f4a;
border-radius: 15px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card2 {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #251f4a;
display: flex-start;
border-radius: 15px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
You can use
display: inline flow-root list-item;
Example:
.service {
background: #08122f;
width: 100%;
padding: 100px 0px;
}
.card1 {
height: 365px;
width: 30%;
padding: 20px 35px;
background: #251f4a;
border-radius: 15px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
display: inline flow-root list-item;
}
.card2 {
height: 365px;
width: 30%;
padding: 20px 35px;
background: #251f4a;
display: flex-start;
border-radius: 15px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
display: inline flow-root list-item;
}
<div class="service">
<div class="card1"></div>
<div class="card1"></div>
<div class="card1"></div>
<div class="card2"></div>
</div>
Related
So, it's my first time getting into HTML/CSS and naturally, I'm having problems with certain parts.
I made a "Contine" button in my setup.html and gave it a class so I can style it in my styles.css, now the problem is that text-align center doesnt work on the button. I also have a "Start" button in my index.html, but strangely text-align center works there. I tried giving both buttons the same class and different classes. I'm not sure what to do at this point in time.\
My Button in HTML:
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
My CSS:
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
max-width: 280px;
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
Like I said the #contine part in my styles.css is the exact same for the "start" button, but it only works for the start button.
Problem is with max-width: 280px; and padding: 10px 100px; of button.
you are giving padding of 200px on the horizontal scale and then you are limiting button width to 280px. which leaves only 80px for text within. Remove button width for a better look of a button. Alternatively, you can trade off any of the CSS property over others.
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
/* max-width: 280px; */
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
In This Code,I want to set the margin-top of .Login class ,smaller,although I set The margin-top ,to zero,but it is not set near to the top of page.What Can I do?why by setting the margin-top of this division ,this div does not set ,near the top of page?is other thing ok?the other elements works properly.
body {
margin: 0px;
direction: rtl;
}
#font-face {
src: url('../fonts/IRANSansWeb.eot'), url('../fonts/IRANSansWeb.woff'), url('../fonts/IRANSansWeb.woff2'), url('../fonts/IRANSansWeb.ttf');
font-family: "IranSans";
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 60px;
margin: 0px auto;
border: 2px solid black;
display: inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-bottom: 0px;
display: inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}
.LogIn {
width: 140px;
height: 50px;
display: inline-block;
margin-right: 130px;
margin-top: 0px;
font-family: "IranSans";
border-radius: 5px;
background-color: #00d363;
}
.LogInA {
width: 100%;
height: 100%;
border: 5px;
color: #fff;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 50px;
}
.LogInA:hover {
border-radius: 5px;
background-color: #007bff;
color: #00d363;
border: 1px solid #00d363;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul>
</ul>
<div class="LogIn">
<a class="LogInA" href="#">ارسال شغل</a>
</div>
</nav>
</header>
</body>
Try adding display: flex; to your nav
You should use:
display:flex; justify-content: center; to your Nav and also you should remove height and use: flex-direction:column; in mobile version.
Currently I am trying to center my arrows that are created using CSS when I hover over my nav menu. Even though I have set the margin left and right to auto. It still does not seem to want to center. It could be because of the format of my HTML. I have tried a number of options but none of them seem to have helped.
Please see my HTML and CSS below:
(Unfortunately I cannot seem to re-create my code but I will post it and continue to try and recreate it in the mean time)
#navbar {
overflow: hidden;
background-color: $base-white;
font-size: 11px;
z-index: 2;
border: 1px solid $base-grey;
height: 50px;
}
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
#navbar .navbar-links a {
display: block;
float: left;
color: $base-grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
#navbar .navbar-links a:hover:after {
content: ' ';
position: absolute;
bottom: -10px;
width: 0;
height: 0;
text-align: center;
border-width: 10px 10px 0;
border-style: solid;
border-color: $base-grey transparent;
margin: 0 auto;
display: block;
}
<div class="navbar-links">
<div class="navbar-dropdown">
<button class="navbar-drop-btn">
<div class="navbar-arrow"></div>
</button>
<div class="navbar-dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['insights']" (mouseover)="displayInsightDropDown();" (mouseleave)="hideInsightDropDown();">INSIGHTS</a>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['explore']">EXPLORE</a>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['aboutus']">ABOUT</a>
</div>
Here is a picture of the result:
As you can see the arrow is positioned to the left, but never the center.
Any suggestions would help, thank you in advance.
You need to set the context for the absolutely positioned ::after. To do so, add a non static position (position: relative in this case) to the <a> tags.
To center the ::after element, I've used left: calc(50% - 10px) because the width of the arrow is known (20px). If to arrow can have variable size, you can use:
left: 50%;
transform: translateX(-50%);
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a {
position: relative; /** the absolute context **/
display: block;
float: left;
color: grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a:hover::after {
left: calc(50% - 10px);
position: absolute;
content: ' ';
bottom: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: grey transparent;
display: block;
content: ' ';
}
body {
overflow: hidden;
}
<div class="navbar-links">
INSIGHTS
EXPLORE
ABOUT
</div>
Although answer is accepted but I've another solution using flex property of CSS, add two line inside .navbar-links a
display: flex;
justify-content: center;
no need for calculation
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a {
position: relative;
/** the absolute context **/
display: flex;
justify-content: center;
float: left;
color: grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a:hover::after {
position: absolute;
bottom: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: grey transparent;
content: ' ';
}
body {
overflow: hidden;
}
<div class="navbar-links">
INSIGHTS
EXPLORE
ABOUT
</div>
So this is my code:
.hej {
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
}
.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;
}
.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
background: white;
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;
}
.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: 0 0 0 -15vw;
width: 15vw;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
<div class="circlem">
<p>
How Rules
</p>
</div>
</div>
And i don't know why, but bigger font-size cause text move to the right side :_:
What i should change in my code? Im using bootstrap to make navbar.
I didn't edit body section.
On the image you can see, how it moved to the right side
Here is link to the codepen.io: http://codepen.io/anon/pen/gPByPx
I have cleaned and merged your css code a bit:
.hej
{
width:100%;
height:1000px;
background-color:yellow;
text-align:center;
}
.circlem{
display: inline-block;
border-radius: 50%;
margin: 15px auto;
background: white;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;
min-width: 15%;
white-space: nowrap;
}
.circlem p {
position:relative;
font-size: 3.5vw;
margin: 0;
padding: 0;
line-height: 30vw;
white-space: normal;
width: 30vw;
height: 30vw;
}
<div class="hej">
<div class="circlem">
<p>
How Rules
</p>
</div>
</div>
simply add transform: translateX(-50%) to your paragraph.
.hej {
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
}
.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;
}
.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
background: white;
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;
}
.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: 0 0 0 -15vw;
width: 15vw;
transform: translateX(-50%);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
<div class="circlem">
<p>
How Rules
</p>
</div>
</div>
I don't know if you have an actual reason to build it the way you built it, but there is a waaaaaaaaay much simpler way to do this. In my opinion, you are overthinking it. How about this?
.hej {
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
padding:20px;
}
.circlem p {
border-radius: 50%;
width:220px;
height:220px;
background:#fff;
margin:40px auto;
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
padding:50px;
}
See the DEMO
.hej {
width:100%;
/*height:1000px;*/
background-color:yellow;
text-align:center;}
.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;}
.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
/*background: white;*/
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;}
.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: -105vh auto 0;
/* width: 15vw; */
position: relative;}
Try this
yesterday I posted a question asking how can I center a div inside a div... Now I have another problem, I want to center a div on the screen. I want it to be in the middle and to take up 50% of the screen;
Here is a pic of the problem:
As you can see there isn't anything in the middle of the screen, that is my problem. Here is my HTML code:
* {
font-size: 100%;
font-family: Serif;
}
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
}
.items {
background-color: rgba(0,0,0,.5);
width: 100%;
text-align: center;
margin: 0;
}
#basicInfo{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: rgba(255,150,0,1);
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: rgba(255,150,0,1);
}
.navbar {
background-color: rgba(0,0,0,0.1);
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
min-height: 5%;
}
.button{
background-color: rgba(0,0,0,.5);
font-size: 2em;
color: white;
width: 33%;
margin: 0 .16%;
height: 100%;
float: left;
}
.button:hover{
background-color: rgba(0,0,0,.7);
}
.button a{
text-decoration: none;
display: block;
color: white;
text-align: center;
vertical-align: middle;
}
#textSpace {
background-color: rgba(0,0,0, .5);
width: 100%;
height: 50%;
display: block;
top: auto;
bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<div class="navbar">
<div class="button">
<b>Mateo</b>
</div>
<div class="button">
<b>Home</b>
</div>
<div class="button">
<b>Josh</b>
</div>
</div>
Any help is apriciated! Thanks in advance!
To horizontally centre a div in the middle of the screen use:
margin-left:auto;
margin-right:auto;