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.
Related
I've been trying to absolutely position my navigation at the bottom right of its parent div (header>nav>menu) and i'm a little lost. Help would be appreciated!
I've been trying to relatively position its parent div, but each property i try, it either disappears from the browser, aligns all the way at the bottom right of the page and not its parent div, or somewhere else i'm not wanting it to go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="images/logo.png" / id="logo">
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
body {
margin:auto;
width:960px;
}
.logo {
display:block;
float:left;
width:242px;
height:141px;
margin:0px;
}
#header {
position:relative;
height:100%;
}
#nav .menu {
position:absolute;
bottom:0px;
right:0px;
margin:0px;
padding:0px;
float:right;
}
#menu ul {
list-style:none;
}
#menu li {
display:inline;
float:left;
}
#menu a {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,a:active
{
background-color:#7A991A;
}
you define in your css nav is a tag element not id or menu is a id not class Please change to your css and define as like this
Change to this
#nav .menu
into this
nav #menu
Demo
You made some mistakes,
you use #header in css but you don't put id header to the <header> tag,
you use #nav in css instead of nav tag because there is no id in nav tag,
#header height is 100%. it will take the height of parent. put height:auto; so that it will take only the height it need to fit its content.
I made a JSFiddle. please check. hope this will solve your problem.
http://jsfiddle.net/banded_krait/Q4Zjj/
(No answers have worked as of yet, please keep answering)
http://gyazo.com/952d354b05e4a4a4cef08e74f8b0253d
http://gyazo.com/e8cc5ae0bcd0464eb074c4674d2896fb
As you can see from these images, I have created the navbar for my website but my website is too wide, it means that you have to scroll to reach the end of it, how would I change the width so it only goes up to the end of the navbar?
That is all my CSS for the navbar that I have used:
#title {
position:relative;
margin:17px 1680px 30px 15px;
}
#banner {
border:1px solid #4A4A4A;
width:1903;
height:110;
background-color:#4A4A4A;
margin-left:0px;
position:absolute;
top:-10px;
border-radius:15px;
}
#navbar {
position:fixed;
left:50%;
margin-top:2px;
}
ul {
list-style-type:none;
margin:-115px;
}
li {
display:inline;
padding:9px;
border:4px solid;
font-family:Bebas;
font-size:25px;
font-weight:bold;
color:#FFFFFF;
border-radius:10px;
background-color:#000000;
margin-left:2.5em;
}
This is my HTML code aswell:
<html>
<head>
<link type="text/css" rel="stylesheet" href="todd.css"/>
<title>Home</title>
</head>
<body bgcolor="#ABABAB">
<div>
<div id="banner">
<img src="file:///C:/Users/Todd/Desktop/Todd.png" id="title">
<div id="navbar">
<ul>
<li>Home</li>
<li>Not Finished</li>
<li>Not Finished</li>
<li>Not Finished</li>
<ul>
</div>
</img>
</div>
</div>
</body>
</html>
A couple things I see here...
Your navbar has this line:
width:1903;
If you don't want the navbar to be so wide, you should shrink this way down.
Additionally, if you want to keep the site from expanding so wide, you can also set the width for the html and body tags, like so:
html, body {width: 1024px}
Hopefully that helps...
EDIT
At second glance, I see your margin is also set very wide here:
margin:17px 1680px 30px 15px;
Shrinking the 1680 down will keep the bar from expanding so wide. This appears to be the main cause of your title bar extending out so wide.
If you use min-width the size of the page should minimise in order to fit all the content in.
#banner {
min-width: 1903px;
}
below is the sample of my websites navigation div
when i reduce the size of the window the other links gets on next line instead of being fixed to therir postion.here is the cose and css.
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id=navigation>
<ul id="navigation-bar">
<li>Home</li>
<li>Gallery</li>
<li>Images</li>
<li>Softwares</li>
<li>Contact</li>
<br><br>
</ul>
</div>
</body>
</html>
and here is the css
div#navigation {
width:100%;
background-color:#000;
border-top:2px solid #5d6869;
border-bottom:2px solid #5d6869;
}
#navigation-bar {
list-style: none;
margin: 0px;
}
#navigation-bar li {
display: inline;
float: left;
}
#navigation-bar li a {
padding: 0em 1em 0.08em 1em;
text-decoration: none;
color:#fff;
font-size:1.8em;
}
#navigation-bar li a:hover {
text-decoration: none;
color:#fff;
background:#5d6869;
}
can anyone help me whats the reason?
It's because your li elements are floated left. Floated elements, when the parent's width is not wide enough to fit, automatically move to the next line. It's their built in behavior
If you want them to stay on the same line and be hidden when the parent is not wide enough, you can give them display:inline-block and give the parent a set height, say height:35px;, and also give the parent overflow:hidden;
Demo Here of that approach
EDIT based on your comment below
In that case, give the parent a min-width. Demo here
I realise vertically centring is a topic which comes up often on here and other websites but I'm still new to HTML and even after reading up on this topic I'm still confused.
I've tried making a simple header element for a website which contains an h1 title and a nav ul for the navigation links. Here is the html:
<!doctype html>
<html>
<head>
<title>Sample website</title>
<link href="css/homepage.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Website Title Here</h1>
<ul>
| <li>Home</li> |
<li>About me</li> |
<li>Contact me</li> |
<li>My blog</li> |
<li>My portfolio</li> |
</ul>
</header>
<hr class="hrstyle" style="clear:both;"/>
</body>
</html>
And the respective CSS:
header{
max-width: 1000px;
margin:auto;
}
h1{
font-family: Helvetica;
float: left;
padding:0;
}
ul{
display: inline-block;
float: right;
padding:0;
}
li {
font-family: Helvetica;
font-variant: small-caps;
list-style-type: none;
display: inline;
}
.hrstyle{
max-width:1000px;
}
I'm trying to get the h1 title and nav list to line centre align to one another vertically. Currently it looks like this...
With the nav element appearing at the top of the header.
I've read numerous things but I'm hesitant to just blindly copy code from the internet without fully understanding it.
Try line-height. Add this to your ul in your CSS
ul {
...
line-height: 40px;
}
Tweak the number to your desire.
Here's a little tutorial for you on different vertical centering techniques. I'll keep adding to this. But it might illustrate for you how elements react to different styling.
Codpen example on padding and line-height
For your ul add this:
ul{
...
position:absolute;
top:25px;
right:0px;
}
Position absolute allows you to control the position of the element from the sides. So push it a certain amount from the top and 0 from the right. This will produce what you described.
Here is the fiddle:
http://jsfiddle.net/AnPkT/2/
I am building a very simple webpage that has a header, a left-hand navigation box and some content, and a footer. It's using CSS to control the layout. It works fine if the text in my content area is short, but if the length of the text gets too long (i.e. in almost all cases) the content area drops below the navigation box rather than sitting nicely up next to the navigation.
The HTML looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en-GB">
<head>
<title>Title Goes Here</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<!-- local style sheet -->
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrapper">
<div id="navigation"><!-- Navigation -->
<ul>
<li>Navigation</li>
<li>Options</li>
<li>Go</li>
<li>Here</li>
</ul>
</div><!-- Navigation end -->
<div id="content"><!-- Main Content Area -->
<h2>Your Content Goes Here</h2>
<p>Whatever content you like can go here but if the text is too long it seems to
break the floating of the content and ends up below the navigation div.
This is really very annoying and I'd love to know how to fix it.</p>
</div><!-- Main Content Area end -->
</div>
<div id="footer">
<ul>
<li>Some</li>
<li>Footer</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
and the CSS looks like this:
body {
background:#000;
-webkit-background-size:1920px 1200px /* dimensions of graphic */
font-family:helvetica,arial,sans-serif;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
width:100%;
}
#header, #wrapper, #footer {
width:100%;
}
/* Header styles */
#header {
clear:both;
float:left;
}
/* main container that wraps the content */
#wrapper {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
overflow:hidden; /* This chops off any overhanging divs */
background:#fff; /* right column background colour */
margin-top:20px;
-moz-border-radius:25px;
border-radius:25px;
}
#content {
float:left;
position:relative;
margin-left:20px;
padding:0 0 1em 0;
}
#navigation {
float:left;
position:relative;
background:#000;
width:150px;
font-size:.9em;
margin:40px 0 0 0;
padding:0 0 1em 0;
z-index:1002;
}
#navigation li{color:#FFF;background:#000;list-style-type:none;}
#navigation a{text-decoration:none;color:#FFF;display:block;padding:5px 15px;}
#navigation li:hover{}
#navigation li:hover a{color:#FFF;display:block;background:#4f81bd;}
#navigation li:hover ul{display:block;}
#footer {
clear:both;
float:left;
font-size:.75em;
margin-top:30px;
}
#footer p {
padding:10px;
margin:0;
}
#footer ul{margin:0;padding:0;}
#footer li, #footer li a{color:#aeaeae;display:inline;padding:0 5px;}
#footer li{list-style-type:none;padding:2px 0;}
#footer li a{font-weight:normal;text-decoration:none;text-transform:none;}
#footer li a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:#4f81bd;}
h1{font-size:1.6em;}
h2{font-size:1.3em;}
h3{font-size:1.2em;}
h4{font-size:1em;}
What am I missing?
Dont float the content div instead give it enough left margin to clear past the navigation div.
Simple two column layout to illustrate here http://jsfiddle.net/DFvyb/
I'd recommend trying to use an open source grid system rather than trying to roll your own.
There are many, you could check out this for instance:
https://github.com/stubbornella/oocss/wiki
h2 and p tag should be in div and apply width on div check link below
http://jsfiddle.net/DzQRR/
Set with property for #content div e.g. 900px