Issue
I've been trying to make the CSS buttons connected to the top but I cant figure anything out i made the code in w3 schools right here
the required result: 
and thats what im trying to do
Solution
Yes you can so first you need to remove that
<div class="btn-group">
<button class="notbutton">no text here ToTaLy No TeXt YAYAYAYAYAYAYAYA</button>
</div>
Than you add this
.btn-group {
top:0;
position: absolute;
width: 100%;
background-color: #282a35;
border-bottom: 8px solid #303740;
}
and also you remove this line from the css of .btn-group .button
border-bottom: 4px solid #303740;
Than you will basically have the following:
<!DOCTYPE html>
<html>
<head>
<style>
p, h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}
.btn-group {
top: 0;
left: 0;
position: absolute;
width: 100%;
background-color: #282a35;
border-bottom: 8px solid #303740;
}
.btn-group .button {
background-color: #282a35; /* Dark */
color: #ffffff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
border: none;
}
.btn-group .button:hover {
background-color: #000000;
}
.btn-group .notbutton {
background-color: #282a35; /* Dark */
color: #282a35;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: cursor;
float: left;
border: none;
border-bottom: 4px solid #303740;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body style="background-color:#1a1a1b;">
<form action="https://www.google.com">
<div class="btn-group">
<button class="button">Area</button>
<button class="button">Area1</button>
<button class="button">Area2</button>
</div>
<p style="clear:both"><br><br><br>the website</p>
</body>
</html>Answered By - Mbistami
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.