I have a navigation bar with image in the middle. Looks similar to this:
<nav class="navigation">
<ul class="navigation-list-1">
<li class="navigation-list-item">Home</li>
<li class="navigation-list-item">Features</li>
<li class="navigation-list-item">Add info</li>
<li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
<li class="navigation-list-item">Form</li>
<li class="navigation-list-item">Team</li>
<li class="navigation-list-item">Contact</li>
</ul>
And style:
> .navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}
.logo {
position:absolute;
width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}
ul{
display:flex;
margin-left:-40px;
}
li{
flex:1;
background:yellow;
border:1px solid green;
height:70px;
line-height:70px;
text-align:center;
}
li>a{
text-decoration:none;
}
Now, if text in navigation item is longer than particular length, the text is spliting into next line and going outside the bar so it doesn't look good. How to make text in container always to be in one line?
Good option for start is to add css style for text: white-space: nowrap;
Another good way is to set the font-size in vw units. Font will be responsive depending on screen size.
Related
Hello once again Stackoverflow,
I have a flex-container with one large image (960x660) with 6 li elements similar to tabs on the side of it that line up with the images height(pic here- https://imgur.com/zSqFNmx). I would like the entire container to scale the same way that the image does. I have the image on the left set to a width of 100%. However I have the li elements width explicitly set by px(wrong of course). Which gives me this when I resize my window (pic- https://imgur.com/3RrVpZs).
My question is what is the best route to go so that I get all of the LI elements and text within to resize alongside the image to the left. Basically I want the entire container to be able to scale down completely. All while still lining up with the image at its full height.
Ive included a code pen example however the images do not work the same way im guessing due to the code pen frame around all of it?
HTML
<!-- HEADER START -->
<div id="flexContainer">
<div id="bigImage">
<img src="http://getdrawings.com/colorings/marvel-deadpool-coloring-pages-10.jpg">
</div>
<ul class="flexUL">
<li class="vm_clickable" id="organic" data-src="http://getdrawings.com/colorings/marvel-deadpool-coloring-pages-10.jpg" data-url="/organic"> Organic </li>
<li class="vm_clickable" id="glutenFree" data-src="https://www.bemea.com/wp-content/uploads/2018/11/Hero_SPE-V3_960x660.jpg" data-url="/gluten-free-shopping"> Gluten-Free </li>
<li class="vm_clickable" id="sugarFree" data-src="https://cdn.wallpapersafari.com/25/1/0yt8rf.jpg" data-url="/productsearch.aspx?rid=1041.05"> Sugar-Free</li>
<li class="vm_clickable" id="vegan" data-src="https://1iu5gpsjoqnqr.wpcdn.shift8cdn.com/wp-content/uploads/2019/09/960x660-SoWalWIne-1.jpg" data-url="/vegan"> Vegan </li>
<li class="vm_clickable" id="keto" data-src="https://cdn.wallpapersafari.com/66/32/4YHl2n.jpg" data-url="/keto-diet-essentials"> Keto </li>
<li class="vm_clickable" id="paleo" data-src="https://static.zerochan.net/Frozen.(Disney).full.1819021.jpg" data-url="/paleo"> Paleo </li>
</ul>
</div>
</div> <!-- deal wrapper end -->
CSS
#flexContainer {
display: flex;
width:100%;
height:auto;
flex-wrap:nowrap;
}
#bigImage > img{
width: 100%;
}
.flexUL{
display: flex;
flex-direction: column;
flex-wrap:nowrap;
}
.flexUL > li {
height: 100px;
width:320px;
}
.flexUL > li > a{
color: white;
font-size: xx-large;
margin-left: 20px;
}
.flexUL > li:hover > a:after{
content: '\203A';
font: 300 36px/18px "Roboto Slab";
margin-left: .2em;
height: 24px;
vertical-align: middle;
display: inline-block;
color: white;
}
#organic{
background-color: #ccb3d1;
}
#organic:hover{
background-color: #B7A1BC;
}
#glutenFree{
background-color: #e7b020;
}
#glutenFree:hover{
background-color: #CF9D1C;
}
#sugarFree{
background-color: #f07f53;
}
#sugarFree:hover{
background-color: #D8724A;
}
#vegan{
background-color: #889a2c;
}
#vegan:hover{
background-color: #7A8A27;
}
#keto{
background-color: #f49382;
}
#keto:hover{
background-color: #DB8475;
}
#paleo{
background-color: #9e5860;
}
#paleo:hover{
background-color: #8E4F56;
}
/* MEDIA QUERIES */
https://codepen.io/gchis66/pen/gOPqoeX
Any help is appreciated. Something tells me im missing very obvious solutions
I'm trying to create an element with a div in it, the div is a slightly smaller box then the outer, and makes it appear as a border withing the outer box.. hard to verbalize. the div contains several ul's that I want to maintain a height of 64px, and I want the div to have a set height also. however, the div seems unresponsive to any height I set in css, it just wants to do its own thing I guess and instead has decided that it should base its height on how many ul's there are within it.. I was hoping someone could explain whats going on with it, why it wont obey my commands, and possibly offer a solution.
here's the css:
#selectUnitScreen {
overflow: hidden;
min-width:390;
min-height:350;
left:5%;
top:5%;
bottom:5%;
right:5%;
padding:5%;
border-left: solid red 5px;
border-right:solid red 5px;
border-top: solid red 12px;
border-bottom: solid red 12px;
}
#selectUnitScreen ul {
height:64px;
}
#selectUnitScreen li {
font-size:25px;
padding-left: 5%;
display: inline-block;
}
#buildUnitScreen {
padding: 3px;
position: absolute;
z-index: 10;
border-radius: 2%;
border: 3px solid black;
width:400px;
height:470px;
background: white;
box-shadow: 4px 0px 2px 1px black;
left:260px;
top:200px;
}
and the HTML:
<section id="buildUnitScreen">
<div id="selectUnitScreen">
<ul id="build">
<li class="name">
infantry
</li>
<li class="cost">
1000
</li>
</ul>
<ul id="build">
<li class="name">
mechenized infantry
</li>
<li class="cost">
3000
</li>
</ul>
</div>
jsfiddle: https://jsfiddle.net/FJV8b/
The problem lies in your not setting units for the min-height and min-width. You say 390 and 350 but what are those? px? Otherwise those values are ignored. So:
min-height:350px;
I am making a navigation bar and I would like it to have pure CSS dropdown menus, the problem with this is that in order for them to not overlap the rest of the page you have to set them to position: absolute, however this causes all the links to occupy the same space. Giving them individual margins will space them out but as they occupy the same virtual space only the last link is actually clickable.
HTML:
<div id="navbar">
<ul>
Home
About Me
<div id="programs">
Programs
<li><a class="navbutton" style="margin-top:0px;">Test</a></li>
<li><a class="navbutton" style="margin-top:62px;">Test 2</a></li>
<li><a class="navbutton" style="margin-top:124px;">Test 3</a></li>
<li><a class="navbutton" style="margin-top:186px;">Test 4</a></li>
</div>
</ul>
</div>
CSS:
#navbar
{
border-bottom: 1px solid #00A2E8;
}
.navbutton
{
color: #BBBBBB;
text-align: center;
font-size: 18px;
display: inline-block;
width: 120px;
height: 45px;
padding-top: 17px;
transition: all 0.3s;
position: relative;
}
#programs
{
display: inline-block;
}
#programs > li
{
display: none;
list-style-type: none;
}
#programs:hover > li
{
display: block;
position: absolute;
}
Is there any way to make them overlap everything but each other, so that the links are clickable but not moving the whole page down? Preferably a solution without JQuery/Javascript please. Thanks!
ok i think i may have figured this problem out. all i did was add a z-index of 1 to the .navbutton element and it worked. all the other css i did not modify at all.
.navbutton
{
color:#BBBBBB;
text-align:center;
font-size:18px;
display:inline-block;
width:120px;
height:45px;
padding-top:17px;
transition:all 0.3s;
position:relative;
z-index: 1; /* this is the rule too add */
}
I hope that helps :-)
You are looking for z-index.
<div style="z-index: 1;">Top</div>
<div style="z-index: 0;">Middle</div>
<div style="z-index: -1;">Bottom</div>
I would like to know the better way to arrange the list items for the below menu.
As If I mention the list items as Item1,tem2,Item3 and so on as the Item is a small word it occupies less space and all are looking fine in the width as shown below:
But if I take the name as "Features", Support","How it works?" then it is not arranging them properly as it shows me lot of space n between each list item.
So is there any better way to get rid of this such as expanded menu by it's width or something like that
This is my css for the menu:
.menu
{
background-image: url('../images/header.png');
background-repeat: no-repeat;
}
ul.menu {
display:block;
margin:0;
padding:0;
height:60px;
text-align:right;
}
ul.menu li {
display:inline-block;
width:50px;
height:30px;
margin-right:10px;
}
ul.menu li:first-child {
float:left;
margin-left:10px;
}
ul.menu li a
{
text-decoration: none;
padding: 15px 0;
width: 50%;
color: #eee;
float: left;
text-align: center;
font-weight: bold;
font-style: normal;
font-family: Verdana;
}
This is my markup:
<div class="menu">
<ul class="menu">
<li>Home</li>
<li>Features</li>
<li>Support</li>
<li>Blog</li>
<li>How it work's</li>
</ul>
</div>
Actually according to Derek answer If I changed my width to 100px then it shows me this way
width:50px; is your problem.
You can remove it and:
manually set each item OR
create a function to measure the width of it's contents and adjust accordingly OR
leave them with no defined width
<li style="width: 60px;">Blog</li>
<li style="width: 130px;">How it work's</li>
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}