I'm trying to create buttons and I have a parent div holding all of the other divs together. The thing with the parent div though, it's creating its own width and it just won't create an auto width around the other divs.
I just want to center all the buttons/divs perfectly and the width from the parent div is preventing me.
Any help would be amazing, thank you!!
<style>
h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks div, .middlelinks div, .bottomlinks div {
float: left;
width: 250px !important;
}
.helpparent .toplinks div, .middlelinks div, .bottomlinks div{
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.helpparent {
width: 66.1%;
margin: 0 auto;
}
</style>
<html>
<h1 class="helph1">Forum Help Center</h1>
<div class="helpparent">
<div class="toplinks">
<div class="announcementhelp">Announcements</div>
<div class="gettingstartedhelp">Getting Started</div>
<div class="gasrhelp">GASR 101</div>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
<div class="forumshophelp">Forums and Shops</div>
<div class="rulesdmcahelp">Community & DMCA Guidelines</div>
<div class="sandrhelp">Support & Report System</div>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
<div class="eventhelp">Forum Events</div>
<div class="storehelp">GASR Store</div>
<div class="profilehelp">Your Profile & Settings</div>
</div>
<div class="seperator" style="clear:both;"></div>
</div>
</html>
You can get rid of the width on the .help-parent class and add display: flex; flex-direction: column; align-items: center; to center the divs. However, you must remove the float on the .toplinks div, .middlelinks div, .bottomlinks div for this to work. Also as a result of removing the float, the text-decoration on the links seems to come back, so I added text-decoration: none; to your <a> tags.
<style>h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks div,
.middlelinks div,
.bottomlinks div {
width: 250px !important;
}
a {
text-decoration: none;
}
.helpparent .toplinks div,
.middlelinks div,
.bottomlinks div {
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.helpparent {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<html>
<h1 class="helph1">GASR Help Center</h1>
<div class="helpparent">
<div class="toplinks">
<a href="https://www.youtube.com/">
<div class="announcementhelp">Announcements</div>
</a>
<a href="https://www.youtube.com/">
<div class="gettingstartedhelp">Getting Started</div>
</a>
<a href="https://www.youtube.com/">
<div class="gasrhelp">GASR 101</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
<a href="https://www.youtube.com/">
<div class="forumshophelp">Forums and Shops</div>
</a>
<a href="https://www.youtube.com/">
<div class="rulesdmcahelp">Community & DMCA Guidelines</div>
</a>
<a href="https://www.youtube.com/">
<div class="sandrhelp">Support & Report System</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
<a href="https://www.youtube.com/">
<div class="eventhelp">Forum Events</div>
</a>
<a href="https://www.youtube.com/">
<div class="storehelp">GASR Store</div>
</a>
<a href="https://www.youtube.com/">
<div class="profilehelp">Your Profile & Settings</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
</div>
</html>
Try getting rid of your div element inside your a. This div is unnecessary and is leaving your a without a clickable area.
After that you can choose to use flex to align your content
h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks a, .middlelinks a, .bottomlinks a {
width: 250px !important;
}
.helpparent .toplinks a, .middlelinks a, .bottomlinks a{
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.toplinks, .middlelinks, .bottomlinks {
display: flex;
flex-direction: column;
align-items: center;
}
<h1 class="helph1">Forum Help Center</h1>
<div class="helpparent">
<div class="toplinks">
Announcements
Getting Started
101
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
Forums and Shops
Community & DMCA Guidelines
Support & Report System
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
Forum Events
GASR Store
Your Profile & Settings
</div>
<div class="seperator" style="clear:both;"></div>
</div>
Related
I have a set of columns each containing a square box that fills to the column width and maintains a square height ratio.
The entire box needs to be clickable, with the content inside that also centered within the box. I can't figure out a way of getting the inner <a> element to fill out the space inside the parent div and have its own content centered.
Here is an editable Fiddle
The entire square should be red, entirely clickable, and with a centered download button within.
I've reviewed a bunch of similar questions about making square boxes with CSS but didn't find anything about the inner elements filling out the box like this.
Thanks
.block {
width: 100%;
height: 0;
padding-bottom: 100%;
border: 2px solid #600;
}
.block a {
display: flex;
justify-content: center;
align-items: center;
background: #C00;
text-decoration: none;
}
.block span {
padding: 1em;
border: 2px solid #FFF;
text-align: center;
color: #FFF;
}
/* Demo only */
.row {
display: flex;
justify-content: space-between;
}
.column {
width: 20%;
}
<div class="row">
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
</div>
Setting the parent .block to position: relative allows us to set .block > a to position: absolute, with dimensions that fill its parent; I only added 3 css rules, they're commented so you know which ones:
.block {
position: relative; /* change #1 */
width: 100%;
height: 0;
padding-bottom: 100%;
border: 2px solid #600;
}
.block a {
position: absolute; /* change #2 */
left: 0; right: 0; top: 0; bottom: 0; /* change #3 */
display: flex;
justify-content: center;
align-items: center;
background: #C00;
text-decoration: none;
}
.block span {
padding: 1em;
border: 2px solid #FFF;
text-align: center;
color: #FFF;
}
/* Demo only */
.row {
display: flex;
justify-content: space-between;
}
.column {
width: 20%;
}
<div class="row">
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
</div>
I have following page structure:
div_Menu | div_Stat1 div_Stat2 div_Stat3 div_Stat4
When page width is not enougth - 4 divs going under Menu div. If the width changed I want last div_Stat4 will go under div_Stat1.
Relevant part of the code:
<div class="menu">...</div>
<div class="action">
<div class="title">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
</div>
css:
.menu {
float: left;
width: 200px;
height: 100%;
background-color: #006666;
color: #ffffff;
font-family: "Helvetica Neue",Georgia,Times,"Times New Roman",serif;
font-size: 2.0rem;
}
.action {
float: left;
padding-left: 60px;
}
.stat {
float: left;
background: #d8eacc;
padding: 10px;
border-color: azure;
border-style: solid;
text-align: center;
font-family: "Helvetica Neue",Georgia,Times,"Times New Roman",serif;
font-size: 1.6rem;
width: 200px;
margin-right: 10px;
}
What should I change?
Correct display:
When browser width smaller:
Try wrapping your menu and content in a flexbox:
<div class="container">
<div class="menu">...</div>
<div class="action">
<div class="title">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
</div>
</div>
.container {
display: flex;
}
That way, the .action will never go down.
Theres a problem I have throughout my site and I'm unsure how to solve it. When I try to add padding or margins to certain elements they just don't work.
Here is a jsfiddle of part of the site that isn't responding to the css.
https://jsfiddle.net/a90sns1c/
I am trying to add padding to the top of .banner-sub but the padding just overlaps the above elements not pushing it down.
css:
#banner-wrap{
text-align: center;
}
.banner-title{
padding-top: 75px;
padding-bottom: 40px;
color:#fff;
font-size: 42px!important;
}
.banner-icons{
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
background-image:url('../images/banner.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.banner-sub{
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
}
#anchor-icon{padding-bottom: 30px;}
html:
<div id="banner-wrap">
<div id="banner" class="container">
<!-- <div class="banner-bg-img">
<img src="images/banner.png" />
</div>-->
<div id="banner-content">
<h1 class="banner-title">Quality assurance through planning<br /><span class="banner-sub">Nationwide leaflet distribution and sample delivery</span></h1>
<div class="section group banner-icons">
<div class="col span_1_of_4">
<img src="images/icon1.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon2.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon3.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon4.png" />
</div>
</div>
<div id="banner-button"> WHY CHOOSE US</div>
<div id="anchor-icon"><img src="images/down-icon.png" /></div>
</div>
</div>
</div>
Add display:inline-block to .banner-sub class.
.banner-sub {
display: inline-block;
font-family: "Hind",sans-serif !important;
font-size: 24px !important;
font-weight: 400;
padding-top: 200px;
}
jsfiddle
Set display:block; or dispaly:inline-block. <span>is a inline element.
CSS
.banner-sub{
display:block;
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top:200px;
}
DEMO HERE
You are applying class .banner-sub on span which is an inline element , as your class .banner-sub does not have any display property set in it , by default display:inline will be set on span as its an inline element.width padding margin wont apply on inline elements (if you are wondering why please see this What is inline , block and Inline-block in css.)
Now for your problem what you can do. i would suggest couple of changes instead of quick-fix (using inline-block) on span.
As i see in you above code you have used h1 tag (default font-size:24px;) but you override it with font-size 42px in your css. so you dont really need h1 here ,instead of using h1 tag use a div and put another div inside instead of span that should be the proper way considering your scenario. posting your code with all the suggested changes.
#banner-wrap {
text-align: center;
}
.banner-title {
padding-top: 75px;
padding-bottom: 40px;
color: #ccc;
font-size: 42px!important;
}
.banner-icons {
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button {
padding-bottom: 50px;
}
#banner-content {
background-image: url('../images/banner.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner-sub {
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top: 200px;
}
#anchor-icon {
padding-bottom: 30px;
}
<div id="banner-wrap">
<div id="banner" class="container">
<!-- <div class="banner-bg-img">
<img src="images/banner.png" />
</div>-->
<div id="banner-content">
<div class="banner-title">Quality assurance through planning
<div class="banner-sub">Nationwide leaflet distribution and sample delivery</div>
</div>
<div class="section group banner-icons">
<div class="col span_1_of_4">
<img src="images/icon1.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon2.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon3.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon4.png" />
</div>
</div>
<div id="banner-button"> WHY CHOOSE US
</div>
<div id="anchor-icon">
<a href="#">
<img src="images/down-icon.png" />
</a>
</div>
</div>
</div>
</div>
Span element has display:inline by default so padding does not effect it. You have to give display:inline-block or display: block the element(.banner-sub).
#banner-wrap{
text-align: center;
}
.banner-title{
position:absolute;
padding-top: 75px;
padding-bottom: 40px;
color:#ccc;
font-size: 42px!important;
}
.banner-icons{
position:absolute;
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
background-image:url('../images/banner.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.banner-sub{
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top:200px;
}
#anchor-icon{padding-bottom: 30px;}
My title box is too wide. It should only be as wide as the title-text inside it called "WEBSITE TITLE".
Is it possible to get my padding-right to be the same as my current padding-left which would be around 5px?
FIDDLE HERE... FIDDLE
HTML:
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1</p>
<p>text2</p>
</div>
</div>
</div>
</div>
</footer>
CSS:
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
}
.text-center-footer-text h4 span {
color: red;
}
Set display: inline-block or display: table to h4
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
display: inline-block;
}
.text-center-footer-text h4 span {
color: red;
}
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1
</p>
<p>text2
</p>
</div>
</div>
</div>
</div>
</footer>
try with
display:inline-block.
http://jsfiddle.net/sunp5usj/2/
hope this helps.
Regards!
I'm recreating a small widget from a psd and trying to put a thin border-right between the 3 container divs I'm using to separate the page into thirds. The divs have height, and I've tried adding in forced height to ensure that isn't the problem, but for some reason it just won't show up. The CSS has CSS Reset at the start, which you can grab from here.
Thanks for any help!
HTML
<div class="container">
<div class="img"><img src="1.png" alt=""></div>
<div class="txt">
<div><p class="title taa">10</p><p class="title2 tab">,000 hrs</p></div>
<div class="sub a"><p id="ac">Behavioural testing</p></div>
</div>
</div>
<div class="container">
<div class="img"><img src="2.png" alt=""></div>
<div class="txt">
<div><p class="title tba">8</p><p class="title2 tbb">years</p></div>
<div class="sub b"><p id="bc">Creafting successful user <br> experience since 2005</p></div>
</div>
</div>
<div class="container">
<div class="txt">
<div><p class="title tca">87</p><p class="title2 tcb">years</p></div>
<div class="sub c"><p id="cc">Collective experience</p></div>
</div>
<div class="img"><img src="3.png" alt=""></div>
</div>
CSS
.container {
display: inline-block;
width: 600px;
height: 300px;
border-right: 10px red;
}
.img {
display: inline-block;
}
.txt {
display: inline-block;
}
.title {
font-family: Helvetica;
font-weight: bold;
font-size: 91px;
display: inline-block;
}
.title2 {
font-family: Helvetica;
font-weight: bold;
font-size: 57px;
display: inline-block;
}
.sub {
font-family: Helvetica;
font-size: 22px;
}
.a {
position: relative;
left: 8px;
}
Change it to border-right: 10px solid red;
Border requires size and type of border; color is optional.