This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
White space at top of page
(12 answers)
Closed last year.
I'm currently making a test site, but constantly keep getting a white border on the top and right of the screen: Example. I've tried to use: position: fixed but that didn't work. Here is my code:
.Main-Header {
font-size: 60px;
font-family: Garamond, Serif;
color: #818181;
background-color: #111;
margin: 0px 0px 0px 120px;
padding-left: 20px;
padding-top: 0px;
border-top: 0px;
}
.sidenav {
height: 100%;
width: 130px;
position: fixed;
top: 0px;
left: 0px;
background-color: #111;
padding-top: 25px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 130px;
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.pic1 {
padding-left: 30px;
padding-bottom: 15px;
}
<!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>Test 1</title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="Main-Header"><em>Test Site</em></h1>
<div class="sidenav">
<div class="pic1"><a class="active" href="test.html"><i class="fa fa-home"></i></a></div>
About
Services
Clients
Contact
</div>
<div class="main">
<br>
<p>index</p>
</div>
</body>
</html>
Add the following CSS rule :
body {
margin: 0;
}
See this answer for more details.
Add the basic CSS reset By adding -
* {
margin: 0px;
padding: 0px;
}
By default CSS adds a margin and padding of 16px by adding the above CSS it will remove the margins and paddings of 16px
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Yellow Area is where i want the Logo ("Life's Good")
You are missing a number next to px in margin-top of #main. You may also want a margin-left value.
If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.
.btn:before:not(#main)
Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.
Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
This question already has answers here:
Setting a width and height on an A tag
(6 answers)
Closed 2 years ago.
I have a very simple HTML file with some styles given to it, but for some reason I can't change the width of the links inside of the div, I tried it with width, max-width, min width and with some different containers such as an unordered list, but no matter what, they stay the same size.
body {
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0px;
padding: 0px;
height: 10%;
text-align: center;
}
a:visited,
a:link {
color: #ffffff;
border: 2px solid black;
text-decoration: none;
}
a:hover {
color: #30cc00;
background-color: #003333;
<div id="navbar">
Home
Gedichte
Bücher
Aktuelles
Kontakt
</div>
the a tag is an inline element. change it to inline-block and set width. However, if you are just trying to get more space between the links you might want to consider using flexbox.
body {
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0px;
padding: 0px;
height: 10%;
text-align: center;
}
a{
display:inline-block;
width:100px;
}
a:visited, a:link {
color: #ffffff;
border: 2px solid black;
text-decoration: none;
}
a:hover{
color: #30cc00;
background-color: #003333;
}
<!DOCTYPE html>
<html lang="de" dir="ltr" style="background-color: #002050; color: #ffffff;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stihi</title>
<link rel="stylesheet" href="index.css">
<script defer src="index.js"></script>
</head>
<body>
<div id="navbar">
Home
Gedichte
Bücher
Aktuelles
Kontakt
</div>
</body>
</html>
You just need to add in your element Home
display: block;
or
display: inline-block;
source: Setting a width and height on an A tag
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}
i'm working on doing a website and i can't seem to make my css apply and everything appears as plaintext to the side. i've been searching for over an hour, i can't figure out what i've done wrong.
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100%
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
here's the full text
You've missed the closing } in .sidenav. Because of this, all of the styles that come after this do not get applied. Adding this in correctly applies the styles that follow it.
In addition to this, you've also missed the closing > in your <meta name>, meaning your Google Font is not getting applied either.
Finally, your colours all have five characters. You either need to use 3 letters (shorthand) or 6 characters for the full hex value.
You can avoid these mistakes by validating your code with the W3 Markup Validation Service.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100% width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111 overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: 'Opens Sans Condensed', sans-serif;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #cccccc;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
img.center {
display: block;
margin: 0;
}
h1 {
font-size: 25px;
font-family: 'Jura', sans-serif;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<h1>SOLAR RECORDS™</h1>
<div style="text align: center"><img src="the.png" alt="Records"></div>
<div id="mySidenav" class="sidenav">
×
HOME
RELEASES
ARTISTS
EVENTS
MIXES
NEWS
LABEL
CONTACT
</div>
<span onclick="openNav()">OPEN</span>
</body>
</html>