Trying to have my buttons centered above the text below. I think it has to do with my float lefts, but i believe i need to still float it left because the content afterwards is also floating.
Margin: 0 auto; isnt working.
Please Advise:
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
vertical-align: middle;
text-align: center;
font-size: 2rem;
display: block;
width: 150px; /* 150 / 980 */
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav a.button {
float: left;
margin: 0 auto;
}
nav a.button:not(:first-child) {
margin-left: 150px;
}
http://jsfiddle.net/117sparten/kNZEs/3/
Here you go.
<header>
<nav>
<div class="btngroup">
contact
blog
</div>
</nav>
</header>
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
text-align: center;
font-size: 2rem;
display: inline-block;
width: 150px; /* 150 / 980 */
}
.button:not(:first-of-type) {
margin-left: 10px;
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav div.btngroup {
width: 410px;
margin: auto;
height:
}
nav a.button {
float: left;
margin: 0 auto;
}
Try change nav a.button like this:
nav a.button {
display: inline-block;
margin: 0 auto;
}
or
nav a.button {
display: inline;
margin: 0 auto;
}
use this inline-block property in button class
.button
{
display:inline-block;
}
and remove float property from nav a.button
Related
My problem is with the CSS: I want to center the #product-section, while the .product-img should all be aligned as they are currently. To clarify: I want all products to be centered, but lined up as they currently are.
The parent div (which I want to be centered):
#product-section {
margin: 0;
padding: 0;
padding-left: 15px;
display: inline-block;
margin: 0 auto;
display: inline-block;
background-color: red;
}
The products (which should be lined up as in the picture):
.product-img {
width: 220px;
height: 220px;
border: 2px solid #F3F3F3;
display: inline-block;
margin: 30px 15px 0 0;
vertical-align: top;
}
.product-img img {
display: block;
margin: 0 auto 0 auto;
height: 150px;
width: 80%;
}
.product-img h3 {
height: 50px;
width: 100%;
line-height: 50px;
font-size: 36px;
margin: 20px 0 0 0;
background-color: #F3F3F3;
text-align: center;
font-family: 'Roboto';
color: #6C6C6C;
}
The Header Text
.category {
font-size: 64px;
font-family: 'Open Sans';
width: 100%;
text-align: center;
margin: 50px auto 0 auto;
display: inline-block;
}
HTML
<div id="product-section">
<h2 class="category">Mejeri</h2>
<div id="Mjölk" class="product-img product added"><h4><span>6</span> st</h4><img src="assets/icons/milk.png"><h3>Mjölk</h3></div>
</div>
I would like to put my text on the right side of the darker box. I want the AAAAAAAAAAAAAA' above the dark box to be on the right side. I tried it by writing it in an another container but it pushes the dark box down. Thank you!
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}
<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>
You can use flex on the parent to put them in a row, then use order: -1 on the darker box to put it visually on the left of the text.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px;
display: flex;
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
order: -1;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}
<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>
You should put float:right in your p element
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px;
/*add this*/
float:right;
}
I'm making a fake news article for a site and I floated the news sections, but I noticed that the bottom borders on the left and the right aren't aligned. I tried to fix this by placing the <h1> and the <p> elements in sections and making the section { height: 45%; } but it didn't work.
Why isn't it working and how can I align the borders? I have the HTML here.
html{
margin: auto;
font-size: 1em;
padding: 0;
max-width: 100%;
text-align: center;
}
figure{
margin: auto;
max-width: 50%;
}
img{
display: block;
}
img, body, ul{
max-width: 100%;
margin: auto;
padding: 0;
}
.caption-clr{
background-color: rgba(0,0,0,.1);
}
*{box-sizing: border-box;}
.main-wrapper{
padding: 2.5% 10%;
max-width: 100%;
margin: 0 10%;
}
body,.main-wrapper{
background-color: lightgreen;
}
header {
color: white;
text-shadow: 1px 0px 5px rgb(0,0,1);
max-width: 100%;
margin: auto;
background-image: url(../img/cannabis.jpg);
padding: 10%;
background-size: cover;
background-position: top;
}
p{
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 0 0 5px 0;
}
.opening-list li{
font-weight: bold;
list-style: none;
}
.opening-list{
margin: 0 0 5px 0;
}
.opening-list li,.opening-list h3{
color: white;
}
/responsive/
#media screen and (min-width: 550px){
section {
height: 45%;
}
body{
background-color: lightgrey;
}
.first-right-section{
float: right;
margin: 2.5%;
width: 45%;
}
.first-left-section{
width: 45%;
margin: 2.5%;
float: left;
}
.clear{
clear: both;
}
}
I am unable to get my aside element to align properly with the rest of my page. It sits above the main element and spills into the header. How do I fix that?
Here's what it looks like on the page:
Here's the CSS Style code I'm using:
* {
margin:0;
padding:0;
}
body {
font-size:1.1em;
font-family: Arial, Helvetica, sans-serif;
background-color:darkseagreen;
}
header {
padding: 1%;
margin-bottom: 3%;
text-align: center;
font-size:2em;
font-family: Arial, Helvetica, sans-serif;
text: white;
background-color: #4EEE94;
}
aside {
width: 25%;
padding: 0.5%;
margin: 0 5px 5px 0;
background-color: #1C86EE;
float: right;
border-radius: 20px;
position: relative;
min-height: 100%;
display: block;
}
#main {
width: 446px;
margin-right: 27%;
padding: 0.5%;
background-color: #EE6363;
text: white;
position: relative;
border-radius: 4%;
}
.map {
padding: 2em;
margin: 3em auto 3em auto;
position: relative;
display: block;
text-align: center;
width: 95%;
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
div {
box-shadow: 10px 10px 5px #888888;
border: 2px solid;
border-radius: 25px;
}
nav ul li {
margin-right: 1em;
display: inline;
list-style-type: none;
}
nav li a {
padding: 1em;
color: white;
text-decoration: none;
}
nav li a:hover {
color: yellow;
text-decoration: underline;
}
footer {
margin: 0.5% 27% 0 0;
border-top: solid thick teal;
padding: 0.5%;
background-color: lime;
}
first issue with your css remove the braces after .image class.
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
second thing use px or % or em do not use all (recommended) .
Third use id something like this
<div id="xyz"></div>
Not <div id="#xyz"></div> # is the css selector
also do not use multiple id like <div id="abc xyz"></div> u cannot use multiple id's use class instead of <div class="abc xyz"></div>
I have removed a menu item from a navigation bar but now the bar does not expand to fill the screen width so it is shorter than the actual page content now. How do I make it do this? I tried putting in width:100% but that didn't make any difference.
This is the code I have:
<ul id="PrimaryNav" class="clearfix">
<li>Home</li>
<li>About/FAQ</li>
<li>Price Guide</li>
<li>Packages</li>
<!-- <li>Laser Lipo</li> -->
<li>Skincare</li>
<li>PCOS</li>
<li>Testimonials</li>
</ul>
ul#PrimaryNav {
margin: 0 auto;
padding: 0;
clear: left;
display: block;
}
ul#PrimaryNav li {
display: inline-block;
margin: 0;
padding: 0;
width: 12.5%;
float: left;
background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 35px;
font-size: 14px;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #dcdcdc;
}
Instead of using display: block to ul element, I used display: table; width: 100%; and for li element, I used display: table-cell instead of display: inline-block;.
CSS
ul#PrimaryNav {
margin: 0 auto;
padding: 0;
clear: left;
display: table;
width: 100%;
}
ul#PrimaryNav li {
display: table-cell;
margin: 0;
padding: 0;
background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 35px;
font-size: 14px;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #dcdcdc;
}
Working Fiddle
You can simply use display:table-cell for this:
http://jsfiddle.net/6fjr8uc6/
ul#PrimaryNav {
margin: 0 auto;
padding: 0;
clear: left;
width:100%;
display: table;
}
ul#PrimaryNav li {
display: table-cell;
margin: 0;
padding: 0;
background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 35px;
font-size: 14px;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #dcdcdc;
}