Aiming for: a vertical gap between paragraph and 'link-button'.
I seems I can change my margin for my link button to any number, but it seems to have no effect whatsoever. (I can surprisingly work around this by adding a margin-bottom in my 'paragraph' styling, yet it still bothers me that I don't know why I don't understand why code below is not working.)
Does anyone know what I am missing here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.link {
padding: 15px 30px;
border: solid 2px black;
margin-top: 600px; <!-- Why does this have no effect?-->
}
</style>
</head>
<body>
<p>
This is a paragraph text.
</p>
<a class="link" href="google.com">Google</a>
</body>
Try this
CSS:
.link {
padding: 15px 30px;
border: solid 2px black;
margin-top: 600px;
display:inline-block;
}
Please add display:inline-block in .link css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.link {
padding: 15px 30px;
border: solid 2px black;
margin-top: 600px;
display:inline-block;
}
</style>
</head>
<body>
<p>
This is a paragraph text.
</p>
<a class="link" href="google.com">Google</a>
</body>
Related
Is it possible to shape the outline that appears when a CSS button is clicked? When clicking a rounded button the outline just looks a bit off.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.button {
border-radius: 80%;
padding: 16px 32px;
}
</style>
</head>
<body>
<button class="button">BUTTON</button>
</body>
</html>
You can change the width of the existing border when the button comes into focus (or is active) - and you also have the option of changing its color or style (ridge etc) as you wish.
.button:focus, .button:active {
outline-style:none;
border-width: 5px;
border-color: black;
border-style: solid;
}
.button {
border-radius: 80%;
padding: 16px 32px;
}
<button class="button">BUTTON</button>
override outline behavior on the focus of the button.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.button {
border-radius: 80%;
padding: 16px 32px;
}
.button:focus {
outline: none;
box-shadow: 0px 4px 7px 0px #888888;
}
</style>
</head>
<body>
<button class="button">BUTTON</button>
</body>
</html>
I have no idea about "shaping" but i am sure you can diable the outline with outline: none; you can just use this property on active, focus and hover to see if this works or not.
I created a custom page template, here the link http://goo.gl/UFgzGQ, but I noticed that the style of header is messed up only on that page.
How to fix this?
Here's the css
.header-wrap .search-icon {
float: right;
position: relative;
margin-top: -32px;
line-height: 6;
margin-right: -30px;
border-left: 1px solid #ECECEC;
cursor: pointer;
padding: 0 20px;
}
.header-wrap .ak-search {
background: none repeat scroll 0 0 #FFF;
display: none;
padding: 10px;
position: absolute;
right: 0;
top: 100%;
z-index: 9999;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
EDIT
Actually its not the CSS which causing the misalignment or misplacing the search-icon, its your DOM viz the main culprit as:
your maine-page screen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
....
you can see that it has perfectly defined header with doctype whereas in your inner-page:
<head>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
.........
there are some broken code viz the main-culprit and causing the issue.
This question already has answers here:
Why does an inline-block align to top if it has no content?
(2 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
height: 400px;
min-width: 200px;
display: inline-block;
border: 1px solid grey;
}
.item{
border: 1px solid grey;
margin: 5px;
}
</style>
</head>
<body>
<div class="container"><div class="item" style="display: none;">123</div></div>
<div class="container"><div class="item">123</div></div>
<div class="container"><div class="item">123</div></div>
</body>
</html>
the problem is when i add style="display: none;" to the first item, the containers not display inline. when i remove display:none , it's ok .
anyone could tell me why ?
You can change display:none to visibility:hidden, and it works.
This may class as a solution: HERE - the default alignment is baseline, and without any content in the div, there is no baseline. If you add vertical-align:top, you overcome this. That's why my 'solution' above works - visibility:hidden leaves the element inline - whereas display:none takes it out of the flow.
Actually, I do not know the exact answer, but I can provide you a solution:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
height: 400px;
min-width: 100px;
display: inline-block;
border: 1px solid grey;
}
.item{
border: 1px solid grey;
margin: 5px;
position: absolute;
}
</style>
</head>
<body>
<div class="container"><div class="item" style="display: none;">123</div></div>
<div class="container"><div class="item">123</div></div>
<div class="container"><div class="item">123</div></div>
</body>
</html>
try
.item{
border: 1px solid grey;
margin: 5px;
}
to:
.item{
border: 1px solid grey;
margin: 5px;
float:left
}
http://jsfiddle.net/djrr93wq/
I had a problem with border-radius in webkit browsers and found the solution at the following URL:
How to make CSS3 rounded corners hide overflow in Chrome/Opera
but iam using a another element with position: absolute; inside this
now I need to make the caption with rounded border too, but do not know how
note: i can't use another border-radius in caption, because this will have an animation
see the code with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Problem</title>
<style type="text/css">
img {
border: 0;
}
a {
text-decoration: none;
}
.wrap-events {
float: left;
position: relative;
width: 500px;
height: 250px;
}
.events {
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.caption {
position: absolute;
width: 100%;
bottom: 0;
color: #FFFFFF;
background-color: #151515;
font: 12px "Arial", Helvetica, sans-serif;
opacity: 0.6;
border-radius: 0 0 50px 50px; /* add border-radius to caption */
}
.caption p {
padding: 10px;
}
</style>
</head>
<body>
<div class="wrap-events">
<div class="events">
<a href="#">
<img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
</a>
<div class="caption">
<p>This is a caption</p>
</div>
</div>
</div>
<button id="slide">Slide It!</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#slide').click(function(){
$('.caption').hide().slideDown(2000);
});
</script>
</body>
</html>
cheers
That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo
Why is there a one pixel gap created between the top and the bottom of the p tag in the following code in IE6 and IE7 but not in Firefox or IE8?
I have been pulling my hair trying to create the search texbox on powerset website
and interesting enough they don't have the bug in IE6 or IE7. What am I doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#sbox
{
overflow: hidden;
}
#sbox p
{
/*border:1px solid #dae7fa; */
float:left;
display: block;
border: 1px solid red;
width: 208px;
padding: 0;
}
input#q
{
font-size: 11px;
padding: 3px;
border: 1px solid blue;
width: 200px;
color: #999999;
}
</style>
</head>
<body>
<div id="sbox">
<p>
<input id="q" type="text" value="Search..." />
</p>
</div>
</body>
</html>
Add float:left; to input#q. That will get collapse p and get rid of the gap.