I want the vertical border of the vertical tab to run on the whole page instead of finishing off where the tabs end.
however since I have given border-right on the tab it ends
with the last tab that is trending. Giving border-right to the content makes sure the height of the border is right but it spoils the spacing between tab and content.
HTML :-
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs'>
<li class='active'>
All
</li>
<li>
New
</li>
<li>
Featured
</li>
<li>
Ending Soon
</li>
<li>
Trending
</li>
</ul>
</div>
This is not default Bootstrap behavior so you will have to modify the css a little. For this to work, the vertical tab <ul> and all of its parents should have the property height: 100%.
For html and body I would apply the styling directly but for the <div> and <ul> I would use custom class so as not to modify the Bootstrap classes to maintain expected behavior for eventual future use in other layouts.
Here is a demo.
The css to add:
html{
height: 100%;
}
body{
height: 100%;
}
.tabbable.tabs-left.full-height{
height: 100%;
}
.nav.nav-tabs.full-height{
height: 100%;
}
The html to modify:
<body>
<div class='tabbable tabs-left full-height'>
<ul class='nav nav-tabs full-height'>
...........
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I don't even know where to start on this one. When I resize below 1600px the site breaks 100% even though it has media queries in place to resize/hide/move elements. But to pinpoint one issue that eludes me, I have a logo in an id that is set to a height of 175px and width to auto. At any browser size it's always a height of 564px. Check out some code below:
img #fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
<div class="row">
<div class="col-sm-12 nav" id="nav-w-back">
<div class="col-sm-5 fLeft">
<img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo">
</div>
<div class="col-sm-7">
<ul class="nav fRight" id="nav-ul">
<li>Home</li>
<li>Services<span style="font-size: .75em"> ▼</span>
<ul>
<li>Personalized Care</li>
<li>Health Care Services</li>
</ul>
</li>
<li>Links<span style="font-size: .75em"> ▼</span>
<ul>
<li>Patient Information and Forms</li>
<li>Patient Friendly Sites</li>
</ul>
</li>
<li>Staff Bios</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
If you're interested in more code - the test site is: http://fpacny.com/index_test.php where you can play with the sizing etc. At this point you would likely notice that the main image background only resizes properly when an inline HTML style addition of:
style="height: auto; width: 100%;"
is added. Otherwise, that breaks too.
Why won't my linked CSS override this? I've never had this issue on any website I've developed and it is driving me absolutely nuts!
JSFiddle: https://jsfiddle.net/hjo8pLxe/
You need to write
img#fpa-logo
to target the logo.
Edit: Just saw you are using bootstrap 4: Why not use the "img-fluid" class on the image? Then it won't get too big and scale down automatically if the row/column gets smaller.
<img class="img-fluid" {...} >
Or do you need any special behaviour, other than automatic resizing?
And you should also look more into the column features of bootstrap, you are using a lot of position: absolute in your css which is not needed at all for your design and would prevent a lot of errors if you would use bootstrap instead.
Change your ccs to
img#fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
For the navigation on a website I am making I am using a side bar that is set up using an unordered list. There are also multiple lists inside of lists. I used multiple div's too. I have now run into the issue that form inside of a div I need to set up some code that will contradict the div that it is in. In my case I have css of line-height: 35px; I need to edit this to become 15px.
Here is the code i need to edit it is the center( sub List )
<li>
<h2> Tech Ed. Classes</h2>
</div>
<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
<ul>
<li><strong><em>Main Page</em></strong></li>
<li>Construction</li>
<li>Drafting</li>
<li>Electronics</li>
<ul id="subList">
<li >INTRODUCTION TO ELECTRONICS</li>
<li>EXPLORING CAREERS IN ELECTRONICS</li>
</ul>
<li>Graphic arts </li>
<li>Manufacturing</li>
<li>Project Lead the Way</li>
<li>Transportation, Distribution, & Logitstics</li>
<li>Wood Working</li>
</ul>
</div>
</li>
You can do this simply by adding a css class to the elements you want to change to be different from the div they are in. For example:
li {
line-height: 35px;
}
.smaller {
line-height: 15px;
}
This CSS will make the line-height on all <li> elements equal to 35px, except for <li> elements with a class of smaller. Those will have a line-height of 15px. For example:
<ul>
<li>This will have a line height of 35 pixels.</li>
<li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
<li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
<li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>
JSFiddle
I would suggest adding a more specific selector for the inner list. This method would not require any changes to your existing markup:
#sidebarLinks {
line-height: 25px;
}
#sidebarLinks #subList {
line-height: 15px;
}
Here is a fiddle demonstrating the above selectors: JSFiddle
Answered
I begin to think I am losing my mind...
Currently I'm trying to set up a simple top navigation which is margin-0-auto-ed in the header. It contains five children <li>-elements with each a width of 200px. If I can still calculate correctly, that equals 1000px in width.
But to hold all children the top <ul>-element requires 1016px width. I just don't get where this comes from. All margins, paddings etc. are removed by a CSS Reset.
Code is as follows:
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
</ul>
</div>
</div>
CSS
#header-wrapper { width: 100%; height: 56px; position: relative }
#header { width: 100%; height: 56px; background: #111; position: absolute; }
#head-menu { width: calc(5*200px); margin: 0 auto;}
.head-menu-item { display: inline-block }
.head-menu-item-link { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }
Update 29.09.13
If anyone wonders, instead of commenting out the white spaces or going for some negative left-margins, I just used this syntax:
</li><li class="head-menu-item">Navlink
</li><li class="head-menu-item">Navlink
That has done it easily, without altering the code too much and keeps it clean.
The problem is inline elements add a extra space between each other because of the empty space on your html ( even a simple line-break ) here is your fix jsfiddle
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li>
</ul>
</div> </div>
display:inline-block is inserting spaces in between the li's (that is, displaying the white space shown in the HTML). You can see this more clearly if you put a background color on the li's.
or else if you just want your html to look neat, you can add a negative margin to the display:inline-block elements (to account for the gaps between them in html code), but it would work only if you have a kinda fixed layout, which rarely changes, and you are too adamant to mess up your code by removing spaces or adding comments
I don't have enough 'reputation' to comment, but I would like to restate something Vinícius Moraes said, WHITE SPACES in you code ie...
<div id="foo"></div>
<div id="bar"></div>
<div id="thing"></div>
as seen here by putting on different lines (creating a coded white space) can make a a dramatic effect, where putting...
<div id="foo"></div><div id="bar"></div><div id="thing"></div>
can create the desired effect, as I found after spending several hours wondering why my three 's where next lining when positioned perfectly with a jquery resize. Thank you again Vinícius Moraes for pointing out this rookie mistake.
On this page there's a menu in the right sidebar that is composed of a HTML list with this structure:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<i class="icon-home"></i> Home
</li>
<li>
Development
</li>
<li>
Management
</li>
<li>
Learning
</li>
<!-- more menu entries -->
</ul>
Notice that some menu entries have (font) icons to the left of the label, whereas others don't. This makes the menu appear rather unsightly, because the labels are not vertically aligned.
Is there are any way to vertically align the labels, ideally without introducing additional HTML elements (because that messes up some immediate descendant rules that are defined within Bootstrap itself)?
Try this:
.nav-pills.nav-stacked > li > a {
padding-left: 25px;
}
.nav-pills.nav-stacked > li > a > i {
position: absolute;
margin-left: -25px;
}
It takes the icons out of the flow, puts the text 25px to the right, and then positions the icons 25px to the left