I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.
This is my code:
HTML
<body>
<div class="nav">
<div class="container">
<ul class="pull-right">
<li>HOME</li>
<li>WINES</li>
<li>GRAPES</li>
<li>ABOUT US</li>
</ul>
</div>
</div>
</body>
CSS
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
I tried using .container {width: 900px;} but that didn't help. The nav bar still doesn't stay static.
You can solve this by adding a min-width to the navbar.
navigation {
margin-right: auto;
margin-left: auto;
max-width: 100%;
min-width: 1000px;
}
You can solve this by adding a minimum width to a div surrounding the nav bar.
In your case it would be in the .nav class
.nav {
min-width:165px;
position: absolute;
top: 20px;
right: 0px;
}
I don't know if you shared all the code with us, but from the code you provided 165px should be fine for the minimum width. If there is more code present that makes the navbar a different width then you may need to adjust the pixel amount of min-width:.
This should work
ul {
white-space: nowrap;
}
Related
I am new to html & css. I made a title and a nav bar on the same height but when I make my browser window smaller(liquid) the title and the nav bar collide. How can I fix this?
This is my css code for the title and nav. bar:
/*title*/
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
display: inline-block;
}
/* nav. bar */
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
/* unorded list */
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
/* text*/
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}
And this is the html code:
<div id="logo">
<h1>Baby kleding online</h1>
</div>
<div id="nav">
<ul>
<li><a href="../html/index.html"id="homenav" >Home</a></li>
<li><a href="../html/kleding.html"id="kledingnav" >Kleding</a></li>
<li>Bestellen</li>
<li>Contact</li>
<li>Vragen</li>
</ul>
</div>
Thanks in advance.
What I suggest is giving your logo an absolute position, and floating the nav over it, with a left margin that's the same as the width of your logo.
Example here :
http://codepen.io/anon/pen/uvAaJ
If you can expand your question with the behavior you're looking for it would help... as there are so many ways to handle this situation depending on what you want (absolute + margin, media queries, box-sizing:border-box...).
Hell o, I have floating menu fixed on top of the screen of my single page web site. When I click the menu item, page slowly scrolls down to appropriate section using jquery. I have this code for fixed menu on top of the screen:
<style>
.fixed_elements{ position:fixed; top:100px; }
#top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
ul{ padding: 0; margin: 0; }
.fixed-bar-buttons{ float: left;color: #fff; }
.fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
.fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
.fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
#content-panel{ float: left;margin-top: 40px; }
</style>
</head>
<body>
<div id="top-floating-bar">
<div class="fixed-bar-buttons">
<ul class="nav">
<li>REFERENCIE</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...
The code is OK and everything works fine. The thing I need to do is to modify the menu when it's on section2 and section3 only and add "UP" button.
When I load the page, I don't need the "UP" button, because It's not possible to go up and it's confusing to be there, so I need it only if I scroll down. Is it possible with CSS(1,2,3) only? Thank you!
Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The vertical offset is needed to make the decision whether to display the up button or not.
There is a way to do it with JS, but if you're asking for a CSS-only solution, I've given you the bad news already :P
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
I am making one simple horizontal menu with CSS and simple unordered list. The HTML of the menu is following:
<div id="navigation">
<div id="nav-holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
And CSS is as follows:
#navigation
{
display: table;
height: 35px;
width: 100%;
#position: relative;
overflow: hidden;
background: Black;
}
#nav-holder
{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#navigation ul
{
#position: relative;
#top: -50%;
}
#navigation ul li
{
float: left;
}
#navigation ul li a
{
padding: 5px 10px;
margin-left: 2px;
background-color: Red;
text-decoration: none;
font-family: Verdana;
color: White;
}
I want the menu to have a 2px margin around all of the link elements.
The problem I am facing is that while it renders itself fine in IE with all of the rights margins but both Chrome and Firefox (both are latest) are having the following issues:
The problem does not seem to be related to only this particular implementation but Ive seen it rise up from veertically centering the links with line heights and so on too.
I would like to find a way to have all of the margins to look the same or some way to avoid this problem all-together.
Basically, I got this thing sorted out. I set the same line-height and height attribute to all of the following: ul, li, nav holder. I did it because when it was not done, all of these were rendered differently from browser to browser.
In addition, I removed the positionings, vertical alignings, hav-holder div entirely and then some.
try
display: inline-block;
for your #nav-holder
My website URL is http://www.hentaireader.com
At the bottom right corner, I wish to put a small link on the red footer bar.
I have created a simple image of what I wish to do.
How can I achieve this??
The code on this page is a disaster. With that said you would have to remove the http://www.hentaireader.com/images/bar.gif image from the HTML and use CSS to create a background-image.
Something similar to this would be required...
CSS:
#footer-bar {
width:100%;
background-color:#f40000;
background-image: url(http://www.hentaireader.com/images/bar.gif);
background-position:top center;
background-repeat:no-repeat;
text-align: right;
margin-bottom: 10px;
}
#footer-bar ul {
width: 950px;
height: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
#footer-bar li {
display: inline;
line-height: 30px;
margin-left: 6px;
}
#footer-bar li a {
color: #FFFFFF;
}
HTML:
<div id="footer">
<div id="footer-bar">
<ul>
<li>Contact</li>
<li>Another Link</li>
</ul>
</div>
All characters on hentaireader.com are purely fictional and 18+ years of age.
</div><!--- FOOTER --->
Look here... http://jsfiddle.net/b8Xh7/1/
Ok, well first of all. Do you see the red bar? You have a div inside of the div you have an image. You should have put the (red bar) image as a background, and put a link inside the div. Then you could haver positioned the link where you wanted it with padding/margin.
#footer a {}
Example