I've looked through related questions/answers and haven't figured out why this is happening, but my "navbar" continues to extend all the way to the right of my web page. I tried to remove irrelevant code from this post. Any suggestions would be appreciated!
HTML
html, body, h1, h2 {
padding:0;
border:0;
margin:0;
line-height:1;
}
body {
padding: 20px 20px 20px 20px;
}
.navbar {
background-color:#ffcc66;
position:fixed;
top:0;
width:100%;
text-align:center;
overflow:hidden;
border-radius:25px;
border:4px solid black;
}
.navbar a {
text-decoration:none;
color:black;
padding:10px;
}
.navbar a:hover {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Paiting, Maintenance, Bloomington">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Flying Fish Painting Company </title>
</head>
<body>
<div class="navbar">
Home
Services
Contact
Photo Gallery
Reviews
</div>
Just Add left: 0; and box-sizing: border-box;
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
html, body, h1, h2 {
padding:0;
border:0;
margin:0;
line-height:1;
}
body {
padding: 20px;
}
.navbar {
background-color:#ffcc66;
position:fixed;
top:0;
width:100%;
text-align:center;
overflow:hidden;
border-radius:25px;
border:4px solid black;
left: 0;
box-sizing: border-box;
}
.navbar a {
text-decoration:none;
color:black;
padding:10px;
}
.navbar a:hover {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Paiting, Maintenance, Bloomington">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Flying Fish Painting Company </title>
</head>
<body>
<div class="navbar">
Home
Services
Contact
Photo Gallery
Reviews
</div>
Related
I want the main section of the page to be horizontally centered and to have varying top and bottom margins. I can center the section with margin-left: auto; margin-right: auto; but I can't set the top and bottom margin. The main section is using .main-content class. Please have a look.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background-color: rgb(14, 18, 43);
}
header {
margin-top: 2em;
margin-bottom: 2em;
}
h1 {
text-align: center;
color: rgb(228, 228, 228);
font-family: 'Courier New', Courier, monospace;
}
.main-content {
display: block;
width: 600px;
background-color: antiquewhite;
margin-left: auto;
margin-right: auto;
margin-top: 500;
}
<!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>Krazuescode.com</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>UINASHIoAMS.COM</h1>
</header>
<section class="main-content">
Related searches
<div>Software to Manage Remote Employees</div>
<div>Mobile Device Management for Ios</div>
<div>Mobile Device Management for Ipads</div>
</section>
<footer>
<span>Copyright © 2022</span><span>|</span>
Privacy Policy
</footer>
</body>
</html>
You forget add a px to 500
.main-content {
display: block;
width:600px;
background-color: antiquewhite;
margin: 500px auto;
}
More info you can find here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin
I can't display text after the icon. I tried to use float but isn't working.
Can u help me to solve it please? I can't find the solve on google, i tried this before asking
CSS File:
*{
margin: 0;
padding: 0;
}
header{
height: 70px;
background-color: darkgrey;
width: 100%;
}
i{
margin-top: 15px;
margin-left: 15px;
padding: 0px 3px 0px 3px;
border-radius: 10px;
border-style: solid;
border-spacing: 10px;
}
i:hover{
background-color: grey;
}
HTML File:
<!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>Titlu</title>
<script src="https://kit.fontawesome.com/768cd38b76.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<i class="fas fa-bars fa-2x"></i>
<h1>Titlu</h1>
</header>
</body>
</html>
display: flex;
align-items: center;
Just add that to the class and it should solve your problem. You can also remove margin-top in the "i" class to make you design neater.
I am building a simple webpage. The text is displaying correctly but the icon is not displaying. The icon is from ionicons framework.
I checked ionicons.min.css path and icon name in this css file
My html file:
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="icons/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
My css file:
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
Icon should be visible
Go through it. it will work for you, because there is font-family files not found in your css
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
I am slightly new to html and css and want to create my own portfolio. I have some problems with the classes though. Whenever I try to call them in css it doesn't seem to do what its supposed to do.
When I call it without using classes it works perfectly fine.
Hope somebody can help and find my mistake,
thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE
Changed css but still doesn't work.
This class won't work.
You pointed to the link with class header_nav. But you don't have it.
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
It should be (link inside the class .header_nav)
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE:
I've included the snippet. Is it what you want?
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
UPDATE 2
Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.)
.header_nav a {
font-family: arial;
display: block;
color:white!important;
text-align: center;
padding: 14 px 16 px;
text-decoration: none!important;
}
I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,
.header_nav li { your styles }
.header_nav a { your styles }
Make the following changes:
From
a.header_nav {
}
To:
.header_nav a {
}
and also you can make change to html for easiness
body{
background-color: #f1f6fe;
}
ul.header_nav_container {
float:right;
padding: 20px;
}
ul.header_nav_container li.header_nav {
list-style-type: none;
float: left;
padding: 0 20px
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav_container">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
If class doesn't work you can specify ids and pass the styles similarly
I am trying to hide one of the images, it does hide one of the images but it leaves a border around the image that suppose to be there if its not hidden. in other words i want the hidden image to be behind the visible image. i hope i am clear
http://jsfiddle.net/47Vab/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" />
<title></title>
</head>
<body class="body">
<div class="box">
<div class="imgs">
<img id="Img2" src="IMG/2.jpg"/>
<img id="Img1" class="hidden" src="IMG/1.jpg"/>
</div>
</div>
</body>
</html>
body{
background-color:#F0F0F0 ;
color:#000305;/*font color*/
font-size: 87.5%;/*87.5% out of 14px*/
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
.body{
margin:0 auto;
width:70%;
clear:both;
}
.box{
background-color: yellowgreen;
margin:50px auto;
width:80%;
height:auto;
border-style:solid;
border-width:5px;
border-color: black;
}
.imgs{
margin:50px auto;
width:80%;
border-style:solid;
border-width:5px;
border-color: black;
}
img {
max-width: 100%;
display: block;
}
.hidden{
visibility : hidden;
}
Try display: none instead of visibility: hidden.
visibility: hidden hides the image but retains it's space. Where as display: none hides it and does not take up any space.
Fiddle