In my navigation bar, the links to other pages are placed underneath each other.
The links change by background-color when you hover them. Now I want it to hover full screen.
I already tried by setting padding-left and padding-right:auto, but that just doesn't work as I expect.
I don't want to add a fixed measurement(ex. padding-left: 100px; padding-right:100px;) because then it won't be responsive anymore when I minimize or enlarge the browser.
How can I do this?
Sorry I don't want it to hover fullscreen but to hover the size of the <div>.
HTML:
<div id="website">
<nav>
<ul>
<li>wie</li>
<li>hoe</li>
<li>wat</li>
<li>contact</li>
</ul>
</nav>
</div>
CSS:
body {
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#website {
max-width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav {
background-color: white;
}
nav li {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
}
nav a:hover {
background-color: green;
color: white;
}
If I understand your question right, all you need to do is add the display: block attribute to your <a> elements, e.g. like this:
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
display: block; /* <-- add this line */
}
This will cause the links to be rendered as block-level elements, which will, by default, take up the entire width of the <li> element containing them.
Here's a demo of the result on JSFiddle. In the demo, I also added display: block (instead of the default display: list-item) to the <li> elements to get rid of the bullets, and padding: 0 to the <ul> to get rid of the indentation. The result is that all these elements, down to the <a>s, inherit the full width of the enclosing <div>.
Related
Okay so I'm using the Bootstrap's nav panels and I have them fixed to the top along with an image bar. The problem is that I cannot remove the bottom-border from it no matter what I try. Here is the code as it is:
.header-wrapper {
font-family: 'Oswald', sans-serif;
}
.top {
background-color: #2960f7;
margin: 0;
padding: 5em 0 4em 0;
width: 100%;
position: fixed;
z-index: 999;
}
.top h1 {
text-transform: uppercase;
margin-top: auto;
margin-bottom: auto;
text-align: center;
color: #fff;
}
.nav-tabs {
border-bottom: none;
position: fixed;
top: 124px;
background-color: #2960f7;
color: #fff;
border-color: #fff;
z-index: 1000;
}
.nav-tabs .active {
color: #2960f7;
}
.nav-tabs li a:hover {
background-color: #fff;
color: #2960f7;
}
.nav-tabs li, .nav-tabs li a {
color: #fff;
}
And the HTML of the tabs and header:
<div class="header-wrapper">
<div class="top">
<h1>Title</h1>
</div>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Skillset</li>
<li>Work History</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
When I look at it I see the line in the CSS element in Chrome that shows the .nav-tabs {border-bottom: 1px solid #ddd}.
JSFiddle: https://jsfiddle.net/ghstet23/3/
The long and the short, how can I get that bottom border to go away if setting .nav-tabs to bottom-border: none; won't work?
I had to add the following code to the head
<style>
.nav-tabs {
border-bottom: none;
}
</style>
If by bottom border you mean the underline under your nav options you can use text-decoration: none; like so in your css:
.nav-tabs li, .nav-tabs li a {
color: #fff;
text-decoration: none; /* Add this */
}
On the bootstrap.min.css there is a border set on hover
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
On your local stylesheet after you load bootstrap add this to override the bottom border
.nav-tabs>li>a:hover {
border-bottom-color:#fff;
}
To remove the white border at the bottom
.nav-tabs { border-bottom: none; }
Check it here
JSFiddle
Remember, styles are inherited. Start butchering it from the top-parent down to find your anomalies.
For example, if you have a div inside a div inside a wrapper div, and you apply a border to the wrapper, both inner divs will get borders also.
In that example, if you are like "hey wtf, I only wanted the parent to have a border." Then, you would add "border: none;" to BOTH inner divs.
A person would also be interested in:
http://www.w3schools.com/cssref/sel_element_gt.asp
eg:
div > div > * {
border: none;
}
Select all child elements recursively in CSS
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..
I use a border-bottom on my navigation div, which is 100% wide. When I resize my browser window, the border-bottom suddenly gets cut off to te size that I just resized my browser to.
Does anyone know a solution to this?
my css:
#nav {
clear: both;
height: 40px;
width: 100%;
text-align: center;
border-bottom: 3px #ff6600 solid;
}
#nav ul {
margin: 0 0 0 670px;
white-space: nowrap;
}
#nav ul li {
display: inline-block;
list-style-type: none;
}
#nav ul li a {
display: inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
}
My html:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Hobby's</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
By assigning a margin left value of 670px, you are effectively setting a width to your page.
Thus, if the page resizes to something smaller than that (or that plus the text in the list items), it will appear that things get cut off because they extend beyond the frame of the window.
In order to have it be completely dynamic on width based on the window size, you'd need to have absolutely no hard-coded set values. You could try using a % for the margin, or you could use an alternate css style based on the width of the window.
I've found the answer!
By looking at other posts, someone said that the 100% width only applies to the 'viewport' of the screen. So thats why the div gets cut off.
To solve this you have to add a min-width in pixels to the body in css.
So in my case I changed it to:
body {
min-width: 1439px;
}
i think this way is better
change
#nav ul {
margin: 0 0 0 670px;
white-space: nowrap;
}
to
#nav ul {
float: right; // instead of margin: 0 0 0 670px;
margin: 0; //reset ul default properties
padding: 0; //reset ul default properties
}
also change this
#nav ul li a {
display: inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
}
to
#nav ul li a {
display: inline-block;
padding: 0 20px; // padding only for left and right, just use line-height instead of padding-top and padding-bottom
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
line-height: 40px; // same value as navigation height (#nav) , no need to use padding for top and bottom
}
I'm trying to make a <aside> element clickable. There are elements inside and I don't want the links to be applied individually, I would like it to be a clickable element.
<aside class="projectindicator">
<a href="#projectAnchor">
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
<h1>PROJECT</h1>
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
</a>
</aside>
/*Project display*/
.projectindicator{
width: 277px;
height: 35px;
position: relative;
top: 530px;
left: 360px;
text-transform: uppercase;
}
.projectindicator img{
float: left;
}
.projectindicator h1{
float: left;
padding: 0 10px 0 10px;
}
.projectindicator a{
display: block;
font-family: book;
font-size: 30px;
float: left;
}
.projectindicator a:link, .projectindicator a:visited{
text-decoration: none;
color: #2b3a42;
}
.projectindicator a:hover{
text-decoration: none;
color: #3f5765;
}
.projectindicator a:active{
text-decoration: none;
color: #2b3a42;
}
The problem is that I'm getting the clickable area below the element and the clickable area is smaller than the aside element. This gives the user a hard time to click the link.
Simple but I cannot find the solution. Could somebody help me?
In .projectindicator a, you added float: left, but this will cause the link to shrink to the size of its contents. I would remove that.
.projectindicator itself contains a height, while the link doesn't have a height. I'd either add the height to the link itself, or give the link height: 100%.
Last but not least: make sure .projectindicator itself doesn't have any padding and the link inside it doesn't have any margin.
I have made a functional CSS navigation-bar, except for some fugly CSS side-effects --
I am trying to vertically center the text in each list block, and vertical-align: middle was not working. Instead, I am using padding-top: 13px, but this renders the padded area without the background-color of the rest of the list element, and the display: inline block styling of the link does not extend to the padded area either! (a:hover is affecting only the area below the padding)So how can I vertically center text in list elements without these CSS problems?
Here is the relevant CSS:
/* header section */
#header
{
padding-left: 115px;
margin-bottom: 10px;
}
#main-menu
{
list-style-type: none;
}
#main-menu li
{
border: 1px solid black;
text-align: center;
padding-top: 13px;
color: #666;
font-family: "Lucida Console";
font-variant: small-caps;
letter-spacing: 2px;
/* for block layout */
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 153px;
height: 32px;
}
#main-menu a:link, a:visited
{
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 100%;
height: 100%;
background-color: #eee;
}
#main-menu a:hover, a:active
{
background-color: #bbb;
}<br /><br />
...and here is the relevant HTML:
<!-- header section -->
<div id = "header">
<ul id = "main-menu">
<!-- no spaces between list elements when all on the same line! -->
<li>home</li><li>about</li><li>cart</li><li>login</li><li>sign up</li>
</ul>
</div> <!-- end of header section -->
Things that I changed:
Changed the link to display as a block element.
Removed the padding at the top of the li elements.
Added that padding height to the height of the li elements.
Set the line-height to the height of the li elements.
Some formatting
http://jsfiddle.net/gtr053/7yrX7/
Try setting a line height
line-height: 13px;
I don't know much to anything but I've used this just now and it works
Entered into the Quick CSS of General styling
li {
display:inline;
padding: 0px 50px;
}
The first px brings the menu items down, and the second spreads them apart.