I Apologise in advance, but I've searched this website (and google) for hours and can't find a solution. I'm working on this Freecodecamp project.
https://codepen.io/alex1014/pen/XWMaEGg
Problem is: in my navbar (pink), the 3 links are not positioned all the way to the left in the same way the text PREMIUM TROMBONES (in the red div) is... they are slightly pushed towards the centre. It looks like there is some type of margin left, and I can't figure out where it's coming from since I've set to 0 every html/browser default margin.
I have also noticed, that if I text-align: right the links will perfectly go all the way to the right... but if I align left, there will still be margins...
* {
margin: 0;
box-sizing: border-box;
}
body, html {
background: white;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
#container {
background-color: cyan;
width: 80%;
margin: auto;
}
header {
background-color: cyan;
}
#logo {
background-color: red;
}
#navbar {
background-color: pink;
}
ul li {
display: inline-block;
list-style-type: none;
background-color: white;
}
<div id="container">
<header id="header">
<div id="logo"><h3>Premium Trombones</h3></div>
<nav id="navbar">
<ul>
<li>Subscribe</li>
<li>Services</li>
<li>Products</li>
</ul>
</nav>
</header>
...
...
...
</div>
ul elements have padding, add:
ul {
padding: 0;
}
That should remove the indentation.
Related
I feel like an idiot because I know this a simple thing. I can't figure why the logo and tagline images aren't in the grey container together.
I also can't under why my h2 and ul are on top of my image. All help is appreciated. This what it's supposed to look like https://imgur.com/a/3Qx3ihp
and this is how it renders now https://imgur.com/a/WGyYzPr
<div id="topbar">
<img src="hw8_images/logo.png" alt="Blaine and Associates logo"><img src="hw8_images/blaine-tagline.png" alt="Blaine and Associates Inc. tagline"><img src="hw8_images/architectural-tagline.png" alt="Architectural Design and Consulting">
<ul class="nav">
<li>Contact</li>
<li>Employment</li>
<li>Projects</li>
<li>Services</li>
<li>Company</li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">
<h2>Quick Links</h2>
<ul id="QL">
<li>Free Consultation
</li>
<li>Client List</li>
<li>Testimonials</li>
<li>Open Positions</li>
<li>Latest News</li>
</ul>
</div>
body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none; background-color: #fff;
}
.topbar{
background-color: #4d4d4d;
font-color: #fff;
height: 15px;
min-width: 500px;
max-width: 950px;
}
.nav li{
font: normal normal normal 100%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: right;
}
h1 {
font: normal normal normal 140%/1.3em verdana,geneva,lucida,arial,sans-
serif; text-decoration: none;
}
h2 {
font: normal normal normal 120%/1.3em verdana,geneva,lucida,arial,sans-
serif;
text-decoration: none;
float: left;
position: relative;
}
footer li {
display: inline-block;
list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
text-align: center;
background-color: #4d4d4d;
font-color: #fff;
}
#container {
position: relative;
height: 300px;
width: 400px;
}
.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;
background-size:cover;
height: 7em;
min-width: 200px;
max-width: 250px
}
#QL {
list-style: circle;
float: left;
position: relative;
}
"I can't figure why the logo and tagline images aren't in the grey container together."
They are inside, but the container is not styled, as you can't find it with .topbar, because it is an id not a class.
So #topbar will do it. If you make it bigger than 15px, all elements will be displayed inside.
The H2 and ul are on top of the background-img, because it is positioned abolute. If you change it to relative, the image will float left and the H2 and ul align on the right to it.
The problem is that you added float:left to your h2 and #QL selectors. Floating elements can be dangerous if you don't understand how it works. It removes the element from standard flow and then pushes it all the way to the top and to the left or right as assigned. It only stops for other elements that are floating, or for elements that have clear set to either the same side (left or right) or both.
Check out this CSS-Tricks article for more details.
I would also recommend you do some reading about fundamental CSS concepts. CSS-Tricks has a good collection of beginner concepts. I think you may find some of them helpful.
Your .buildingimage is in position absolute, he shouldn't ! Something put into absolute allows the element to overlap to others. Put it to "relative" or delete it if you don't really need it. there is also your h2 which got a float.
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
Should look like this:
(source: gyazo.com)
My attempt
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
I use Current class for the current page background.
Added the header
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
Floated menu to right, made it display inline and centered the text
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
Now the part of the current background
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
Result:
(source: gyazo.com)
Can you see theres a big space between the current and other items? How do I remove this? make it equal to others spaces.
Things I tried:
Adding position relative
result:
Menu item 'current' goes over the menu item 'forums'
I could not find any other way to do so, what am I doing wrong?
Try the following HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
With the following amends to your CSS:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
Your HTML was structured incorrectly ... you shouldn't be placing the <li> elements inside the anchor elements.
You also don't need to have display: inline; on the list items, as they are floated left anyway, they should already be inline.
In future, you may want to check that your HTML is valid using the W3C validator, it should explain any errors in your HTML and how you can fix them.
Let me know if the above doesn't fix it and I'll happily have another look.
EDIT: Forgot to also state that I removed the height and width on the current css declaration, that was unnecessary, and almost definitely causing the spacing issues.
Remove the width on .current. That is what's adding the extra spacing.
If you don't want to change that, change the spacing on the the adjacent li:
.current + li {
padding-left: 0;
}
Here is a simplified demo of what you are trying to accomplish. Learn from it:
HTML
<ul>
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
CSS
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
Demo
I have the following html for a simple navigation:
<header>
<div class="login">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</header>
I have the following css:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
float: right;
}
.login ul {
list-style: none;
margin: 0;
padding: 0;
}
.login li {
display: inline;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
}
I am using HTML5 boilerplate so my header is displayed as a block element. When I view the page in a modern browser the result looks like:
Why is the anchor padding extending outside of the red border/header element? What is causing this behavior?
Furthermore, when I view the same page in IE compatibility view, it now looks like:
Here it seems like the padding is not applied at all or cut off by the containing div. I tried setting a height for the div but the result was still the same. What is causing this behavior?
Thanks
Try putting a display:block on .login li a and put a float:left on the .login li
Also you can shorten your code and take out the unnecessary div and just put the class on the ul.
HTML:
<header>
<ul class="login">
<li>Link</li>
<li>Link</li>
</ul>
</header>
CSS:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
list-style: none;
margin: 0;
padding: 0;
float:right;
}
.login li {
float:left;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
display:block;
}
http://jsfiddle.net/KPzUv/
What you are seeing is the body margin or padding. Set the margin to zero and it should go away. This is probably also a follow on problem caused by "margin collapse" between the header and the body causing the padding of the following element to leak through but I don't have time to check right now.