I'm making navbar and I don't want my ul li to ever become block even after resize, I wrote this code but when i convert my browser to mobile or resize and make it smaller it becomes block any solutions ?
#intro .nav ul{
position: relative;
float:right;
list-style: none;
margin-top:15px;
}
#intro .nav ul li{
font-family: 'Baloo Tammudu 2',cursive;
font-weight: 900;
padding-right:155px;
font-size:2em;
display:inline;
}
<div id="intro">
<div class="nav">
<ul>
<li class="about">
About
</li>
<li class="shop">
shop now
</li>
<li class="feedback">
feedback
</li>
</ul>
</div>
You can use Fixed "width" in your navbar. or you can use "min-width". otherwise, it's never possible.
example:
#intro .nav{
min-width:900px;
}
Related
I tried adding a logo to my navigation bar, but whenever i add the logo to the code, it just messes up the padding of the navbar itself and extends enough for it to have space to lie on it without overlapping, which is exactly what I need for the assignment I am given.
I need to add a png logo, larger than my navbar and for the logo to overlap from the top and bottom of the navbar, the png logo is just a simple leaf without background.
Here is a picture showing my result and the needed result
.menu {
text-align: left;
background-image: url("navigation-background.jpg");
}
.menu ul{
display: inline-flex;
list-style: none;
color: maroon;
}
.menu ul li{
margin: 0;
padding-left: 10px;
padding-right: 10px;
display:inline;
text-align: center;
}
.menu ul li a{
text-decoration: none;
color: white;
display: flex;
}
.menu ul li img{
display: flow;
}
<div class="menu">
<ul>
<li><img src="leaf.png" style="width: 40px;height: auto;"></li>
<li>
Дома
</li>
<li>
Сервиси
</li>
<li>
Зa нас
</li>
<li>
Контакт
</li>
<li>
Најава
</li>
</ul>
</div>
Any opinions/tips would be welcome when it comes to my code, I am a total newbie so take it easily.
Thanks!
you should adjust:
style="width:40px;height:auto;
increase height from 40 incrementally and check whether ok
The thing that's causing the problem is that when I make the size of the window smaller (restore down), the 4th sub div of class=Menu is not behaving like the other 3 divs, which I gave 25% width each. Instead, it is overflowing horizontally and going past the body, header and footer.
/*---------Dropdown----------*/
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
width:25%;
}
.Menu li {
width: 14.84em;
}
.Menu li ul { /*Hides dropdown*/
position: absolute;
left: -999em;
}
.Menu li:hover ul { /*Makes the dropdown show on hover*/
left: auto;
}
.Menu a { /*Styles the links on menubar */
color: black;
text-decoration: none;
display: block;
}
.Menu a:hover { /*background color of links change on
hover*/
background-color: #dcefdc;
}
.Menu div a{
padding-top:11px;
}
.Menu div a:hover{
height:50px;
}
.liwidth{
float:left;
background-color:#4CAF50 ;
height:50px;
}
/*----------Dropdown ends-----------*/
<div id="DivMenu">
<div class="Menu"><a style="text-decoration:none;" href="index.html">HomePage</a></div>
<div class="Menu"><a style="text-decoration:none;" href="About.html">About</a></div>
<div class="Menu"><a style="text-decoration:none;" href="Survey.html">Take our survey </a></div>
<div class="Menu">
<li>
Login/Register
<ul>
<div>
<li class="liwidth">
<a class="linkvalign" href="Login.html">Login</a>
</li>
<li class="liwidth" >
<a class="linkvalign" href="Register.html">Register</a>
</li>
</div>
</ul>
</li>
</div>
</div>
I can see that the thing causing the problem is the <li>'s in the 4th div, but I can't figure out how to arrange it so that it doesn't overflow.
I've tried removing the <li> tags altogether but that just causes more issues.
I'm not completely sure I understand what you're trying to do, and therefore what the proper solution should be, but adding overflow: hidden to .Main will prevent its content from overflowing at least.
Host Folder
If you click the link then click "all.html", you should see a page with an unfinished navbar. The lis in the list are stacking for some unknown reason. Could someone tell me why "Member Resources" and on are in a row below and how to fix that? I tried playing with the text-align, float, width, and margins of the containing div, the ul, and the lis but haven't gotten anywhere. Thank you (Note: Using Bootstrap v3.3.6)!
HTML:
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS:
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
SIDENOTE: Does anyone know why there is a scrollbar at the bottom of the page? There's no extra content to the right and I'm pretty sure there are no margins that'd be pushing it out that far. I see it on Chrome, anyone else see it and know why it's occuring?
You should set width of #topnav ul to 100% for setting it to full width.
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
Second way to see a full width navbar is to do as the bootstrap guide say
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
</div>
</nav>
Look carefully to notice that the navbar is full width and of different color(left intentionally for you to notice). You can remove the background color from your ul and put it on your navbar class instead instead
Try this:
HTML
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
Whenever my mouse hovers to one of the long <li> elements the other elements move to the right.
Here's the fiddle link :
.footer_links{
margin-top:60px;
}
footer .ourServices{
display: inline-block;
float:left;
margin: 0px -10px 0px 77px;
}
footer .ourServices ul li,a,h3{
text-decoration: none;
color:white;
list-style: none;
}
footer .ourServices .columns_title{
text-transform: uppercase
}
footer .ourServices .columns_title{
margin-bottom:17px;
font-size:23px;
font-family:raleway-regular;
font-weight:lighter;
}
footer .ourServices ul li, h3{
margin-bottom:8px;
font-size:12px;
}
footer .ourServices ul li{
margin-top: 10px;
}
footer ul li:hover{
font-family: 'Open Sans';
font-weight:bold;
}
<div class="footer_links">
<div class="ourServices">
<h3 class="columns_title">Connect</h3>
<ul>
<li>1234 Street Name</li>
<li>Suburb Title</li>
<li>State, Australia 400</li>
<li>Phone:(00) 000 000 000</li>
<li>fax:(00) 000 000 000</li>
<li>info#email.com</li>
</ul>
</div>
<div class="ourServices">
<h3 class="columns_title">Our Services</h3>
<ul>
<li>Cotmprehensive geriatric assessment</li>
<li>Falls, mobility problems</li>
<li>Incontinence</li>
<li>Polypharmacy</li>
<li>Osteoporosis</li>
<li>Frailty</li>
</ul>
</div>
<div class="ourServices">
<h3 class="columns_title">Explore</h3>
<ul>
<li>Our Doctors</li>
<li>Treatments</li>
<li>Appointments</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
jsfiddle.net/#&togetherjs=kdkeI5Hnq6
It is because the width of each div is being determined by the width of its contents, and the positioning of the other div is determined by the positioning of the div beside it. The bold hover effect is causing the text within to get wider, which is causing a chain reaction in the positioning of the other elements.
To fix it, set the width of the container so that it won't resize based on its contents:
footer .ourServices {
width: 170px;
}
You Just Set width for your class like this:
footer .ourServices
{
width: 150px;
}
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here