I have an HTML button and I can't get the border to go away. I've tried border:none; along with on each of the clickable behaviors that it's managed. So on active, hover and focus adding outline: none; and border-line: none all still putting a black line around a button that is on an orange background image.
.gsbutton {
position: absolute;
float: left;
margin: -10px 183px;
align-items: right;
width: 135px;
height: 50px;
text-decoration: none;
display: inline-block;
background-image: url(https://i.stack.imgur.com/s5K46.png);
z-index: -1;
}
button[type="reset"]:focus, active, hover {
outline: none;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<!-- page bar header navigation tabs -->
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href="index.html">Home</a>
<a class="active" id="pricingheader" href="pricing.html"> Pricing</a>
<a class="active" href="product.html" > Products</a>
<a class="active" href="about.html"> About Us</a>
<a class="active" href="community.html"> Community</a>
</nav>
</div>
<button class="gsbutton"></button>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
<p></p>
</div>
<div class="mycolumn" id="content"><img src="">
</div>
</div>
</div>
</div>
you are not having button type as "reset", so this will not work. add border: none to button class that is .gsbutton
After the above change there is one more problem in your code, you are using "Position" : "absolute" , that is not needed at all. So you have to remove that. Because of this hover is not getting triggered.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.gsbutton {
float: left;
margin: -10px 183px;
width: 135px;
height: 50px;
text-decoration: none;
display: inline-block;
background-image: url(https://i.stack.imgur.com/s5K46.png);
z-index: -1;
}
.gsbutton:hover {
border : none;
}
</style>
</head>
<body>
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href="index.html">Home</a>
<a class="active" id="pricingheader" href="pricing.html"> Pricing</a>
<a class="active" href="product.html" > Products</a>
<a class="active" href="about.html"> About Us</a>
<a class="active" href="community.html"> Community</a>
</nav>
</div>
<button class="gsbutton"></button>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
<p></p>
</div>
<div class="mycolumn" id="content"><img src="">
</div>
</div>
</div>
</div>
</body>
</html>
try this
button[type="reset"]:focus, button[type="reset"]:active, button[type="reset"]:hover {
outline: none;
border: none;
}
Related
I want a responsive webpage using Bootstrap, with a vertical scrollspy on the left, with parallax scrolling on the right.
It should look something like this
Currently this is my code:
<!DOCTYPE html>
<html>
<head>
<title>Rwitaban Goswami</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body{
position: relative;
}
ul.nav-pills{
top:20px;
position:fixed;
}
.parallax{
min-height:300px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}
.parallaxsec{
background-image: url("DP.jpg");
}
.jumbotron{
margin-bottom: 0;
}
.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 60px;
text-align: center;
padding-top: 60px;
line-height: 100px;
}
p{
font-size: 20px;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="20">
<div class="container">
<div class="row no-gutters">
<nav id="scrollspy" class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active">Item 1</li>
<li> Item 2</li>
</ul>
</nav>
<div class="col-sm-9">
<div class="jumbotron parallax parallaxsec">
<h1 class="display-3">Rwitaban Goswami</h1>
</div>
<div>
<p>Text</p>
</div>
</div>
</div>
</div>
</body>
</html>
But this creates a layout which has too much white space, and the image width is very less. How do I get a preferable layout, with the scrollspy having no space to the left, and a good amount of width for the image and text?
remove the "container" attribute to the first DIV as this added too much padding for your taste.
so the above code looks like:
<div>
<div class="row no-gutters">
<nav id="scrollspy" class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active">Item 1</li>
<li> Item 2</li>
</ul>
</nav>
<div class="col-sm-9">
<div class="jumbotron parallax parallaxsec">
<h1 class="display-3">Rwitaban Goswami</h1>
</div>
<div>
<p>Text</p>
</div>
</div>
</div>
I'm trying to code dropdown menus for Bulma's navigation bar, but it seems to be having issues right now, can anyone help me find out why?
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Activity</a>
<div class="navbar-item has-dropdown is-hoverable" style="margin-left: auto; display: inline-flex;">
<a class="navbar-link"><i class="fa fa-user"></i> Dave Fox</a>
<div class="navbar-dropdown" style="left: initial; right: 0;">
<div class="navbar-item">
<div>
<small>Account Settings - Language</small>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
Here are my JS files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://holorp.com/assets/bulma/0.5.0/js/bulma.js"></script>
<script src="https://holorp.com/assets/holorp/2.1/js/holorp.js"></script>
and then I'm just using the default Bulma CSS
Have you tried this JavaScript?
I use this:
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Hover your mouse below the text below</p>
<div class="dropdown">
<span>Here!</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
I'm trying to design a responsive page.
This is how it looks like in a wide browser.
It changes to the ff. when I make it narrow:
What I want to happen is this:
This is my code for it:
/**For Eample Only So the Icons are Visible*/
.navbar-ct-blue {
background: #1B96BF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-piggy" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-cash" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-wallet" style="color: white;"></i>
</a>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
I have looked at these links, but I couldn't find the answer. Please help.
How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon
How to prevent a bootstrap navbar from collapsing when window resizing
Centering navbar buttons in bootstrap
You're seeing this happen since the nav-justified class only uses display:table-cell above 768px:
#media (min-width:768px) {
.nav-justified > li {
display: table-cell;
width: 1%
}
Here are two examples that solve this:
Using nav-justified:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<span class="pe-7s-piggy"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-cash"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-wallet"></span>
</a>
</li>
</ul>
</div>
</nav>
Using the Grid:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
margin: 0;
}
.navbar.navbar-ct-blue .nav-row span {
color: white;
padding: 20px 0;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-row span:hover {
color: #00F2FF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation">
<div class="container">
<div class="row nav-row text-center">
<div class="col-xs-4">
<span class="pe-7s-piggy"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-cash"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-wallet"></span>
</div>
</div>
</div>
</nav>
To give the <li class="navbar-nav"> is obviously wrong. Removing that could fix it. Additionally, as Tasos said inline-block for the list item should do it. Sure, look in the corresponding media query.
Here is a JSfiddle with the code to my problem:
https://jsfiddle.net/367v2n1q/14/
On the right you will see a red bar which has a fixed position. I'm trying to get the body to have a min width of 808 pixels, but it is letting me re-size the body to smaller than 808.
The center div stops shrinking when it hits 808 pixels wide, but then the fixed div on the right keeps on going and envelops the rest of the content.
CSS
body.total{
background-color: black;
position: relative;
min-width: 808px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
HTML snippet
<!DOCTYPE html>
<html>
<head>
<!-- head stuff here -->
</head>
<body class="total">
<div id="wrapper" class="leftSidePane">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="mainContent">
<h1>
WWW.SITE.COM
</h1>
<h2>dedicated to stuff</h2>
<p style="text-align: center;
color: #5D5D5D;">last updated: 01.01.2016</p>
<br>
<p style="
font-family: 'Times New Roman';
color: #C1C1C1;
font-weight: bold;
font-size: 20px;
text-align: center;
">Site visited 27 times</p>
<br><br>
<hr>
</div>
</div>
<div class="rightSidePane">
<!-- Side bar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand-right">
</li>
<li>
<a href="#">
</a>
</li>
<li>
<div class="barfix"></div>
</li>
<li class="board">
</li>
<li class="nextBar">
</li>
<li>
<div class="tileRightInit" id="bs">
<div class="barTextRight">MAIN</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">News</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Links</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Credits</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">About</div>
</div>
</li>
<li class="bottomRight">
</li>
</ul>
</div>
</div>
</body>
</html>
I figured out the problem. I needed to be using absolute positioning for the div on the right. Here is the fixed JS fiddle: https://jsfiddle.net/367v2n1q/15/
Here is the fixed CSS:
body.total{
background-color: black;
position: relative;
min-width: 840px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
The HTML remained the same. Thanks #Roope for pointing out that the body never fell below 808px width, I don't know why I didn't catch that but you pointed me in the right direction.
I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!
I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}