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.
Related
When I add a border to a div, the content inside doesn't have 100% width and height anymore.
I already added padding: 0; and margin: 0; as well as box-sizing: border-box; but the background still shows up at some zoom levels.
Is this a browser bug? On Firefox the red background never shows up (but Firefox has different zoom levels, too).
red background
#outside {
box-sizing: border-box;
background: red;
border: 1px solid #808080;
border-radius: 12px;
height: 500px;
overflow: hidden;
padding: 0;
margin: 0;
}
#content {
background: green;
height: 100%;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="outside">
<div id="content">
</div>
</div>
</body>
</html>
In browers there is some inner css
You can write in your css file
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
this style will be appliced for all document, not only for div id="outside".
I use also this file to apply the default code : Normalise.css
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.
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>
I have the following CSS code. For some reason, the background-color is not working. can somebody pls help?
<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
.leftpane{
width: 20%;
height: 80%;
border-color: brown;
border-width: .25em;
border-style: double;
float: left;
margin-right: 1em
background-color: orange;
}
</style>
<title>Trying CSS </title>
</head>
<body>
<div class="leftpane">
hi hi hi
<br/>
</div>
</body>
</html>
You forgot to put semicolon after previous rule:
margin-right: 1em /* <------ ooops! */
background-color: orange;
Lack of ; makes parser ignore everything following after, so background-color: orange; is never considered.
semicolon is missing before the background-color, Please correct it, Give semicolon to
margin-right: 1em;
Try this using correct CSS syntax....
.leftpane {
width: 20%;
height: 80%;
border-color: brown;
border-width: .25em;
border-style: double;
float: left;
margin-right: 1em;
background-color: orange;
}
<div class="leftpane">
hi hi hi
<br/>
</div>
Inspite of setting all margins and padding to 0, I'm suddenly finding that processing my html & css using a Prepros, is adding extra (unwanted) space under my last item eg. footer. While running the same html & css directly from Notepad++, does not do this (thankfully). Can someone please explain why this is happening since I will eventually be using Prepos and running from a local host.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header
</header>
<div class="wrapper">wrapper1
</div>
<div class="wrapper">wrapper2
</div>
<footer>footer
</footer>
</body>
</html>
Here is the CSS:
html{
margin: 0;
padding: 0;
border: 3px solid green;
}
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}
header{
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}
.wrapper{
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}
footer{
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}
Here are images of the same code running, first from file:/// and the other from localhost:
(edit: addition)Is it possible that this has something to do with the prepros.cfg file that gets added by Prepros? I am also using a trial version of Prepros - could this be causing the issue? Would appreciate any clarification on this matter. NOTE: Above is the discrepancy in every browser i tried it on (Chrome, Firefox and Opera).