How can I place my button in the center without any kind of "margin cheat" (for example setting margin-left: 525px;)?
HTML
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
CSS
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
margin-left: 525px;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
I've tried making it sit in the center but it didn't work out so well without me setting margin-left; 525px;, which in my case, centers the button under the text, please help me remove this "margin cheat" and do it in the right way.
The a act like text it means when you give text-align:center; to its parent, it will be placed in center of its parent.
You don't need to give margin to the a element. You can use text-align:center;.
#bannerContainer
{
text-align:center;
}
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
If you set the position of the button to absolute, give it a set width, and add this it should center:
left: 50%; right: 50%;
Have you try this:
<center>Products</center>
I am not sure whether it is helpful to you..
Related
I wanted to make a header with a title in the center "Resources", left another title "HTML" and right another with "CSS" but I can not align them to put them in the right place and then add a border-right and border-left to separate the left and right title from the title to the center.
For the moment I have this:
header {
border: 2px solid white;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.2);
color: white;
}
h1 {
display: inline-block;
font-size: 30px;
font-family: Arial, sans-serif;
}
h1.html {
padding-left: 2%;
}
h1.res {}
h1.css {
padding-right: 2%;
}
<header>
<h1 class="html">HTML</h1>
<h1 class="res">Ressources</h1>
<h1 class="css">CSS</h1>
</header>
Because of the display: inline-block; it works better but I do not know how to do it.
It would be simpler to replace the <h1> tags with <span> elements because they are inline by default. The left and right separation can be accomplished several ways. See example below.
.header {
text-align: center;
border-radius: 20px;
background-color: rgba(0,0,0,0.2);
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
font-size: 24px;
}
.header span:nth-child(1) {
float: left;
width: 33%;
border-right: 2px solid white;
}
.header span:nth-child(3) {
float: right;
width: 33%;
border-left: 2px solid white;
}
<div class='header'>
<span>HTML</span>
<span>RESOURCES</span>
<span>CSS</span>
</div>
You can use a flex layout to position the headings. Add this to your existing header ruleset:
header {
display: flex;
justify-content: space-between;
}
I am working on a simple html/css web page.
What I am trying to do is having an image and a div. Both will be inline display and in div I want to put a link. But when I put a long link title it is not what I expect it to be.
My code is this-
code
<div class="heading"> featured posts
</div>
<div class="img_src">
<img style="height:120px;" src="/uploads/1.jpg"></img>
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
CSS-
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
line-height: 120px;
width: 61%;
margin-top: 3px;
text-transform: uppercase;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
I searched on google and StackOverflow but I did not get anything useful.
I want it to look like this(DIV wraps full)-
Any suggestion?
You csn use diplay:table-cell instead of inline-block but also I made edit in html by adding div.post that contain the image and title, and remove the inline-style that gave height to the image
<div class="post">
<div class="img_src">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
and in the css I give width:20%; to .img_src and width:80%; to .link_src (you can change the widths as you like) and remove height and line height from them and the diplay:table-cell will handle those height
.post{
font-size:0;
display:table;
width:100%;
}
.img_src{
display: table-cell;
vertical-align:top;
width:20%;
}
.img_src img{
width:100%;
}
.link_src{
display: table-cell;
background-color: white;
margin-top: 3px;
text-transform: uppercase;
vertical-align:middle;
width:80%;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
https://jsfiddle.net/IA7medd/gg7ygdLs/17/
You can achieve that by changing the inline-block display to table-cell and then apply the vertical-align:middle; property on the text container.
That way, the text will be perfectly vertically centered if there are one, two, three lines of content.
.parent{
display: table;
border: 5px solid #ccc;
width: 100%;
}
.img_src{
display: table-cell;
}
.link_src{
display: table-cell;
vertical-align: middle;
background-color: white;
width: 61%;
text-transform: uppercase;
}
See this fiddle
Ok you are using the wrong approach. Line height is causing you the problem. Your html should look like this
<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
<div class="link_src">
<div class="inner_link_src">
<div class="inner_margin">
Link will go here but if there is a long title then it may create some problems..
</div>
</div>
</div>
and your css like this
.img_src{
float:left
}
.link_src{
float:left;
position:relative;
width: 61%;
text-transform: uppercase;
background-color: white;
vertical-align: top;
display:table;
height:120px;
}
.inner_link_src{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
margin-left:10px;
}
.inner_margin{
margin-left:10px;
}
see the jsfiddle it is working great
https://jsfiddle.net/gg7ygdLs/27/
You just change your CSS and HTML by following and then you get the desired result.
CSS:
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
width: 100%;
margin: 10px 0 10px 3px;
-webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
-moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
margin: 2%;
display: inline-block;
position:absolute;
padding: 8px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
HTML:
<div class="heading"> featured posts
</div>
<div class="link_src">
<img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
Demo
You can simplify your code a lot by using Flexbox.
You can use it for your header as well, to center the title.
.your-header {
display: flex;
align-items: center;
justify-content: center;
}
Then the image container. Use it's more semantic and it's a block element, perfect to wrap an image with a caption or a link in your case:
<figure class="your-figure">
<img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
<a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>
and the CSS
.your-figure {
display: flex;
align-items: center;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
.your-image {
margin-right: 10px;
}
Have a look here for the complete code ;)
Follow this if you don't know Flexbox, might seems daunting at first, but when it clicks in your head it will change your life :) Complete guide to Flexbox
I'm using this hover effect for buttons, but in a few cases when the height changes, the top remains the same and the bottom moves up, instead of vice versa like it should. How can I make sure it always goes in the correct direction?
jsfiddle
.button {
box-sizing: border-box;
display: inline-block;
width: 215px;
height: 55px;
color: white;
font-family: $arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35);
letter-spacing: .1em;
border-radius: 3px;
position: relative;
background: #009ee0;
border: 1px solid #148fc6;
border-bottom: 4px solid #148fc6;
}
.button:hover {
border-bottom: 1px;
height: 53px;
}
.button span {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-43%);
line-height: 1.2;
}
div {
padding: 20px 5px;
}
<div>
<a href="#" class="button">
<span>Wrong way</span>
</a>
</div>
<div>
<a href="#" class="button">
<span>I work fine</span>
</a>
<a href="#" class="button">
<span>I work fine</span>
</a>
</div>
You're reducing the height from 55px to 53px. That 2px has to go somewhere. The top button is just collapsing it. (The bottom two are doing the same, it just doesn't look like it because they are being affected by vertical text alignment). change your hover rule to this to accommodate for the height loss.
.button:hover {
border-bottom: 1px;
margin-top: 2px;
height: 53px;
}
https://jsfiddle.net/exd6hhvz/
I was able to make it work consistently by adding margin-top: 2px; to .button:hover
Here's an example: https://jsfiddle.net/vf03czp5/
UPDATE: Here's a Fiddle: https://jsfiddle.net/720v4zdy/8/
I'm customizing a tumblr blog to match someone's site and it's almost in good shape. We started with a theme that already matched it closely and then made some changes in CSS.
The last problem I can't solve is how to make the navigation bar stretch the entire page while containing all of the links in a max-width of 1024px.
Here's the tumblr blog WIP: http://craftysheepblog.tumblr.com/
I want the navigation bar to stretch the entire page, but the links to be contained with a max-width of 1024px. The trouble here is I only have one DIV to do this with, so I'm not quite sure how to make it happen.
I'm using this currently, which works somewhat. It gets ugly when you make the browser window smaller though.
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
width: 100%;
}
You can set the nav to max width: 1024px and fill the "gaps" on the sides with ::before and ::after pseudo elements. You'll need to hide the overflow on header#top to avoid sideways scrolling, because the pseudo elements are set wider than the content.
This does rely on you setting the height of your nav and following suit with the <a> (height, line-height, etc.) ...
Also - tweak some more; there is a 600px break point in your CSS on the live site that will interfere with this (along with a lot of your extra CSS that I didn't clean up).
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
margin: 0;
}
#top {
overflow: hidden;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
max-width: 1024px;
margin: 50px auto 20px;
height: 50px;
width: 100%;
border-width: 0;
padding: 0;
position: relative;
}
#top nav::before{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
right: 100%;
}
#top nav::after{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
left: 100%;
top: 0;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
border: 0;
display: inline-block;
padding: 0 1em;
margin: 0;
height: 50px;
line-height: 50px;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<nav>
<a class="page" href="#">Link 1</a><a class="page" href="#">Link 2</a><a class="page" href="#">Link 3</a>
</nav>
</div>
</div>
</header>
How about using max-width: 1024px;
The best way to do this is to use a ul inside of a div as your navigation bar. The ul can contain all of your links. That way, the div can have a width that spans the entire page while the unordered list has a max width of 1024px.
Example code:
<html>
<head>
<style>
#nav {
width: 100%;
height: 20%;
}
#nav-links {
max-width: 1024px;
}
</style>
</head>
<body>
<div id="nav">
<ul id="nav-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>...</li>
</ul>
</div>
</body>
</html>
Then you can style your ul as a nav bar however you like. Here's a good link for that: http://www.w3schools.com/css/css_navbar.asp
With the amount of information you have shared it is hard to say. Obviously the cleanest way to accomplish this is to insert another element (div or otherwise) around these child elements, and assign it a max-width... however this does not sound as if it is an option for you?
If you know how many elements you want to make up the 1024px, you could assign their widths manually (i.e. give each of the four children a width of 256px, or something similar).
If you do not know any of these things, and your options for the space are limited, Javascript is your best option. You could write a script that counts the children, and either assigns their widths appropriately or inserts clears at the proper location.
If you expand your question to target a specific approach, I'm sure myself and the many gurus on here will be able to give you more specific guidance.
Use flexbox: https://philipwalton.github.io/solved-by-flexbox/
The links should stretch as normal but start to shrink when they each exceed 341px which is 1023px as a total width.
Note: Snippet best viewed in Full Page mode.
Relevant CSS
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
}
.row {
max-width: 100%;
}
#top {
margin-top: 0px;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
text-decoration: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
#posts {
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.column,
.columns {
padding: 0;
}
#posts article:nth-child(1) {
padding-top: 20px;
}
#posts article .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 36px;
color: rgb(38, 39, 43);
text-align: center;
font-weight: 500;
}
#posts article footer {
display: none;
}
#paginate {
display: none;
}
#bottom {
border: none;
}
#bottom {
border: none;
max-width: 1024px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<img class="headimg" src="http://assets.tumblr.com/images/x.gif?v=1">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<div class="description"></div>
<nav>
<a class="page" href="/online-store">Shop NAO</a><a class="page" href="/nao-couture">NAO Couture</a><a class="page" href="/nao-experience">NAO Experience</a>
</nav>
</div>
<!--.columns-->
</div>
<!--.row-->
</header>
See my codepen. I look to make the blue background color scale to fit with the text, "My Pet". I tried display: inline and padding, but I couldn't figure out how to set the background to fit with the text responsively, rather than being full width. Also, how can I set the opacity of the background color but not the text?
After googling, I still struggle to find a solution.
HTML:
<div class="myDiv">
<div class="bgImage">
<h1>My Pet</h1>
</div>
</div>
CSS:
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
border-radius: 20px;
background-color: #2ba6cb;
/* padding: 0.5em 0.2em 0.8em 0.5em;*/
}
Is this what you're trying to achieve?
.myDiv {
text-align: center;
}
.myDiv h1 {
display: inline-block;
font-family: 'Gabriela', serif;
color: #FFF;
font-size: 3.5em;
border-radius: 20px;
background: rgba(43, 166, 203, 0.5 /* alpha value for background */);
padding: 0.5em 0.2em 0.8em 0.5em;
}
<div class="myDiv">
<h1>My Pet</h1>
</div>
even shorter
width: max-content;
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
border-radius: 20px;
background-color: #2ba6cb;
width:max-content;
padding:2px 20px;
}
<div class="myDiv">
<div class="bgImage">
<h1>My Pet</h1>
</div>
</div>
Is that what you were trying to get? This way you can set opacity of bgImage
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
}
.myDiv {
text-align:center;
}
.myDiv .bgImage{
display:inline-block;
background-color: #2ba6cb;
border-radius: 20px;
padding: 0.5em 0.2em 0.8em 0.5em;
}
<div class="myDiv">
<div class="bgImage">
<h1>My Pet</h1>
</div>
</div>
You can just display your h1 as a table-cell and add the required padding around the text.
Note the last two rules to selector below....
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
border-radius: 20px;
background-color: #2ba6cb;
display: table-cell;
padding: 0 0.5em ;
}