When I zoom in or out my element is moving and I've tried every code I know but it's still the same, so I've posted my html and css code and I hope you can help me. I have this problem with every element I put in my page
<!DOCTYPE html> //html code
<html>
<head> // head tag
<title></title>
<link rel="stylesheet" type="text/css" href="untitled2.css" /> //css link
<meta http-equiv="content-type" content="text/html":charset-windows-1256">
</head>
<body>
<div id="menu"> // div for menu
<ul>
<li>link</li>
<li>link</li>
<li>link</li> // ul li
<li>link</li>
<li>link</li>
</ul>
</div>
</body>
</html> // closing html
// css
body {
background-image: url('3.jpg');
background-position: top center;
background-repeat: no-repeat;
background-size: 100% ;
width:100%;
height:100%;
min-width:600px; //body attribute
max-width:2000px;
margin:0px;
padding:0px;
}
#menu{
margin-top: 380px;
padding: 0px;
background-color:#555258; //menu attribute
width:2500px;
}
Why are you setting the width and height to 100% and also setting min and max width? If you are trying to make sure it will look right regardless of the device used to view your site, look at this tutorial.
http://www.dwuser.com/education/content/responsive-design-a-crash-course-and-demo/
I'm making a wild guess here, because it's not clear to me what you want to achieve, but I hope something is helpful.
I'll start from a blank slate.
/* Styles go here */
.menu {
background-color: grey;
text-align: center; /* Center text */
}
.menu li {
display: inline-block; /* Place the list items on inline (on the same row) */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
Is this a good start?
Related
Here in the below code i am trying to put my contact section to the right in the header section .Also i have tried using float to right but it is not working in this section.
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think it can help you.
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think if you want a colorful themed type you can use this
.header {
padding: 80px;
text-align: left;
background: #1abc9c;
color: white;
}
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
Float is not intended for styling purpose. Its a mis-used hack. float is for floating images within a paragraph.
The modern approach is to use flexbox: .header { display: flex; }
to move the contact element to the right, you have to give it a margin: auto;. this will make it consume all remaining space. You can target the contact element with: .header span:last-of-type.
On a sidenote, do not use spans but take an <ul> for a navbar like the sample below:
nav ul {
display: flex;
list-style: none;
padding: 0;
}
nav ul li {
margin: 5px;
}
nav ul li:last-of-type {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li>Logo</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
<style>
ul:nth-child(2){
float: left;
position: fixed;
width:auto;
}
nav>ul li{
border: 1px solid gray;
padding: 25px;
}
</style>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul>
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
I have navbar floated in left and positioned fixed with css but when I add hr tag bellow header, navbar and each li inside navbar taking full width with border, navbar is missing float left and also missing position fixed. why??
Of course, ul will not have CSS anymore because you are targeting ul:nth-child(2) and after adding hr it should be ul:nth-child(3)
ul:nth-child(3){
float: left;
position: fixed;
width:auto;
}
nav>ul li{
border: 1px solid gray;
padding: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul>
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
Suggestion:
I'm not aware of your full code but In your case, you don't have to use nth-child you can easily use ul or consider adding a class to your ul (which is better) then target it in your CSS, here is an example:
ul.nav-items {
float: left;
position: fixed;
width:auto;
}
nav>ul.nav-items li{
border: 1px solid gray;
padding: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul class="nav-items">
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
I'm confused in this specific part of code. If anyone could explain to me, it'd be greatly appreciated!!
I'm making a navbar and it looks like this:
This is part of the CSS I'm confused about:
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header::after{content:" "; display:table; clear:both; }
So my question is the background color in the pic would disappear without this part of code and I don't understand why, esp the display:table and clear:both. I do have logo and the li part float on both sides and clear:both doesn't stop them from floating and the background color would still show. I'm confused as why it's there and how display and clear both would affect the background color. Thanks!!
It is because you have floated all the content of header. This is like giving them all an absolute position and removes them from the flow of their parent which means the parent container, with no other content, will act as if it is empty. You could also give the header a height to see the background color, however, that might make it harder to adjust based on the content wrapping.
The CSS in question adds some content via the ::after's content prop. Then you clear the floats to make the content be seen by header, which is technically it's parent. The display table could be display block as well. It just makes sure that the after acts like an element would if it were placed in the html. But instead you are faking it with CSS.
I'm doing a college course in the UK and I need to create a website using HTML and CSS. The navigation bar on the website looks fine but when I hover over it, there are empty bars that highlight and appear clickable when there is no text anywhere and it is really bugging me, any suggestions on how/why they have appeared?
the issue presented visually here
I have zero clues what the issue might be since I followed a video that was uploaded years ago and the channel hasn't been active in a long while so I haven't bothered commenting, hence me coming here.
This is the CSS I have for the nav bar.
body {
margin:0;
padding:0;
background:#ccc;
}
.nav ul {
background-color:#344629;
text-align:center;
padding:0;
margin:0;
}
.nav li {
display: inline-block;
}
.nav a {
text-decoration:none;
color:white;
width:100px;
display:inline-block;
padding:10px 10px 10px 0px;
font-size:17px;
font-family:Helvetica;
}
.nav a:hover {
background:#5e9342;
transition: 0.4s;
}
This is the HTML code.
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Welcome To Lanarkshire</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Gallery</li>
<li><a href="#">Attractions</li>
<li><a href="#">Food & Drink</li>
<li><a href="#">Contact Us</li>
</ul>
</div>
</html>
I obviously want only the text boxes to be highlighted and clickable.
Closing your anchor tags will likely resolve your problem. Flavio had it right in the comments...
As in:
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Attractions</li>
<li>Food & Drink</li>
<li>Contact Us</li>
</ul>
I've been trying for the past two hours to get rid of this gap and I've still had no luck :( Any help would be greatly appreciated. I have already correctly linked normalise.css, anytime I try making the margin of the body/header/footer 0 the hr line simply wont move over to the left and neither will the text, it's also making my logo appear slightly off centre as well which is annoying. I have included a picture of what the website looks like for me when I run it.
PICTURE OF SITE
a {
text-decoration: none;
}
img.center { /* Centering and styling the logo */
display: block;
margin: auto;
width: 7%;
padding: 0;
}
ul { /* Removing the bullet-points and styling the nav bar */
list-style: none;
}
li {
float: left;
}
hr {
height: 6px;
background-color: #000000;
padding: 0;
margin-left: -8px
margin: -8px;
margin-bottom: 2px;
}
head {
margin: 0;
}
body {
margin: 0;
}
footer {
margin: 0;
}
<!DOCTYPE html>
<!-- Declaring the document type -->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/normalise.css"> <!-- creating link element to the normalise.css file -->
<link rel="stylesheet" type="text/css" href="CSS/main.css"> <!-- creating link element to the main.css file -->
</head>
<body>
<header>
<img src="LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo -->
<nav> <!-- indicates that page navigation follows -->
<ul> <!-- Unorderd list of elements -->
<li>About Us</li> <!-- Link to About Us page -->
<li>Venues</li> <!-- Link to Venues page -->
<li>Home Page</li> <!-- Link to Home Page -->
<li>Artists</li> <!-- Link to Artists page -->
<li>Contact Us</li> <!-- Link to Contact Us page -->
<hr/> <!-- horizontal line across page -->
</body>
</html>
There are two issues at play here - first the li's are being floated, but the float isn't being cleared - so the hr is sitting in a displaced position. I corrected this by adding a clear:both style rule to the hr.
The other issue is that the ul has padding applied to it by the browner - so i explicitly set the ul padding left to 0. I also added a margin-right to the li's but you may want to use flex to space them out evenly.
a {
text-decoration: none;
}
img.center { /* Centering and styling the logo */
display: block;
margin: auto;
width: 7%;
padding: 0;
}
ul { /* Removing the bullet-points and styling the nav bar */
list-style: none;
padding-left:0;
}
li {
float: left;
margin-right:15px
}
hr {
height: 6px;
background-color: #000000;
padding: 0;
margin-left: -8px
margin: -8px;
margin-bottom: 2px;
}
head {
margin: 0;
}
body {
margin: 0;
}
footer {
margin: 0;
}
hr {clear:both}
<!DOCTYPE html>
<!-- Declaring the document type -->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/normalise.css"> <!-- creating link element to the normalise.css file -->
<link rel="stylesheet" type="text/css" href="CSS/main.css"> <!-- creating link element to the main.css file -->
</head>
<body>
<header>
<img src="LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo -->
<nav> <!-- indicates that page navigation follows -->
<ul> <!-- Unorderd list of elements -->
<li>About Us</li> <!-- Link to About Us page -->
<li>Venues</li> <!-- Link to Venues page -->
<li>Home Page</li> <!-- Link to Home Page -->
<li>Artists</li> <!-- Link to Artists page -->
<li>Contact Us</li> <!-- Link to Contact Us page -->
<hr/> <!-- horizontal line across page -->
</body>
</html>
Try using *{margin:0; padding:0;} which will reset all the extra margin and padding from all elements on your site. And then only WHEN you need them to be styled, you add something, this would be a good practice! But you can probably do something like html{margin:0; padding:0;} which should also be enough for the border around your page. Even if it doesn't solve your issue, it is a good practice to implement what I wrote here.
Also to avoid similar issues in some browsers it is good practice to implement every single detail of your doctype and html tag such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ... </html>