For some reason the button in the header changes size but the two in the main does not. Why does this happen and how can i fix it? When i inspect my site in the developer tools it shows that the width and height are being applied to the buttons but there is no visual change.
See code here:
https://codepen.io/Burning_Pancakes/pen/JjdNwWg
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dribbble Double</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<img id="logo" src="images/ball.svg" alt="ball"/>
<nav>
<ul>
<li>Home</li>
<li>Explore</li>
<li>Hire</li>
<li>Contact</li>
</ul>
</nav>
<a class="signup link" href="#">Sign Up</a>
</header>
<main>
<h1>Dribble Double</h1>
<p>Find & showcase creative work from the worlds best design professionals</p>
<a class="signup link" href="#">Sign Up</a>
<a class="link" id="learn" href="#">Learn More</a>
</main>
</body>
</html>
CSS:
/* CSS Document */
html, body {
margin: 0;
width: 100%;
height: 100%;
}
header {
height: 100px;
display: flex;
align-items: center;
padding: 0 12em;
}
#logo {
height: 50%;
}
nav {
margin-left: 3em;
width: 50%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
width: 25%;
}
a {
text-decoration: none;
color: #000;
}
.link {
height: 48px;
width: 140px;
}
.signup {
color: #fff;
background: #01D70B;
}
main {
height: calc(100% - 100px);
width: 100%;
}
Anchors with link class should have a display:inline-block; property in order to be affected by the sizes attributes (width/height).
change your .link styling
.link {
height: 48px;
width: 140px;
display:inline-block;
}
Related
I'm trying to figure out how to get the div topnav background color to fit the page width from side to side with no gaps. I hope you understand what I mean. if you need any more info just let me know.
Page showing gap:
HTML and CSS code:
body {background-color: burlywood;}
#heading1{position: relative; text-align: center; top: 50px;}
#topnav{background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%; height: 100%;
bottom: 80px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
About
sales
cart
home
</ul>
</nav>
</div>
</body>
</html>
put body { padding:0; margin:0; } in style
The problem is of not removing default margin of body which is causing space in left and right direction.
body { padding: 0; margin: 0;}
#heading1 {
position: relative;
text-align: center;
top: 50px;
}
#topnav {
background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%;
height: 100%;
bottom: 80px;
}
#topnav ul { margin: 0;}
#topnav li { display: inline-block; list-style-type: none;}
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
<ul>
<li> About </li>
<li> sales</li>
<li> cart</li>
<li> home</li>
</ul>
</nav>
</div>
There is also some syntax problem in the HTML part. Check the above solution which includes both removing of default space and HTML correction with styling.
If you want to mantain automatic margin and padding of body you can add this to #topnav
width: 100vw;
margin-left: -8px;
You also set to 0 margin and padding of body:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>
<style>
body{padding: 0; margin: 0;}
#heading1{position: relative; text-align: center; top: 50px;}
#topnav{background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%; height: 100%;
bottom: 80px;}
</style>
</head>
<body>
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
About
sales
cart
home
</ul>
</nav>
</div>
</body>
</html>
I cannot get hover to work on the dummy links in my CodePen. The cursor won’t even change to the hand icon. I am referring to the navigation bar, the dummy links do not work properly. Here is the CodePen
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
Your h1 tag is overlapping the ul tag
Solution is to add position:relative to your ul tag :)
Because Without any z-index value, elements stack in the order that they appear in the DOM and elements with non-static positioning ( relative ,absolute ..) will always appear on top of elements with default static positioning.
h1 : position:relative
ul : default static position
Adding position:relative will force your ul element to be on TOP.
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
position : relative ;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
I'm making a website from scratch and all I currently have is the NAV bar. But I figured I'd get this problem solved before I continue on with development. Anytime I minimise the browser, my nav bar will not stay in a straight line. I've included the code below. The text editor I use is Brackets, I've tried multiple things for the past week but nothing has worked.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 86.5%;
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 0.5%;
}
nav {
float: right;
position: relative;
top: 0px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 99px;
padding-top: 25px;
position: relative;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
You are probably looking for something like this.
When I'm stuck with a layout and I cannot get it right, I start by adding borders to each element. This way you see how each element is spaced on the page and based on that I start to tweak CSS properties to place items in its place. Obviously, the more you work with CSS the easier it gets. Once I'm happy with the layout I then remove the borders.
Adjustments I've made:
Made the header full width so it covers the entire width of the page
Gave the logo 20% width of the page.
The remaining space 80% is taken up by the menu
Then each list-item is allowed to take up 20%.
If you resize the page, you'll see that by using percentages it will assign space properly. I hope this helps you along and good luck with the rest of the page.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
border: 1px solid black;
}
.logo {
float: left;
width: 19%;
border: 1px solid blue;
}
nav {
float: right;
position: relative;
top: 0px;
width: 80%;
border: 1px solid yellow;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 20%;
margin: 1rem 0;
border: 1px solid red;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
I just started developing my first web page after learning HTML and CSS and I don't have much understanding yet.
The issue is, as mentioned, problem with centering. I have specified CSS property text-align: cetner; but that has no result.
Another thing I couldn't achieve is to expand link clickable area to whole button. I mean, wherever you click on a button, the browser should go to the URL from the link, I tried specifying width: 100%; with no success.
Below is my code:
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for the older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
Main Page
</li>
<li style="z-index: 9" class="hMenu">
About
</li>
<li style="z-index: 8" class="hMenu">
Calculator
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>
Just change your anchor element's display property to block:
li a {
display: block;
This way it will take up 100% of it's containing boxes width and your text-align property will take affect.
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for the older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
Main Page
</li>
<li style="z-index: 9" class="hMenu">
About
</li>
<li style="z-index: 8" class="hMenu">
Calculator
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>
You have to change this code block:
li.hMenu {
text-align: center;
display: inline;
background: red;
width: 33.33%;
width: calc(100% / 3);
float: left; }
So I recently started creating some Webpages in my freetime and I was wondering how I can create a list that normally has a distance of like 95 pixels to the its next element to automatically detect if the window you're using gets smaller and thus decrease the distance to a certain minimum. Another solution would be to enforce a minimum width for the webpage but I couldn't find a way to do that either. The current problem for me is that I have 2 headers, and whenever I make the page small enough, it creates a new line with 1 word of the 2nd header.
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito|PT+Serif+Caption|Heebo" rel="stylesheet">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class='header'>
<h1>This is my homepage welcome!</h1>
<nav id='nav'>
<ul>
<li>
<a href='#'>My Life</a>
</li>
<li>
<a href='#'>My Skills</a>
</li>
<li>
<a href='#'>My Hobbys</a>
</li>
<li>
<a href='#'>My Qualifications</a>
</li>
</ul>
</nav>
</div>
<div class='container'>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
border: 0;
}
.header {
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
text-align:center;
}
h1{
font-family: 'Heebo', sans-serif;
text-align: center;
text-transform: uppercase;
}
#nav {
height: 25px;
line-height: 25px;
width: 100%;
background: LightGrey;
position: absolute;
}
#nav ul li {
display: inline-block;
list-style: none;
}
#nav ul li a {
color: grey;
font-family: 'Heebo', sans-serif;
text-decoration:none;
margin: 50 ;
width: 500px;
}
.container{
height: 500px;
width: 100%;
background-image: url("https://wallpaperscraft.com/image/mountain_lake_landscape_reflection_86115_3840x2400.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Links are inline elements. Adding display: inline-block will make them have box model:
a {
display: inline-block;
width: 100px;
line-height: 100px;
background: #ccf;
text-align: center;
}
Link