Can't seem to figure out why this code is not working. I want the buttons to be centered on the bottom of the page. I have the code to make them stay on the bottom of the page, but I just can't get them to center. Unless I use but that doesn't "feel" like the way to do this.
See example on JSFiddle: http://jsfiddle.net/c99Hh/2/
HTML:
<div id ="footer" style="margin:auto">
<div class="nails-footer-buttons">But01</div>
<div class="nails-footer-buttons">But02</div>
<div class="nails-footer-buttons">But03</div>
<div class="nails-footer-buttons">But04</div>
</div>
CSS:
#footer{
position: fixed;
bottom: 0;
width: 100%;
}
.nails-footer-buttons {
-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
box-shadow:inset 0px 1px 0px 0px #c1ed9c;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
background-color:#9dce2c;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #83c41a;
display:inline-block;
color:#ffffff;
font-family: 'Lato', sans-serif;
font-size:15px;
font-weight:bold;
font-style:normal;
height:60px;
line-height:60px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #689324;
width: 70px;
}
Tips much appreciated.
Apply the style text-align:center to the footer element or to the CSS.
<div id ="footer" style="margin:auto;text-align:center;">
Can you try this, Added margin:0 25%;
CSS:
#footer{
position: fixed;
bottom: 0;
width: 100%;
margin:0 25%;
}
HTML:
<div id ="footer" >
<div class="nails-footer-buttons">But01</div>
<div class="nails-footer-buttons">But02</div>
<div class="nails-footer-buttons">But03</div>
<div class="nails-footer-buttons">But04</div>
</div>
Demo: http://jsfiddle.net/c99Hh/3/
Try this :
FIDDLE
CSS :
#footer{
position: fixed;
bottom: 0;
left:50%;
margin-left: -150px;
width: auto;
}
You also need to remove style="margin:auto;" from your html markup.
You could use align='center'
<div id ="footer" align='center' >
<div class="nails-footer-buttons">But01</div>
<div class="nails-footer-buttons">But02</div>
<div class="nails-footer-buttons">But03</div>
<div class="nails-footer-buttons">But04</div>
</div>
its not the best method but it should work
Related
I've made a "triangle" using CSS using the code outlined HERE
(jsFiddle example)
It works great, but I would like to have an inset shadow on the triangle and bar like this:
How?
HTML:
<div id="wrapper">
<div class="triLeft"></div>
<div class="triAngle"></div>
</div>
CSS:
.triLeft{
width:40px;
background:#fff;
margin:0;
float:left;
height:200px;
}
.triAngle{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px;
border-color: transparent transparent transparent #ffffff;
float:left;
margin-top:20px;
}
#wrapper{
height:200px;
background:brown;
}
you could try it another way, without borders but transform:rotate();
http://codepen.io/anon/pen/MymQMK
div.trgl {
position:relative;
margin:2em;
overflow:hidden;
}
div.trgl:after {
content:'';
position:absolute;
height:40px;
width:40px;
top:2em;
left:-20px;
background:white;
box-shadow: inset 0 0 5px black ;
transform:rotate(45deg);
}
div.trgl div{
position:relative;
min-height:200px;
padding:1em;
box-shadow: 0 0 5px black;
margin:3px;
background:lightgray;
}
<div class="trgl">
<div>
</div>
</div>
For some reason I have a parent div called banner which contains a number of child divs, however in my css styles sheet I can't seem to move any elements especially the "CRAFT412" logo image to my desired position within the banner. I've tried using left/right/top/bottom to move these elements but nothing seems to budge them. If anyone could help me here I'd appreciative it.
Here is my HTML for a page on my site
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip_box"></div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_box"></div>
<div id="teamspeak_box_2"></div>
<div id="teamspeak_text">
<p>TEAMSPEAK<P/>
</div>
<div id="teamspeak_image">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
</div>
Also here is my CSS for the same divs
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {
background:#EEEEEE;
background-repeat: no-repeat;
background-attachment: fixed;
}
#wrapper {
width: 1750px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1.5px 2px 0px;
border: 1.5px solid #E0E0E0;
color: #E0E0E0;
}
/*TOP BANNER SECTION*/
#banner { height:100px; }
#logo {}
#ip_box {
width:200px;
height:43px;
background:#212121;
border-radius: 5px;
box-shadow: 1px 1px 5px;}
#ip_text {
color: white;
font-size: 15px;
}
#teamspeak_box {
width:159px;
height:43px;
background:#212121;
border-radius: 5px;
box-shadow: 1px 1px 5px;
}
#teamspeak_box_2 {
width:43px;
height:43px;
background:#313131;
border-radius: 5px 0px 0px 5px;
}
#teamspeak_text { color: white; }
#teamspeak_image {}
Give the parent div a property :
Position:relative;
Also give the property to child div:
Position:absolute;
Now you can change the places of child div inside the "BANNER" div. by using TOP , BOTTOM, RIGHT, LEFT
I have a div that is going to be used as a button, but it doesn't want to center within the larger div!
This is my CSS for the larger div:
.news-quarters{
width:189px;
height:300px;
position:relative;
float:left;
padding:10px;
padding-top:0px;
margin:10px;
text-align:left;
}
and for the button div:
.green-button{
width:auto;
height:auto;
position: relative;
float:none;
padding:0px;
margin: 0 auto;
background: #0A9C00;
background-size:auto;
border:1px outset #0A9C00;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
overflow:auto;
display:inline-block;
}
.green-button h4{
text-align:center;
color:white;
line-height:1;
margin:0px;
font-size:12px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
width:auto;
}
And my html like this:
<div class="news-quarters">
<div class="green-button">
<h4>Insert button text here</h4>
</div>
</div>
Can someone please help? This is severely p***ing me off :(
Thank you!
In the style .news-quarters change text-align:left to text-align:center;
There are already many existing answers for this problem see How to horizontally center a <div> in another <div>?
I have two divs that join together that contain an image. The way the it is layered out the image is in two half's.
This works as intended but only views correctly in chrome. In the other browsers there is an outline or some layout error which causes the document to look different.
I presumed that outline:0; and border:0; would do the trick.
This is how the image should look. This is taken form chrome. As you can see there is nothing visually wrong with this.
Internet Explore
FireFox
Safari
CSS:
.login{
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-200px;
width:300px;
height:400px;
border-radius:10px;
text-align:center;
display:table-cell;
vertical-align:central;
padding:0 0 0 0;
border:0;
border-style:none;
outline:0;
}
.login header{
height:75px;
width:100%;
margin-bottom:0;
padding:0 0 0 0;
border-style:none;
outline:0;
border:0;
}
.login header .logo{
width:150px;
height:75px;
outline:none;
margin-left:75px;
border:0;
border-style:none;
outline:0;
background:url(assests/logo_tiny.png) center 0px no-repeat;
background-color:#000;
border-radius:75px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
box-shadow:5px 5px 10px #000;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-ms-box-shadow:5px 5px 10px #000;
-o-box-shadow:5px 5px 10px #000;
}
.login form{
outline:none;
width:100%;
height:245px;
padding:0 0 0 0;
padding-top:80px;
border:0;
border-style:none;
box-shadow:5px 5px 10px #000;
background:url(assests/logo_tiny.png) center -75px no-repeat;
background-color:#000;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-ms-box-shadow:5px 5px 10px #000;
-o-box-shadow:5px 5px 10px #000;
border-radius:10px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#FFF;
}
HTML:
<div class="login">
<header>
<div class="logo"></div>
</header>
<form>
</form>
</div>
Update: Fiddle
You made a mistake by flattening your logo.
It was 150px wide and only 75px high. Besides you've removed the border-radius at the bottom. On order to have a circle cast a circular shadow the whole div has to be square and the border-radius have to be equal.
See attached fiddle.
http://jsfiddle.net/mbh6W/2/
So the line you saw was in fact the box shadow of the circle that was flattened at the bottom.
I am having issues with rounding corners, they keep wanting to crop off on the left side by a few pixels. Below is the code I am using. I've tried increasing numbers and decreasing numbers; I've added a wrapper; I've tried all different solutions I can find for searching, but it still crops off. Can anyone give me a hand since I don't seem to be very handy? And apparently I can't post a picture of what it looks like either.
<style>
.image
{
width: 200px;
position:relative;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-khtml-border-radius: 14px;
border-radius: 14px;
overflow: hidden;
}
#slideshow
{
margin:0 0 0 0;
position:relative;
width:200px;
height:133px;
padding: 10px;
overflow:hidden;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-khtml-border-radius: 14px;
border-radius: 14px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
#slideshow > div
{
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function()
{
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<div id="slideshow">
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
</div>
I had the very same problem when the border-radius spec came out. Turns out you have to add border-radius to the <img> tag. Then you can either keep or remove the <div>'s border-radius property.
Essentially you need to be dealing with nested rounded corners which are fairly helpfully generator with this useful tool.
http://joshnh.com/tools/get-your-nested-border-radii-right.html
I've been able to solve this issue using the following css. This has worked on my sites I hope it can help you out with your problem. Not sure if it's a argument you are missing or not.
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
You can try this:
div.circle
{
width: 10px;
height: 10px;
background: white;
border-radius: 28px;
-moz-border-radius: 64px;
-webkit-border-radius: 64px; padding:32px;
border: 2px black;
color:white;
text-align:center;
-webkit-box-shadow: 0 0 1px rgb(255,0,0);
-moz-box-shadow: 0 0 1px rgb(255,0,0); box-shadow: 0 0 1px rgb(255,0,0);
}