I'm trying to code a simple website with a navbar under the header. The problem is that the position of the navbar elements is directly influenced by the length of the header element, but only when the header element has a float:left css rule.
The two elements are in separate divs and don't share any css rules.
I've already tried using justify-content, align-items, margin: auto etc. It seems as if the only way to fix the issue is to remove the float:left rule from the header text, but I need to keep it.
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
<title>Lewis</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header-bar">
<h1>Lewis' Website</h1>
<img src="images/headericon.jpg" />
</div>
<div id="navbar">
<nav>
Home
About
Posts
</nav>
</div>
</form>
</body>
</html>
css
#header-bar img {
width: 150px;
height: 150px;
border-radius: 50%;
padding-right: 10%;
padding-left: 10%;
}
#header-bar h1 {
font-family: Arial;
font-size: 70px;
color: white;
padding-left: 10%;
float: left;
}
#navbar {
background-color: white;
margin: 0px;
}
#navbar nav a {
font-size: 35px;
margin: 0 15px;
}
Here is your CSS now fix it as per your design requirement.
#form1 {
display: flex;
justify-content: space-between;
align-items: center;
}
Related
So, I'm making a website and in the navbar, I floated some of the links to the right. However, when I do this, the links leave the vertical center and drop downwards. When I apply padding though, nothing happens. I know there are other versions of this question on Stack Overflow, but I've tried the answers and they don't work. Here's my code
/* Start Variables */
:root {
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper {
width: 100%;
padding: 2% 10%;
box-shadow: 5px 10px 8px #888888;
}
.leftside {}
.rightside {
float: right;
}
.options {
text-decoration: none;
margin-bottom: 20%;
}
.linkhome {
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-bottom: 20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Food
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
Any help is greatly appreciated
Thanks!
Make your .navbar-wrapper a flexbox.
.navbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
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
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I want to remove the blank between MY WEB and With HTML, CSS, and Javascript.
I tried fixing paddding, margin, and width/height but nothing seemed to work.
How can I customize the size of the empty space?
.title {
font-family: 'Secular One', sans-serif;
font-size: 100px;
text-align: center;
margin-top: 150px;
color: white;
}
body {
background-color: #192a75;
}
.description {
color: white;
text-align: center;
padding-bottom: 50px'
}
.button {
font-family: 'Sen', sans-serif;
background-color: white;
font-size: 20px;
width: 150px;
height: 55px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Secular+One&family=Sen&display=swap" rel="stylesheet">
<title>My Web</title>
</head>
<body>
<div class="title">
<p>MY WEB</p>
</div>
<div class="content">
<div class="description">
With HTML, CSS, and Javascript
</div>
<div class="button">
CONTINUE
</div>
</div>
</body>
</html>
Acutally <p> tag inside class "title" is having some default margin. So you just need to add following code in CSS file
.title p{
margin: 0px;
}
Check out the following JSFiddle link https://jsfiddle.net/qzuca28w/
How do I position certain elements, like headings, horizontal rows, etc so they are in the position I want them to be. It's quite difficult to explain, but here's an example so you can understand.
I have my basic logo placed in the top left (it's a template logo for now) on the same line, or same "position" I need it to be placed directly opposite the logo on the other side of the page. Only problem is that it appears below my logo.
Here's an example of how I expect it to be:
https://gyazo.com/b904252fa22783b78e820d57318798cc
This is how it really is:
JSFiddle: https://jsfiddle.net/seesqz9u/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<a href="http://www.steamcommunity.com/login/">
<h3 style="float: right; position: fixed;">SIGN IN WITH STEAM</h3>
</a>
<div class="navbar">
<ul>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Content which uses float: right; should appear before left content in the HTML.
In other words, move your <h3> tag above the div containing the logo, and remove the position property, it's not necessary.
You should also change the order of the tags -- <h3><a> rather than <a><h3>
<body>
<h3 style="float: right;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
updated filddle
You have put the logo in a div element.
The div element will take the complete row and will not allow any other element to come beside it. (in css terms it is a block element)
Either keep the logo in span element orelse add css in your logo div and make it display as inline-block
display: inline-block;
I need some help with my styling. I'm trying to get a nice looking website, but I just can't seem to do it. I've tried floats, but to no avail. I want to to have the look of the 'Aspen Development' as the brand name, and then have my buttons on the right side of the div. Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aspen Development | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navMenu">
<div id="header">
<div id="brand">Aspen Development</div>
<ul>
<li class="navButton">Home</li>
<li class="navButton">Pricing</li>
<li class="navButton">Contact Us</li>
</ul>
</div>
</div>
<div id="content">
<div id="contentContainer">
<p><b>4.21.14</b> Welcome to Aspen Development.</p>
<p><b>4.19.14</b> The website has been created!</p>
</div>
</div>
<div id="footer">
<center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright © 2014 Aspen Development | All Rights Reserved</p></center>
</div>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
}
#navMenu, #footer {
width: 100%;
height: 50px;
background-color: #F8F8F8;
border: 2px solid #E6E6E6;
}
#header {
width: 1140px;
height: 50px;
margin: 0 auto;
text-align: right;
}
#brand a {
display: block;
width: 175px;
padding-top: 12px;
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
color: black;
font-size: 1.25em;
text-align: justify;
text-decoration: none;
}
.navButton {
display: block;
width: 175px;
padding-top: 12px;
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
color: black;
font-size: 0.75em;
text-align: justify;
list-style: none;
}
#content {
width: 100%;
}
#contentContainer {
width: 1140px;
margin: 0 auto;
}
#contentContainer p {
margin: 20px;
}
Thanks in advance. :)
Add this CSS classes :
ul{
float:right;
}
#brand {
float:left;
}
Add to .navButton:
display: inline-block;
And add to #header :
overflow:hidden;
Also replace :
width: 1140px;
with
min-width: 1140px;
width: 100%;
in #navMenu, #footer and #header.
Check Fiddle
why don't you easily use float: left and float: right as long as you have given height to your header.
#brand{
float: left;
}
.navButton {
float: right;
}
Its an easy problem. You messed up the css bad. Here is the link and to the changed css and HTML.
Hope it helps... i have updated the css using element id try not to do that, always use classes for css unless you have a really good reason not to.
I've created a fiddle to help you fix the issue.
Use float: left in .navButton class and add clearfix class to the ul containing the .navButton elements. the style definition for the clearfix class is also written in the fiddle. Please try and let us know.