I have a Bootstrap navbar with few links in it, and verical separators between them. The problem is that when the screen width is between ~1100px - ~770px the separators are not having the same height. here is their css code:
.navbar-default li + li {
background:url('../images/buffer1.png') no-repeat top right;
background-size: auto 90%;
}
I guess it's because of the use of percentage, but I have to use it due to the responsive design (when the screen get smaller the li's width is changing and the separator have to fit to their height...
Here is live example:
http://www.bootply.com/KuD2TuYe0H
I'm looking for a solution (CSS only is better) that make all the separator with the same height.
One solution is to fart around with bottom margin/padding. Works in IE7+.
.navbar .nav {
overflow: hidden;
margin: 0;
width: 100%;
direction: rtl;
}
.navbar .nav > li {
float: right;
display: inline-block;
width: auto;
text-align: center;
padding-bottom: 10000px;
margin-bottom: -10000px;
direction: rtl;
width: calc(100% / 7.0);
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 14px;
font-weight: bold;
/* border-left: 1px solid #d4d4d4; */
}
.nav > li {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.navbar-default .navbar-nav>li>a {
color: #777;
background-color: #f8f8f8;
}
Related
I want to add some space between the text and the underline. But when I try to add some border on the bottom it occupies the 100% width of my resolution.
So it looks like this:
Here's my css:
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
My page is multilingual so the border bottom should be the same width of the text.
Can you help me with this?
text-underline-offset
<h1 style="text-decoration:underline; text-underline-offset:.25em;">text</h1>
You could add display: inline-block; to the <h1> or you add a inline element (like a span) inside the h1 ...
h1 {
text-align: center;
}
h1 span {
font-size: 24pt;
color: #279839;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
<h1><span>hello</span></h1>
<h1><span>hello world</span></h1>
<h1><span>hello world and univers</span></h1>
Put a span tag inside the h1
<h1 class="the-h1"><span class="the-span">商品</span></h1>
the css
.the-h1 {
text-align: center;
}
.the-span {
display: inline-block;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
If you don't want to wrap that by some other tag then use transform to align h1 tag at center of page and change it's display to inline-block this applies to only one h1 tag,
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
display: inline-block; /*Add this*/
left: 50%; /*Add this*/
transform: translate(-50%, 0); /*Add this*/
}
<h1>Hello</h1>
Step1: You need to make H1 display:inline-block; so that the border remain according to the width of text instead of window width.
Step2: In Order to provide space you can use css pseudo element
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
display:inline-block;
position:relative;
margin: 0 0 10px;
}
h1:after {
content:'';
position: absolute;
left:0;
right:0;
bottom:0;
height:1px;
background: #279839;
display: block;
}
Your h1 tag is a block element by default, so it makes sense that the border-bottom goes through the whole width. You would need to change the display property of your headline to achieve the wished result.
h1 {
display: inline-block; /* most solid one; best choice */
display: initial; /* most safe one can easily be overwritten */
display: inline-flex; /* could be useful if people using flex-grids */
}
h1 {
display:Block;
width: 25%
position:relative;
margin-right:auto;
margin-left:auto;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
I'm trying to increase the top and bottom padding in the following, but can't get it to work. I.e. notice the padding top and bottom code in ul.navbar li a. It has no effect. What's an alternative? Please advise.
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline;
border-right: 1px solid #ffb366;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
padding-bottom: 30px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li><li>Photos</li><li>Videos</li><li>Logout</li>
</ul>
I don't want to disturb the navigation bar's layout in any way - hence can't include the padding top and bottom option in <ul> - that messes up the layout and the hover both.
9.4.2 Inline formatting contexts
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
You can set it to inline block, if you need to apply vertical paddings etc.
ul.navbar li a {
display: inline-block;
}
inline elements don't have top and bottom padding. If you want to these padding you must use block or inline-block elements:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
padding-bottom: 30px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li><li>Photos</li><li>Videos</li><li>Logout</li>
</ul>
After following a couple of tutorials I have managed to build up a CSS-only vertical drop-down menu. However, the widths and absolute offsets are hardcoded and I cannot get them to adjust automatically according to their contents. I wish to avoid hardcoding these because I wish to integrate it into a CMS where I don't know the actual lengths of the menu items.
I have created a JSFiddle here showing the menu working: http://jsfiddle.net/nhfHw/2/
The top level items are currently hardcoded to a width of 100px (I wish to make this adjust according to the longest item at that level.) When I tried to remove that, it just expanded the next sub-level all over the screen.
#navigation
{
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
width: 100px; /* I wish to remove this */
margin-top: 30px;
}
The x offset of the sub-levels is also hard-coded. I wish them to just adjust according to their parent's width. Their width is also hardcoded to 200px.
li:hover .sub-level
{
background: #D0D0D0;
display: block;
position: absolute;
left: 100px; /* I wish to remove this */
top: 0px;
}
li:hover .sub-level .sub-level
{
left: 210px; /* I wish to remove this */
top: 0px;
}
ul.sub-level li
{
border: none;
float:left;
width: 200px; /* I wish to remove this */
}
I wish to avoid Javascript if possible.
A combination of display: inline-block and white-space: nowrap I believe gets you what you're looking for: http://jsfiddle.net/nhfHw/14/
#nav {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
margin-top: 30px;
}
#nav ul li {
padding: 1px 5px;
list-style: none;
white-space: nowrap;
display: block;
position: relative;
}
#nav ul li:hover {
background: #E0E0E0;
}
#nav ul li a {
text-decoration: none;
color: #707070;
display: block;
}
#nav ul ul {
display: none;
border-left: 1px solid #ccc;
position: absolute;
left: 100%;
top: 0px;
}
#nav ul li:hover > ul {
display: block;
}
Here just what the answer above me did, but without bugs...
http://jsfiddle.net/techsin/UBgZf/2/ Updated
*{padding:0;margin:0;}
.main{position:relative;}
ul ul{
display:none;
position:absolute;
left:100%;
margin-top:-30px;
}
.main>li>ul{
background-color:#BDBDBD;
}
ul {
white-space: nowrap;
color:white;
background-color:gray;
float:left;
}
li{
height:20px;
list-style-type:none;
padding:10px;
clear:both;
}
li:hover>ul{
background-color:black;
display:block;
}
Tricks include:
White Space No wrap
float
absolute positioning so it always refer to first element that has been positioned either absolute or relative.
I'm not really a champ when it comes to CSS, so I was hoping I could get some assistance.
Right now I got one parent div with two child divs. Currently, whenever I resize the browser, the two divs overlap each other. I want the left div to be visible at all times.
It can be viewed in action over here: http://unlimitedbrettworks.com/forums/
CSS:
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
height: 122px; /* is value is the height min the padding you use.*/
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
That is the first problem. The second is on line 128 in your css file.
div#wrapper
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
border: 10px solid #333333;
}
Needed to be:
div#wrapper
{
margin: 0 auto;
min-width: 1024px;
max-width: 2300px;
border: 10px solid #333333;
}
I went to your site, and played with Chrome's inspector, and found an answer.
Try adding these properties to #userarea:
#userarea {
position: absolute;
background-color: #E1E1E1;
height: 100%;
}
Hope this helps
Sorry, I didn't get your question... in the page you linked the #userarea div is always visible even if you resize the window.
To see the #logo div entirely, remove the 'height ' attribute from the parent div #header and it will go on a new line if the window is not large enough.
I am new to CSS, I found an layout online, but I have a little problem customizing it.
When the content of mainContent div is "higher" then the left menu, everything is working ok - but when the mainContent is smaller, it looks like this:
The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:
body {
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding-right: 20px;
padding-left: 20px;
}
#header {
}
#mainMenu {
border: 1px solid #808080;
font-size: 0.8em;
}
#pageBody {
position: relative;
}
#sidebar {
width: 250px;
padding: 5px 10px 10px 10px;
float: left;
border: 1px solid #808080;
font-size: 0.8em;
margin-top: 5px;
margin-right: 10px;
min-height: 500px;
}
.mainContent {
text-align: justify;
min-width: 400px;
min-height: 500px;
margin-left: 285px;
}
#footer {
font-size: 0.8em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
text-align: center;
color: #CCCCCC;
background-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
/*clear: both;*/
}
#footer p {
margin-top: 0px;
margin-bottom: 5px;
}
#footer a {
color: #CC3300;
text-decoration: none;
}
#footer a:hover {
color: #FF9900;
}
Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:
The exact position is not important, I just want the footer to be placed below the pageBody div.
I would be grateful for any help.
I don't know what your html looks like, but it looks like you could try inserting a clearing div just before the footer... btw, why is the 'clear: both;' commented out in the footer css rule?
code to insert just before the footer div:
<div style="clear: both;"/>
Not positive whether it will help, but if I understand your problem correcty, this is my best guess!
Try changing pageBody to:
#pageBody {
float: left;
clear: both;
}