Alright I am trying to make a header that is separated with a line between the links. Now I use border-right but then I mess up the 100%. I changed the width to 19% per link but then I don't fill up the entire 100%. I tried outline, but there seems no way to put the outline on the right side only. I am sure that I am not the first one to encounter this problem. What is the best solution?
a {
color: black;
}
#logoDiv {
padding: 35px 0 35px 35px;
background-color: #999;
}
#topNavUl {
height: 30px;
list-style-type: none;
padding: 0 0 0 0;
}
#topNavUl li {
height: 100%;
width: 19%;
float: left;
text-align: center;
}
#topNavUl .notLast{
border-right: 1px solid grey;
}
<div id="topNavDiv">
<ul id="topNavUl">
<li class="notLast">Home</li>
<li class="notLast">Clients</li>
<li class="notLast">Projects</li>
<li class="notLast">Coworkers</li>
<li id="lastTopNavLi">Contact</li>
</ul>
</div>
Related
I have a list ul with items li. Under the list there is a box surrounded with border. The top border of the box is also the bottom border of the list items.
What I want to do know is to remove the bottom border of the active tab. That means removing the top border of the content box along the active tab. Is this possible or do I need to use a different approach?
li {
display: inline-block;
padding-top: 0;
padding: 15px;
border-right: 1px solid #e6e6e6;
cursor: pointer;
border-top: 1px solid #e6e6e6;
font-family: 'Cera';
font-size: 13px;
}
ul {
list-style-type: none;
margin: 0 auto;
border-left: 1px solid #e6e6e6;
padding-left: 0px;
}
.content-box {
display: block;
min-height: 100px;
margin: 0 auto;
border: 1px solid #e6e6e6;
overflow: hidden;
padding-bottom: 10px;
}
.active {
position: relative;
background-color: #f8f8f8;
top: -3px;
}
<ul id="menu">
<li class="active" data-nav="1">Prerender</li>
<li data-nav="2">Prefetch</li>
<li data-nav="3">Preconnect</li>
<li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender"> Prerendered page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
Here's how I'd like it to look:
I suggest that you use negative margin to overlap elements.
Use a margin-top:-1px to overlap the top border of the lower box with the bottom edge of the top boxes. This allows the background-color of the active top box to cover the top border of the lower box.
Use margin-left:-1px on all top boxes except the first one to overlap the borders on their left and right sides. Otherwise, with a border on only one side, the active box will be missing a piece of border where it rises above the others.
I've removed the white space between <li> elements because, since they are display:inline-block, that space is rendered as gaps between the boxes.
I'm using additional padding to raise the active top box, instead of using negative top. This keeps the text inside the active box at the same height as the other boxes.
I've aligned the top boxes with vertical-align:bottom to keep them flush against the bottom box.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 15px;
margin-left: -1px;
border-style: solid;
border-color: #e6e6e6;
border-width: 1px 1px 0 1px;
cursor: pointer;
font-family: 'Cera';
font-size: 13px;
vertical-align: bottom;
}
li:first-child {
margin-left: 0;
}
.content-box {
min-height: 100px;
border: 1px solid #e6e6e6;
margin-top: -1px;
padding: 10px;
}
.active {
background-color: #f8f8f8;
padding-top: 18px; /* 15 + 3 */
}
<ul id="menu">
<li data-nav="1">Prerender
</li><li class="active" data-nav="2">Prefetch
</li><li data-nav="3">Preconnect
</li><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender">Prefetched page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
If your idea is to slide down the tab to hide the border , then you should reset vetical-align on li (and eventually mind the white-space) , then increase the padding of 1px (for a one px border) and low it down of that extra pixel(s) like you tried.
li {
display: inline-block;
padding-top: 0;
padding: 15px;
border-right: 1px solid #e6e6e6;
cursor: pointer;
border-top: 1px solid #e6e6e6;
font-family: 'Cera';
font-size: 13px;
vertical-align: bottom;
}
ul {
list-style-type: none;
margin: 0 auto;
border-left: 1px solid #e6e6e6;
padding-left: 0px;
}
.content-box {
display: block;
min-height: 100px;
margin: 0 auto;
border: 1px solid #e6e6e6;
overflow: hidden;
padding-bottom: 10px;
}
.active {
position: relative;
background-color: #f8f8f8;
padding-bottom: 16px;/* increase height of 1 px here, can be any value you want */
top: 1px;/* low it done at least the border's thickness to hide */
}
body {
margin: 1em;
}
<ul id="menu">
<li class="active" data-nav="1">Prerender</li><!-- kill that white space via comments
--><li data-nav="2">Prefetch</li><!--
--><li data-nav="3">Preconnect</li><!--
--><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender"> Prerendered page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
Codepen - http://codepen.io/anon/pen/ZGYQej
I need to make 4 items fit perfectly inside a container and each item must have 5px margin of the other. I'm trying to do but it is never perfect, what do I mean by perfect? The first item should be in the far left, and the last at the far right, and yet the four items need to be far apart with 5px .
Code:
HTML:
<section class="statistics">
<div class="container">
<h2 class="statistics__title">Estátisticas</h2>
<ul class="statistics__list">
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
</ul>
</div>
</section>
CSS:
.container {
box-sizing: content-box;
padding-left: 3%;
padding-right: 3%;
margin-left: auto;
margin-right: auto;
}
.statistics__title {
margin: 15px 15px 15px 0;
font-weight: lighter;
}
.statistics {
width: 100%;
}
.statistics__list {
margin: 0;
padding: 0;
list-style: none;
}
.statistics__item {
margin: 0 5px;
display: inline-block;
width: 23%;
height: 230px;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}
Try usin the pseudo-class :last-child on .statistics__item
This way you can give all elements margin-right:5px except for the last element, causing the first item to be in the far left, and the last at the far right while the four items are seperated with a margin of 5px.
box-sizing:content-box;
padding-left:3%;
padding-right:3%;
margin-left:auto;
margin-right:auto;
}
.statistics__title {
margin: 15px 15px 15px 0;
font-weight: lighter;
}
.statistics {
width: 100%;
}
.statistics__list {
margin: 0;
padding: 0;
list-style: none;
}
.statistics__item {
margin-right: 5px;
display: inline-block;
width: 23%;
height: 230px;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}
.statistics__item:last-child {
margin-right: 0px;
}
<section class="statistics">
<div class="container">
<h2 class="statistics__title">Estátisticas</h2>
<ul class="statistics__list">
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
</ul>
</div>
</section>
This possible solution involves CSS flexbox, check out the demo below.
.statistics__title {
background: silver;
}
.statistics__list {
list-style: none;
padding: 0;
margin: 0 -5px; /*get rid of the left margin on 1st item, and right margin on 4th item*/
display: flex;
}
.statistics__item {
background: gold;
flex-grow: 1;
margin: 0 5px;
}
<section class="statistics">
<div class="container">
<h2 class="statistics__title">Estátisticas</h2>
<ul class="statistics__list">
<li class="statistics__item">1</li>
<li class="statistics__item">2</li>
<li class="statistics__item">3</li>
<li class="statistics__item">4</li>
</ul>
</div>
</section>
JSFiddle: http://jsfiddle.net/b0t9m95L/
http://jsfiddle.net/hmaQR/
Here is my html:
<div id="page">
<div id="logo">
<h1>My Website</h1>
</div>
<div id="navigation-wrapper">
<ul id="top-navigation">
<li class="home">Home</li>
<li class="about">About</li>
<li class="Blog">Blog</li>
<li class="Contact">Contact</li>
</ul>
</div>
<div id="body"></div>
</div>
and the CSS
#page {
margin: 0 auto;
border: 2px solid black;
width: 960px;
height: 700px;
}
h1 {
font-family: Helvetica;
text-decoration:;
color: #0099CC
}
#logo {
position: relative;
margin: 0 auto;
text-align: center;
font-size: 20px;
border: 1px dashed blue;
}
#navigation-wrapper {
margin: 0 auto;
border: 1px dashed blue;
text-align: center;
}
#top-navigation {
border: 1px solid black;
margin: 0 auto;
list-style: none;
}
#top-navigation li {
width: 80px;
height: 20px;
background-color: orange;
padding: 5px;
color: blue;
font-family: Helvetica;
display: inline-block;
}
You'll notice that the orange navbar/list is not quite centered to the logo above it. What the heck am I missing?
I cannot seem to get the #top-navigation to center to the middle of the page. I'm super new to css, so any help would be appreciated.
I suggest you in each css file of a page that you make, always put the following first to disable all margin and padding of the default css:
* { margin:0;padding:0}
Try that, and then you can tweak the margin and padding of your h1
Hope this helps
I forked your fiddle: http://jsfiddle.net/hmaQR/1/
ul { padding-left: 0; }
I highly recommend getting a good dev toolbar. Chrome has a great one out of the box.
I am using a Html navigation menu on a website using the standard UL LI approach. But the problem is that when I resize the browser window the menu is resized and menu items outside the viewable area are shifted downwards. Has any on faced a similar problem?
Html
<div style="margin-top: 11px; display: block;" class="menubar">
<ul class="tabs">
<li >Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ul>
</div>
CSS
.menubar {
background: url("images/bg.png") repeat scroll left top #222222;
border-bottom: 1px solid #B2D7FC;
border-top: 1px solid #B2D7FC;
color: #FFFFFF;
float: left;
height: 35px;
margin: 10px 0 0;
padding: 0 2%;
width: 96%;
}
ul.tabs {
display: block;
list-style-type: none;
margin: 5px 0 0;
padding: 0;
}
ul.tabs li {
background: url("images/tab_right.png") no-repeat scroll right top transparent;
float: left;
padding: 0;
position: relative;
}
Please define its width if you are not given like
div
{ width:size %/px/em;
min-width:%/px/em;
position:absolute;
}
Set a min-width on your container, or the <ul>.
<ul>
<li></li>
<li></li>
</ul>
CSS
ul{
min-width:720px;
}
Change the 720px to however large you want the menu to be. That way, it will resize until it hits that limit.
I am having real troubles with trying to align a horizontal menu.So far my menu is looking like
I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu
I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?
My html
<nav class="slide-nav">
<ul class="slider">
<li class="selected">
<div>
<span class="heart"></span>
<div>
Get Started</div>
</div>
</li>
<li>
<div>
<span class="price-tag"></span>
<div>
Get Results</div>
</div>
</li>
<li>
<div>
<span class="star"></span>
<div>
Track & Engage</div>
</div>
</li>
<li>
<div>
<span class="people"></span>
<div>
Features</div>
</div>
</li>
</ul>
</nav>
css
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px;
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
width: 150px;
}
.slider li div
{
line-height: 31px;
}
.slider li div div
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;
}
Here the CSS that u have to change with
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px;
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}
I believe this has been answered in detail here.
Basically you want to have your individual buttons rendered with display:inline-block which would allow for them to be justified. There's a trick however with adding a "dummy" line break to force justification.
I just got rid of the widths, removed margin: 0 auto from .slider and added the ole text-align: center.
Check out a live demo:
http://jsfiddle.net/RJL7J/
Hope this helps.