I'm pretty new to css. I figured out how to put an image in a button and how to use padding to move it around within the rectangle of the button. But as I stared adding more buttons to my page the padding on each button changed. I think this is because I need some sort of but once I started using divs I messed up the padding somehow and I can't figure out how to fix it. I tried centering (using top percentage and translate) the image within the button as well but it just moves the whole button. I need a way to make each picture on each button on my page to be centered or at least have padding so I can center it on my own for each individual image.
Here's a picture of some of my buttons.
The button on bottom is exactly how I want it, but the button on top is not centered since the image is a different size. But when I change the code of one the other button changes as well.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale =1">
<style>
.button {
background-color: #FFC627;
border: none};
border-radius: 20px;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 20px;
cursor: pointer;
height: 200px;
width: 200px;
}
.roles-and-responsibilities {
padding-top: 10px;
padding-bottom: 4px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.button:hover {background-color: #5C6670}
.buttoniactive {
background-color: #5C66703
transform: translateY (4px);
}
</style>
</head>
<body>
<div class = "roles-and-responsibilities">
Related
I have a number of buttons in a div that refused to stay in a fixed position when the div scrolls, and I cannot see why. I have done this elsewhere so I should be able to do it, but I'm going around in circles today.
I have isolated enough of the application to reproduce it easily. It places a div in the centre of the screen and puts a small quit button in the top-right. I want the button (and all my others) to remain fixed relative to the div. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
width: 50vw;
height: 50vh;
min-width: 400px;
min-height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 20px;
overflow: auto;
}
div.dt-container {
background-color: lightblue;
border: 3px solid royalblue;
text-align: center;
}
button.dt-quit {
border-style: solid;
border-radius: 4px;
border-color: inherit;
width: 20px;
height: 20px;
background-color: white;
color: red;
font-weight: bold;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
z-index: 20;
top: 5px;
right: 5px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>
</div>
</html>
[Edited] Of course, position:fixed; is not relevant unless it's fixed relative to the screen so I removed the mention. But I c=still cannot get this simple thing to work.
I hate having to answer my own question, but this was me being silly ... of course.
The suggestion above that my transform was the problem is a red herring. It is basically not possible to fix an element relative to its container in a scrolling flow.
The solution was to put both my scrolling div and my buttons inside an extra containing non-scrolling div. Not only does this make sense -- the container encapsulates both scrolling and non-scrolling content without having to put the latter inside the former -- but my initial code was very nearly there.
Taking my existing dt-baseContainer class and putting it on an outer div fixes the problem.
I've created a bubble in css3, but in some browsers (specifically Windows Safari 5.1.7) my span overflows my anchor tag, even though 1) it's positioned relative and 2) had a static width / height with a hidden overflow. In all other browsers (Firefox, IE, Chrome) it looks fine but the anchor link (hover) extends outside the bubble, to the width of the span since it is displayed block.
My question is, why is it overflowing and how can I fix it? I thought using a relative position with an absolute element sort of put it back into place, is this not correct?
Here's a JSFiddle of the problem at hand. The code looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {background-color: #ccc;}
a {display: block; -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em; border: 5px solid #eee; width: 220px; height: 220px; overflow: hidden; position: relative; text-align: center; line-height: 24px; font-size: 20px; color: #fff; background-color: #fff;}
.content{display: block; position: absolute; bottom: 0px; background-color: #000; width: 100%; padding: 20px 0 30px;}
</style>
</head>
<body>
<a href="javascript:void(0);">
<span class="content">
Test<br />
Bubble
</span>
</a>
</body>
Here's an example I keep running into on chrome, if I hover the Green (padding) or Blue (width) my mouse goes into a pointer, which is not where the link should be with overflow: hidden - it's outside the rounded corners.
SO here is what I figured out.. overflow hidden doesn't work with links, just hides it visually
http://jsfiddle.net/88UeR/
its only visual not clipping of the block level element
#a {
position:absolute;
border-radius:100px;
background-color:#72CEE0;
width:100px;
height:100px;
left:150px;
overflow:hidden;
}
so if you want to hide it completely you have to make the inside element not overflow outside the parent for anything other than to visually hide it
I have buttons with text in it which has too much space above it. Is looks like this:
How can I position the text a little bit higher so that it doesn't get sliced by the border of the button?
HTML:
<input type="button" value="a">
Here is my CSS so far:
input[type="button"], input[type="submit"] {
min-width: 40px;
height: 25px;
font-size: 30px;
color: #ffffff;
margin-right: 10px;
padding: 0px;
}
The line-height property doesn't change anything, even with the use of !important.
Setting a fixed height will throw the alignment off.
Setting the font size will be enough for the div to auto-size and the text will be centered.
Try this new css:
input[type="button"], input[type="submit"] {
min-width: 40px;
font-size: 30px;
color: #ffffff;
margin-right: 10px;
}
If you really want to preserve the fixed width and height of the button and the font size of the text then you could do something like below.
This is putting the text in a different div so you can position it on top of the button.
If the button is position: relative, the text div is position: absolute, and the HTML is structured so the text div is within the button tag, then it will layer nicely.
Also, when done this way the text will move with the button and won't be displaced (if say you give the button a margin: 100px).
<button value="">
<div id="buttonText">a</div>
</button>
Here is my CSS so far:
<style>
button {
width: 40px;
height: 25px;
margin-right: 10px;
position: relative;
}
#buttonText
{
font-size: 30px;
position: absolute;
top: -9px;
left: 9px;
color: #FFF;
}
</style>
I'm developing a Search Application where the requirement is to have a magnifier image instead of button on the search textbox.
On a maximized page the anchor seems to be on correct place.
But on browser resize (clicking restore down button next to close button) the search textbox looks like this:
Following is my CSS code (I'm not a CSS guy btw :))
.search_div A
{
background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
border: 1px solid #CCCCCC;
height: 11px;
left: 85.8%;
margin-right: 175px;
padding: 6px 5px 4px 20px;
position: fixed;
top: 32px;
width: 0;
}
Please suggest.
You don't show the full markup for you search button/input so it's difficult to know exactly how how you exactly position the search button.
Here how I would do it. Let's say you have the followin markup:
<div class="search_div">
Search
<input type="text" />
</div>
For the wrapping DIV, the key is to explicitly position it relative:
.search_div {
position: relative;
border: 1px solid LightGrey;
width: 300px;
}
For the search button, make it absolute with a left value equal zero so it sticks to the left side.
.search_div A {
background: url(icon.gif) no-repeat scroll center center #FFFFFF;
border: 1px solid #CCCCCC;
width: 16px;
height: 16px;
left: 0;
position: absolute;
text-indent: -99999px;
}
As the anchor is absolute positioned, the input will be underneath. The trick is to pad the left side of the input to a value a bit higher than the anchor width, so the beginning of the text is not hidden underneath the anchor:
.search_div input {
box-sizing: border-box;
border: 0;
outline: 0;
line-height: 16px;
width: 100%;
padding-left: 20px;
padding-right: 3px;
}
DEMO
You can go further with this technique then by having the possibility through css to show the search icon to the left or to the right by applying an additionnal class to the .search_div container.
Stick left or right the search icon:
.search_div.iconleft a {
left: 0;
right: auto;
}
.search_div.iconright a {
left: auto;
right: 0;
}
Adjust the padding of the input also left or right:
.search_div.iconleft input {
padding-left: 20px;
padding-right: 3px;
}
.search_div.iconright input {
padding-right: 20px;
padding-left: 3px;
}
DEMO
The line position:fixed; is most likely the trouble spot because it makes the element fixed with respect to the browser window, which is why you are seeing the element shift when the browser resizes.
What you'll want to do is apply position: relative; to both the a anchor element and its parent element .search_div that you want the anchor to be relative to. Once the anchor is positioned relative to its containing element, you can use the css attributes "left, right, top, and bottom" to position it as needed.
In my html page, I have two links located on the top of the page:
<div id='my-link'>
<a class="school" href="../school.html" target="_blank">School</a>
<a class="police" href="../police.html" target="_blank">Police</a>
</div>
(When mouse click on the link, the linked page is supposed to be opened in a new browser window.)
the CSS:
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
a.school{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.police{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.school:hover, a.police:hover
{
color: #2f8;
text-decoration: underline;
}
I tested on firefox 3.6.16, when I open the firefox browswer window with full screen, the links are working successfully ("school", "police" pages opened successfully,
CSS hover feature is also working).
BUT, if I open the browser window size not in full screen, the links are not working at all, the "school" and "police" pages are not open,
the CSS hover feature is not working either.
The link texts are like plain texts on the page. *WHY???*
My guess is that something else on the page that's positioned is above it. Can't be certain without seeing your whole page code though.
Try adding a z-index to your #my-link div
-- edit --
Sorry, with the nice range of CSS properties you'd already used I assumed you would have heard of z-index.
Replace
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
with
#my-link{
margin-top: 5px;
position: fixed;
z-index: 100;
margin-left: 22%;
width: 20%;
}
Lots of info on z-index at https://developer.mozilla.org/en/Understanding_CSS_z-index
-- edit --
Why it works
If x is horizontal and y is vertical, as on a graph, z is towards or away from you. Using a z-index will bring something towards you. You can overlap these properties as well.
Take this as an example. Copy it into Notepad (or similar), save it and take a look at the code to understand. Alter the z-index properties of each div in the style section to see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Z-Index Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div { width: 100px; height: 50px; border: 1px solid #000; }
#one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
#two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
#three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
</style>
</head>
<body>
<div id="one">Furthest away</div>
<div id="two">Nearest</div>
<div id="three">In the middle</div>
</body>
</html>
Naturally in HTML, the elements later on in the code would overlay the things that appear earlier. Using positioning to move things will affect where they sit in the natural flow of the page and may be overlapped. That's how I guesses your problem when I saw your fixed property in your CSS as you'd taken the div out of the natural flow.