I want to centralise a button or a tag within the line it is on (by themselves).
I've written this CSS which makes it yellow, puts a border around it etc but it is always left aligned. How do I centralise it?
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
}
Thanks for your help
several ways to do this, but maybe
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
display: block;
margin-left: auto;
margin-right: auto;
width: ??px;
}
will do the trick.
You can do it by adding text-align:center; to parent <div>
Example here https://jsfiddle.net/uy4u781d/
margin-left:auto;
margin-right:auto;
width:150px; //width as you want
display:block;
Related
This question already exists:
How to change one element style when another is hovered [closed]
Closed 8 months ago.
Sorry for making things unclear last time, it really was code dump because I didn't know how to explain what was happening. Good news, I fixed it now. However now I a problem with CSS. I am trying to change background colour of a table row () when hovered over a button (my code doesn't work). The css is provided below. The problem is at the buttom of the CSS (the two hover styles): Please tell me what I am doing wrong, I searched for answers for so long however I have not come up with a proper solution.
body{
margin: 0px;
font-family: Helvetica;
}
header{
background-color: #e7e7e7;
height: 100px;
padding-top: 25px;
text-align: center;
font-size: 50px;
}
table{
background-color: white;
border-collapse: collapse;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
#myTable{
margin-top: 50px;
}
th,td{
padding: 20px;
text-align: center;
border:1px solid black;
width: 200px;
height: auto;
}
.nthChild{
background-color: #e7e7e7;
}
#nlRow th{
border-top: 0px;
}
input{
font-size: 20px;
width: 100%;
padding: 5px 0px;
border-radius: 4px;
}
#numeracyCredits, #literacyCredits{
width: 30%;
}
.button{
font-size: 20px;
padding: 5px 20px;
width: 15%;
border-radius: 4px;
background-color: white;
color: black;
border: 2px solid black;
transition-duration: 0.3s;
}
.button:hover{
background-color: #c4c2c2;
transition-duration: 0.3s;
}
.button:hover + .nthChild{
background-color: white;
}
the .nthChild of what? you should put the parent or whatever from that .nthChild. Or else if you give it a class or an id use that in stead of .nthChild then it should work.
I am running always to same issues with top navigation bar and footer. I always have problem to place them on the correct position.
Top nav : the logo should be on top left and rest align to right
Footer: is in the middle of the page even though I followed a recommendation and created main container for all divs on my page.
CSS & image attached to the question
html,body {
margin:0;
padding:0;
height:100%;
color: #696969;
}
#mainContainer{
min-height:100%;
position:relative;
}
header{
background-color:#F8F8F8;
height: 120px;
border-bottom: 1px solid #CDCDCD;
display: flex;
}
.topnav {
margin-left: 12%;
margin-right: 12%;
margin-top: 5%;
position: absolute;
align-items: flex-start;
float: right;
}
.topnav a {
float: right;
display: block;
color: #343434;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
}
.topnav a.active {
color: #4CAF50;
}
.sidebar {
margin-left: 12%;
padding: 0;
width: 12%;
position: absolute;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: #696969;
padding: 15px;
text-decoration: none;
border-bottom: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}
section {
margin-left: 25%;
margin-right: 12%;
position: absolute;
display: inline-block;
border-bottom: 1px solid #F8F8F8;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:60px;
color: #696969;
}
footer {
display: flex;
position: absolute;
bottom: 60px;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #F8F8F8;
}
.rights{
text-align:left;
padding: 10px 10px;
}
.socialnets{
text-align:center;
padding: 10px 10px;
}
.newsletter{
text-align:right;
padding: 10px 10px;
}
setting 100% height on body inherits from viewport essentially. thats why the footer is fixed at the bottom of the pixel value for your viewport and if you scroll, it doesn't 'stick'.
I'm guessing this is what you want?..
I have no idea what structure your html is so this is just going off your css.
I would advise looking at flexbox and checking out the sticky footer method using flex.
https://codepen.io/devatrox/pen/wztlx
html,body {
margin:0;
padding:0;
min-height:100vh;
height:100%;
color: #696969;
}
#mainContainer{
min-height:100%;
position:relative;
}
header{
background-color:#F8F8F8;
height: 120px;
border-bottom: 1px solid #CDCDCD;
display: flex;
}
.topnav {
margin-left: 12%;
margin-right: 12%;
margin-top: 5%;
position: absolute;
align-items: flex-start;
float: right;
}
.topnav a {
float: right;
display: block;
color: #343434;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
}
.topnav a.active {
color: #4CAF50;
}
.sidebar {
margin-left: 12%;
padding: 0;
width: 12%;
position: absolute;
overflow: auto;
background-color: red;
height: calc(100% - 121px);
}
.sidebar a {
display: block;
color: #696969;
padding: 15px;
text-decoration: none;
border-bottom: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}
section {
margin-left: 25%;
margin-right: 12%;
display: inline-block;
border-bottom: 1px solid #F8F8F8;
}
#footer{
position:relative;
bottom:0;
width:100%;
height:60px;
color: #696969;
background-color:blue;
}
footer {
display: flex;
position: absolute;
bottom: 60px;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #F8F8F8;
}
.rights{
text-align:left;
padding: 10px 10px;
}
.socialnets{
text-align:center;
padding: 10px 10px;
}
.newsletter{
text-align:right;
padding: 10px 10px;
}
<div id="mainContainer"><header><div class="topnav">top</div></header><div class="sidebar">side</div><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section>
<div id="footer">FOOTER</footer>
I have a set of DIVs like so:
<div class = 'tag'><a href='#'>gifts for him</a></div>
And the CSS looks like this:
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
Basically I want them to look like the following (gifts for him as an example hover):
However mine look like this:
There is no gap and the hover ignores the padding (I'd like the hover to colour right up to the edges if possible).
If I add margin: 2px I get this, which is even worse:
What have I done wrong?
Thanks!!
i have make for you a fiddle.
DEMO
your css is wrong:
it should look like this:
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right:5px;
}
.tag a{
color: #666;
text-decoration: none;
}
.tag:hover {
background-color: #a5c5da;
cursor:pointer;
}
.tag:hover a{
color:#FFF;
text-decoration: none;
}
In your CSS, you need to give the .tag alone a margin, not .tag a. Try adding this line:
.tag { margin: 2px; }
Also, give your .tag a a height and width of 100% - this will fill in the entire container:
.tag a { height: 100%; width: 100%; }
In your current CSS, you're giving both the div containing the anchor tag as well as the anchor tag styling, but you only need to be giving it to the .tag div in order to space out the containers.
try this
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
margin:2px;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
height: 100%;
width: 100%;
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
<div class = 'tag'><a href='#'>gifts for him</a></div>
Try with this used only single
gifts for him
Demo:http://jsfiddle.net/stanze/hkkLz0re/
When I hover over the whole button, I would like it to appear over the whole button. Because the button has a background image, i am not able to do it correctly. The buttons looks like these:
The CSS appears like this:
#tablist{
padding: 0px auto 0px auto;
height: 32px;
}
#tablist li{
display: block;
width: 150px;
height: 35px;
float: left;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin: 0px auto 0px auto;
text-align: center;
padding-top: 5px;
cursor: hand;
cursor: pointer;
}
#tablist ul:hover{
background-color: red;
}
.tablink{
text-decoration:none;
}
.locked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:5px -85px;
}
.unlocked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:4px -2px;
}
How do i correct it? Need some guidance over it.
Try overriding the background property at hover:
#tablist ul:hover{
background: red;
}
Here is a demo : http://jsfiddle.net/taQfU/
Hey i think you should give to #tablist li:hover
As like this
#tablist li:hover{
background-color: red;
}
I am new to CSS, I found an layout online, but I have a little problem customizing it.
When the content of mainContent div is "higher" then the left menu, everything is working ok - but when the mainContent is smaller, it looks like this:
The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:
body {
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding-right: 20px;
padding-left: 20px;
}
#header {
}
#mainMenu {
border: 1px solid #808080;
font-size: 0.8em;
}
#pageBody {
position: relative;
}
#sidebar {
width: 250px;
padding: 5px 10px 10px 10px;
float: left;
border: 1px solid #808080;
font-size: 0.8em;
margin-top: 5px;
margin-right: 10px;
min-height: 500px;
}
.mainContent {
text-align: justify;
min-width: 400px;
min-height: 500px;
margin-left: 285px;
}
#footer {
font-size: 0.8em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
text-align: center;
color: #CCCCCC;
background-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
/*clear: both;*/
}
#footer p {
margin-top: 0px;
margin-bottom: 5px;
}
#footer a {
color: #CC3300;
text-decoration: none;
}
#footer a:hover {
color: #FF9900;
}
Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:
The exact position is not important, I just want the footer to be placed below the pageBody div.
I would be grateful for any help.
I don't know what your html looks like, but it looks like you could try inserting a clearing div just before the footer... btw, why is the 'clear: both;' commented out in the footer css rule?
code to insert just before the footer div:
<div style="clear: both;"/>
Not positive whether it will help, but if I understand your problem correcty, this is my best guess!
Try changing pageBody to:
#pageBody {
float: left;
clear: both;
}