im trying to get text to overlap the nav bar, when I say overlap I mean expand outside the nav bar white keeping the nav where it is. here is my code I tried using different padding techniques but none have worked. any help would be appreciated :
div {
padding-top:80px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin:15px;
background-color: black;
line-height: 5px;
}
li {
float:left;
font-family: Courier New;
}
li a {
display: block;
color: white;
padding:20px;
text-decoration: none;
text-align: center;
text-decoration: none;
padding: 2px 25px;
}
li a:hover {
/*background-color: ;*/
color: white;
}
li a.active {
background-color: #4CAF50;
}
<div>
<ul>
<li>Million-Air</li>
<li>Men</li>
<li>Wemon</li>
<li style="float:right"><a class="active" href="account.html">Account</a></li>
</ul>
</div>
So I figured it out, it was due to the fact I had float left on the li element and it was pushing all the blank space to the left. So I had to use 'clear: both' for it to work
Try removing your overflow: hidden property. The text will extend outside the box if you do.
If I am misunderstanding your intent, try linking to what you're trying to do if you have examples online.
Related
I want the navigation links: "about", "resume", "projects", and "contact" to line up horizontally in the navigation bar.
Why does this only work with display: inline-block?
It is my understanding that inline-block boxes allows these elements to be side by side. I need it to be inline-block instead of just inline because I want to size it to the nav bar's exact height.
What am I doing wrong?
Here is the HTML and CSS for my nav:
/* ----------------------------NAVIGATION SECTION-------------------------------- */
.headerContainer {
background-color: #000;
text-align: center;
height:60px;
margin-left: 600px;
margin-right: 600px;
font-family: 'Monda', sans-serif;
text-transform: uppercase;
position: fixed;
}
nav {
padding-left: 1000px;
padding-right: 1000px;
}
nav li {
list-style: none;
display: inline-block;
background-color: #000;
height: 40px;
padding-top: 20px;
width: 120px;
}
nav li:hover {
background-color: #e1e1e1;
-webkit-text-stroke: 2px #000;
}
a:link {
color: #fff;
text-decoration: none;
margin-left:25px;
margin-right:25px;
}
a:visited {
color: #fff;
}
a:focus {
color: #fff;
}
a:hover {
}
a:active {
color: #fff;
}
<!------------------------------NAVIGATION SECTION---------------------------------->
<header class="headerContainer">
<nav>
<ul>
<!-- you put the end tag ">" at the beginning of next line to get rid of whitespace between the links -->
<li>About</li
><li>Resume</li
><li>Projects</li
><li>Contact</li>
</ul>
</nav>
</header>
You have a massive amount of padding inside the nav element.
nav {
padding-left: 1000px;
padding-right: 1000px;
}
This doesn't leave very much space for the content to render in.
The li elements are laid out side by side until they run out of space, at which point they word wrap.
If you zoom out, you'll see the fit in one line.
If you look at the live demo in your question, with the very narrow frame, you will see everything squashed to the side.
Don't set a huge padding on the nav element.
i want 2 of my buttons to be stacked (on top of each other). however, after using display: block, the buttons are still side by side. here are my html & css code!
does anyone know why? i had done my research and display:block is the way to code my buttons to make them on top of each other. would appreciate any help!
thank you in advance for everyone that have helped me! i'm really grateful. :)
.homepage_viewcurrentproject
{
font-family : Times New Roman;
font-size : 28px;
color : #FFFFFF;
color : rgb(255, 255, 255);
}
nav#button
{
float: left;
padding: 15px;
width: 150px;
height:350px;
margin-top: 15px;
margin-left: 65px;
text-align: center;
}
nav#button ul li
{
margin: 0; /*Setting margins and padding to 0 to remove browser default settings*/
padding: 0;
list-style-type: none; /*remove the bullets*/
color: white;
}
nav#button li a
{
display: block; /*to allow changes of- width,height, padding and margin around the link*/
width: 350px; /* length of button */
padding: 5px 10px; /*top and bottom:5px left and right:10px*/
background-color: #25374C;
text-decoration: none; /* remove the underline of hyperlink */
margin:10px;
padding: 30px 40px;
background: #25374C;
border-radius: 18px;
}
nav#button a:link{
color: white;
text-decoration: none;
}
nav#button a:visited{
color: white;
}
nav#button li a:hover, /*add a style to an element when you mouse over it*/
button li a:focus /*add a style to an element that has keyboard input focus*/
{
background-color: #2c425c;
color: #CCFFC5;
}
nav#button li a:active /*add a style to an element that is activated*/
{
background-color: #25374C;
}
<nav id="button" class="homepage_viewcurrentproject">
<ul>
<li>
Check out my Python Study
</li>
<li>
View latest project
</li>
</ul>
</nav>
enter image description here
You can use this method:
nav ul {
display: flex;
flex-direction: column;
}
My navbar gets chopped off from both sides whenever I resize the window, like in this picture.
Chop chop
I want the navbar to fit the entire screen, even when the window is resized, so that all the links and logo are visible.
I tried making the width 100vw but it has no visible effect.
Here is my HTML and CSS:
<header>
<nav>
<ul>
<li><div class="container"><img src="https://i.ibb.co/SP0TLzQ/broozeb.png" alt="logo" class="logo" border="0"><div class="overlay"><div class="text-test">米</div></div></div></li>
<li>ホーム</li>
<li>米さんについて</li>
<li>日本の文化</li>
<li>学習の情報</li>
<li>English Stuff</li>
</ul>
</nav>
</header>
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
list-style-type: none;
margin-left: 5px;
}
nav ul li a {
color: white;
background-color: blue;
display: block;
line-height: 3em;
padding: 2em 4em;
text-decoration: none;
font-weight: bold;
}
nav ul li .logo {
background-color: white;
border-radius: 50%;
margin-left: 10px;
}
nav a:hover {
color: red;
background-color: white;
transition: all 0.3s ease 0s;
}
I'm really sorry to ask such basic questions, but this has been troubling me for a few weeks. I very very much appreciate your help!! My webpage can be found here: https://komesannonihongotabi.neocities.org/culture.html
This is being caused by the following CSS line:
nav ul li a {
padding: 2em 4em;
}
Your a tags have a padding on left and right of 4em. Since em is an absolute unit and not a relative one, it will stay the same on any screen size. That is, unless you change the font-size to be smaller but I don't think that would be a good solution here. Just try adding a relative unit like %, or use a breakpoint as follows:
nav ul li a {
padding: 2em 1em;
}
#media screen and (min-width: 900px) {
nav ul li a {
padding: 2em 4em;
}
}
Another, and maybe better solution to your problem would be to use a sidenav with hamburger icon. This may however be a bit complex for beginners.
What if you remove this line white-space: nowrap; from nav {}
Before
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
After:
nav {
background-color: blue;
border-bottom: solid #09316b; }
It starts to resize now. If you want more info about white space -> Click here -<
I'm trying a simple list layout, when I delete the overflow:hidden from li {}, the background color simply disappears. Because I'm new to CSS, I could be able to figure out why this is happening.
<!DOCTYPE html>
<html>
<style>
ol {
list-style-type: none;
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;
}
li {
float: left
}
a{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
background-color: red;
}
</style>
<body>
<ol>
<li><a class="active" href="#home">Home</a></li>
<li>iPhone</li>
<li>iPad</li>
</ol>
</body>
</html>
Whenever you are using float, keep in mind that you have to use clear:both. The reason why we use clear:both is that float property will break the flow of html element and will push them according to value(left,right), in your case you have used float:left means all li will be in one line and if space will not covered then it will create blank space issue and to remove that blank space we use clear:both so any blank space which is left will be covered by using clear:both.
See here I have used div to remove blank space.
For more detail you can read here and for detailed information see here and here
https://jsfiddle.net/u8v8ae9c/
The float:left; on your li-tags is causing the issue.
You have floated the li element to left. Instead which you can use
display:inline-block;
ol {
list-style-type: none;
margin: 0;
padding: 0;
background-color: green;
}
li {
display:inline-block;
}
a{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
background-color: red;
}
FIDDLE: https://jsfiddle.net/u44Loz5z/
Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}