I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.
Related
I am creating HTML and CSS with this design proposal:
But my result is:
HTML code:
<div className="project_content">
<div className="project_quick f_bold" id="tab">
<a><span>업데이트</span><span className="alral_num">1</span></a>
<a><span>커뮤니티</span><span className="alral_num">34</span></a>
<a><span>통계</span></a>
</div>
</div>
CSS code:
.alral_num {
height: 20px;
padding: 2px 7px 0 7px;
margin: 0 0 0 5px;
display: inline-block;
background: #e8351d;
border-radius: 15px;
text-align: center;
color: #fff;
line-height: 1.2;
}
.project_content .project_quick .alral_num {
position:relative;
width: 20px;
display: table;
left: 20%;
margin-top: 5px;
}
.project_quick a {
height: 60px;
padding: 20px 40px 20px;
display: inline-block;
font-size: 16px;
background: url(../../assets/images/line01.gif) no-repeat right 50%;
}
.project_quick a:last-child{
background: none
}
.f_bold {
font-weight: 700 !important;
}
I want to show numbers over border
I have tried position:fixed, But i have to scroll vertically or horizontally, and the numbers should be moved when it scrolls. so it didn't work.
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
I am trying to align a horizontal rule with the white line in my menu. And I want that alignment to stay when viewed on different screens. What's my best option for doing that? Image of what it needs to look like:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
float: right;
width: 51%;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display: block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right
}
#resume_btn:hover {
background-position: 0 -68px;
}
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
<div id="head"></div>
</div>
You can achieve this by modifying slightly the CSS and HTML code, and using translation to move the menu items to the center of the screen.
To do this you need to:
Wrap everything in div with the border-bottom (e.g.: #head)
Float the page title (h1) to the left (although maybe it would be better to change its position to absolute or it may affect the menu links)
Wrap all the navigation elements in a div (e.g.: #menu) with absolute position positioned in the center of the #head (left:50%)
Transform the #menu div to translate it 50% of its width to the left. This could be achieved by adding this to its style:
transform:translate(-50%, 0%)
You can see a demo working here: http://jsfiddle.net/o4ff4thc/ or below:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: inline-block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display:inline-block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#resume_btn:hover {
background-position: 0 -68px;
}
#menu {
position:absolute;
left:50%;
transform:translate(-50%,0%);
height:20px;
width:245px;
}
<div id="head">
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
</div>
</div>
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I have a problem that I believe might be pretty stupid, but I can't figure out.
I have a form, where I want to align the elements in both sides, problem is I can't align it to the right (where the red line is), here is a picture to show it:
and here is my SASS (sorry if is not very tidy I been working for a while in it and might be messy):
.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
letter-spacing: 2px;
color: $color4;
input, textarea {
border: 3px solid $color5;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
background: $color6;
&:focus {
outline: none !important;
border-color: $color3 !important;
}
textarea {
height: 10em;
width: 100%;
overflow: inherit;
}
}
.info-group {
margin-top: 10px;
label {
display: inline-block;
width: 45%;
float: left;
&:nth-child(2) {
float: right !important;
margin: 0 auto;
}
}
}
.tell-group {
width: 100%;
label {
display: inline-block;
margin-top: 10px;
}
textarea {
height: 10em;
width: 100%;
float: left;
}
}
.submit-wrap {
margin-top: 10px;
float: right;
input {
width: 100px;
font-size: 18px;
text-transform: uppercase;
color: $color6;
background-color: $color5;
border: none;
&:hover {
color: $color1;
}
}
}
}
}
Thanks!
padding: 10px; is going to add 20px to the width, this extra width is likely what is causing the problem. You can change the width attribute to width: calc(100% - 20px); to account for the 10px padding on each side of the element.
Here is a list of where calc is supported: http://caniuse.com/#feat=calc
You can also try adding these css rules to the problem elements to move them over:
position: relative;
left: -20px;
You might also have to add position: relative; to the parent element
Here is a fiddle showing the left -20px method: http://jsfiddle.net/0f153w8e/
Side note: you might have to adjust the left amount a little bit to make it exact if your text areas have borders (which they probably do)