I've started making a navigation bar using the nav tag, which worked perfectly. Using CSS, I set the width of my nav tag to 100%, as well as the border and padding set to 0.
I seem to have a few pixels on each side of the nav bar that aren't getting filled. I want the entire width to be covered with the nav bar, but I can't get it to work. Here is my html:
<nav>
<ul>
<li>Home</li>
<li>
Test1 <span class="carrot"></span>
<div>
<ul>
<li>TestA</li>
<li>TestB</li>
<li>TestC</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</nav>
Css:
nav {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
What can I do to fix this?
Set body to margin 0
CSS
body{
margin: 0px;
}
All HTML document by default have a margin surrounding all four corners of it. As desirable as margins are in most cases, sometimes they with your design, such as a header bar that spans the entire page horizontally. In that case you have to explicitly assign 0 to the margins of the body.
body{
margin: 0px;
}
Explanation of the answer given by #Luis P.A
Start all projects with the following CSS rule:
*{
border: 0;
padding: 0;
margin: 0;
}
All browsers have some default css rules. With this css rule i it will reset the browser default css...
nav {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
/* margin: 8px 22px 8px 22px; */
/* overflow: hidden; */
/* width: 100%; */
margin: 0;
padding: 0;
/* notice below: */
position: fixed;
left: 0;
right: 0;
}
Always use on your css stylesheet docs this first lines:
* {
box-sizing: border-box;
}
body, html {
margin: 0 auto;
padding: 0;
}
You can eliminate presets on browsers by "normalizing", just add this link in the head:
"https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"
Also add the CSS:
* { box-sizing : border-box; }
I don't know how to use Markdown yet, if that's required here..
just add nav width
nav
{
width:100%;
}
Related
I'm trying to align a button so that it stays in the center of my menu bar. The jsfiddle will show you what I mean.
this does not seem to work:
vertical-align: middle;
Here is the code: jsfiddle!
Unfortunately, vertical aligning is one of the tougher things to do in HTML/CSS, depending on the situation.
However, if you not want to use absolute heights and must have it vertically centered, you can always changed the display to table, instead of block: display: table;
I edited your original jsfiddle for a working example.
I added /* Comments */ where I either added or changed CSS.
save yourself some time and try to use bootstrap.
here is the css you can use :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
but you can find a complete detailed solutions if you take a little time and go to this link :
https://css-tricks.com/centering-css-complete-guide/
Add below to your handle class
https://jsfiddle.net/420qk42v/2/
text-align:center;
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 5px;
cursor: pointer;
display: block;
text-align: center; /* this is the change */
}
Is that what you meant?
I did a test with the vertical align and it works if you remove the absolute positioning on the menu button.
I also made a new div around the text "menu" and then set that to position absolute while setting the handle to align the text to the right - the button will only move the right.
HTML
</br>
</br>
</br>
<nav>
<div>
<div class="handle">
<!--<div class="heading">MENU</div>-->
<!-- Menu button if on mobile device -->
<a class="menu">
<span class="line"></span>
</a>
</div>
</div>
</nav>
CSS
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 10px;
cursor: pointer;
display: block;
text-align: right;
}
/*added class for the menu - the heading text*/
.heading {
/*This is commented out in the markup but is to keep the menu heading on the right*/
position: absolute;
}
.menu {
border-radius: 3px;
border: 1px solid #ccc;
color: #5f5f5f;
font-weight: bold;
display: inline-block;
width: 1.9em;
vertical-align: middle;
height: 1.75em;
padding: 2px 0 0 0;
box-sizing: border-box;
}
.menu:hover {
/* background-image: linear-gradient(#e63d44,#c11a22);*/
/*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);*/
}
.menu .line {
background: rgb(184,184,184);
border-radius: 2px;
box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);
display: block;
margin: 10px auto 0 auto;
height: 3px;
width: 16px;
content: " ";
overflow: visible;
}
.menu:hover .line {
background: rgb(255,255,255);
box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);
}
Js fiddle to test - https://jsfiddle.net/ToreanJoel/b7mgaasj/
I want the price of coffee to come at the right end of the coffee name i.e 1.80 price should come in line of Americano. Similarly 10.00 price should come in line of Macchiato.
ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container li {
border-bottom: 1px dashed blue;
}
#container > li {
font-size: 2em;
border-bottom: 1px solid black;
}
em {
float: right;
position: relative;
bottom: 0px;
}
span {
width: 100px;
display: inline-block;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
As you can see i am using relative position, but its not working.
Can you solve this without absolute position and minimum changes to the code?
Just tell me why is relative position not working.
First you need to fix your html - the closing li for the DRINK MENU should be after the nested ul.
Then I would make use of display:table css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container > li {
padding: 5px;
}
#container ul {
border-top: 1px solid black;
margin-top: 5px;
}
#container ul li {
border-bottom: 1px dashed blue;
display: table;
width: 100%;
}
#container span,
#container em {
display: table-cell;
vertical-align: bottom;
padding: 3px 0;
}
#container em {
text-align: right;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
UPDATE
As per your comments about overflow. There are a couple of ways to fix this:
Increase the min width of ul#container to something that will accommodate the longest line - in this case a width of 125px should suffice: Fiddle example
Add table-layout:fixed to your table li and add word-wrap:break-word to the span: Fiddle example
You can add a class to the <em>
HTML
<ul id="container">
<li>DRINK MENU</li>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
</ul>
</ul>
CSS:
ul{
list-style: none;
padding: 5px;
margin: 0;
}
ul#container{
width: 18%;
min-width: 200px ;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange ;
box-shadow: 4px 4px 8px rgba(0,0,0,.3);
}
#container li{
border-bottom: 1px dashed blue;
}
#container > li{
font-size: 2em;
border-bottom: 1px solid black;
}
em{
float: right;
position: relative;
bottom: 0px;
}
.bottom {
position: relative;
top:15px;
}
span{
width: 100px;
display: inline-block ;
}
DEMO
Another posible solution (maybe the best practice):
CSS:
li:nth-child(3) > em, li:nth-child(5) > em{
position: relative;
top:16px;
}
DEMO
Along with your questions, I've taken your comments into consideration in preparing this answer.
First, your HTML was invalid. The list was nested improperly so I corrected that that in my answer.
In answer to your first question...
how to position the prices at the baseline
... absolute positioning will work and will not prevent your price card from adjusting to different browsers, platforms or devices. It will be as responsive as the container it is in. Of course, you should test your code to make sure it works as intended.
Note that for position: absolute to work properly you must set the parent element to position: relative. This is because absolute positioning will move the element – in this case the em – relative to its closest positioned ancestor (which in this case should be the li). If the absolutely positioned element doesn't find a positioned ancestor, it will position the element relative to the <body>. So bottom line:
To absolutely position a child element, set the parent element to position: relative.
Here's an example using your code.
DEMO
HTML
<!-- with corrections to improperly nested list -->
<div id="container">
<h2>DRINK MENU</h2>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano more text more text more text more text</span>
<em>1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato more text more text more text more text</span>
<em>10.00</em></li>
</ul>
</div>
CSS
/* based on your original code */
#container {
width: 200px;
border: 15px solid #886633;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
padding: 5px;
}
h2 {
width: 99%;
border-bottom: 1px solid black;
margin: 0;
}
ul {
list-style: none;
padding: 5px;
margin: 0;
}
#container ul li {
font-size: 1em;
font-weight: bold;
border-bottom: 1px dashed blue;
position: relative;
}
span {
width: 100px;
display: inline-block;
}
em {
position: absolute;
bottom: 0;
right: 0;
}
In answer to your second question...
Just tell me why is relative position not working.
Actually, it's working fine. In the normal flow of things, it's positioned exactly where it belongs. Your descriptions are breaking to a new line because of the margin limitation you set in your span.
That being said, the em can still be positioned with position: relative. Change the value from 0. Your prices will (as defined by your style rule) move up or down as a group, depending on whether you use positive or negative numbers.
Your CSS rule:
em {
float: right;
position: relative;
bottom: 0px;
/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}
For more about positioning see the position article at MDN.
I narrowed tmy issue down to the CSS Line position:relative; and if I remove it, it works, but then the category cat-work (Blue label) is shown at the top left. Idk how to fix it to be honest. Here the Code on Codepen ;
http://codepen.io/Allkind/pen/YXEjXX
article{
width:auto;
min-height:10em;
box-shadow: 0 0 4px rgba(0,0,0,.7);
margin: 1em;
font-family: 'Quicksand';
float: left;
position:relative;
}
Note : Yes the Picture is too big but I tried it with others - same result. So someone might be able to have a better solution then remove the Label?^^
It's not transparent, your navbar is being overlapped by the article tag. To fix that set z-index in your navbar.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 2; /* the z-index */
}
Working Code
I'm trying to get the two img elements shown below to display inline so that they can move with the slider, however it won't. Whether I'm missing something small or there is a bigger force at work I'm not sure.
HTML:
<div class="slider-small-box sone slider-box">
<ul>
<li>
<img src="spacer.gif" class="slider-img">
</li>
<li>
<img src="spacer2.gif" class="slider-img">
</li>
</ul>
</div>
CSS:
.slider-box {
overflow: hidden;
}
.slider-box ul {
padding: 0px;
margin: 0px;
}
.slider-box > ul > li {
display: inline-block;
border-radius: 5px;
}
.slider-small-box > ul > li > img {
width: 270px;
height: 200px;
background-color: #333333;
border-radius: 5px;
}
Here's a jsfiddle showing all the slider divs and their respective css classes: http://jsfiddle.net/JeVm3/
EDIT:
I feel a bit more explanation is required in regards to the jsfiddle. You see, each of those coloured divs is a viewport for an individual slider, hence why they have a fixed width. Each of those also has "Overflow: hidden" attached to make sure that the elements inside them cannot be seen, and will slide into view.
I am trying to make it so that the div.slider-box > ul > li elements are displayed inline-block out of sight, behind the viewport div.slider-small-box.
In fact that's how inline-block works, if the container's width does not have enough space, it will jump to the next line. So to force the list items on a single line, you have to use white-space like this:
.slider-box ul {
padding: 0px;
margin: 0px;
white-space:nowrap;
}
It seems that your .slider-small-box element doesn't have enough width for the two images. It needs to have at least 540px width at the moment.
.slider-small-box {
/* was: width: 270px */
width: 540px;
height: 200px;
background-color: #eeeeee;
display: inline-block;
bottom: 0px;
right: 0px;
font-size: 0px;
line-height: 0px;
float: left;
overflow: hidden;
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
border-radius: 5px;
}
Here's your updated fiddle: http://jsfiddle.net/JeVm3/1/
I have a page with a header, content, and footer element. The wrapper arround these elements is 70% of the window width. What I'm looking for is a way to set a minimum width for this wrapper. In my first fiddle it shows how it is right now: http://jsfiddle.net/fwqZX/
HTML:
<div class=outerWrapper>
<nav>
<ul>
<li class='active' id=tab1>Test1</li>
<li id=tab2>Test2</li>
<li id=tab3>Test3</li>
</ul>
</nav>
<section class=content id=content>
<div>
sdflnsdfskdjfisahdfosad
</div>
</section>
<footer>Footer</footer>
</div>
CSS:
html {
overflow-y: scroll;
font-family: Trebuchet MS;
color: rgba(57,58,54, 0.8);
text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff;
font-size: 150%;
}
header, nav, footer{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
white-space: nowrap;
cursor: default;
}
body {
margin: 0;
text-align: center;
background: url('dark_wall.png'), #393A36;
}
.content, footer, nav li {
background-color: #fff;
box-shadow: 0 0 10px -1px #000;
}
.outerWrapper {
width: 70%;
display: inline-block;
min-width: 500px;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
}
nav li {
transition: all 0.2s linear;
padding: 0.8em 0.5em;
display: inline-block;
min-width: 120px;
text-align: center;
border-radius: 5px 5px 0 0;
margin-right:10px;
}
nav li:not(.active) {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000, inset 1px -10px 10px -11px #444;
background-color:#eee;
cursor: pointer;
}
nav .active {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000;
}
.content {
padding: 1em;
text-align:left;
overflow: hidden;
/*transition: height 0.2s ease-in-out;*/
}
.content div {
transition: all 0.2s ease-in-out;
}
.content .hidden {
opacity: 0;
}
footer {
font-size: 0.8em;
padding: 0.8em;
text-align: left;
margin: 20px 0;
}
In this fiddle it shows how I want it to be: http://jsfiddle.net/gkZL4/
The difference between this is only a min-width value on the .outerWrapper class.
The problem with the second fiddle, is that I have a hard coded min-width value. I would like the minimum width of the .outwrapper to adapt to the width of the navigation(the tabs).
I want to prevent using javascript for this. If it is not possible without, I will use a hard coded min-width value.
Any help with this would be greatly appreciated.
You need to give a min-width in stead of a normal width.
Make it like this:
.outerWrapper {
min-width: 70%;
display: inline-block;
}
else, if still want it to be width:70%; or any size that feets content (width:auto;/* wich is equal to not give width at all */) + margin:auto;
Use display:table instead.
Using display:table will allow you not too mind how many tabs or how much content. The CSS is then , reusable within any similar structure and class names.
demo (no width/width or min-width and 3/4 tabs content wider/smaller)
http://jsfiddle.net/gkZL4/2/
.outerWrapper, .nowidth {
display: table;/*or inline-block*/
margin:auto;/* inefficient if inline-block, set text-align:center on parent */
}
.width {
width:70%;
}
.minwidth {
min-width:70%;
}
If you think display:table is inapropriate for old browser, you should first watch for display:inline-block .
IE6 applies width as min-width, IE7 will applie width given or full width. (any display:inline-block rules used on block-level element will need to be adapted for those two IES => haslayout with: display:inline; and zoom:1;
You may add a max-width and overflow-x:auto; to #content to avoid it to become to large on width .