I am using an inline-block list as a horizontal navigation bar with drop down menus. But I can't seem to get it to fill up the entire width of the screen. To make it more frustraiting, when I change the zoom level of the browser screen, the list resizes at a different rate from everything else. Thus, on some zooms it is too long and wraps to the next line, and on other zoom levels it is too small and doesn't take up the full space. It is doing the same thing in both firefox and ie.
My css file is:
#topNavBar{
margin:0px;
padding:0px;
list-style:none;
width:100%;
line-height:45px;
float:left;
clear:both;
display:inline-block;
}
#topNavBar > li {
background:#141414 none repeat scroll 0 0;
cursor:pointer;
float:left;
position:relative;
padding:0px 10px;
display:inline-block;
}
#topNavBar .tabs {
text-align:center;
display:inline-block;
white-space:nowrap;
}
And then my html file is a more complicated version of something like:
<ul id="topNavBar">
<li class="tabs">blah1</li>
<li class="tabs">blah2</li>
<li class="tabs">blah3</li>
</ul>
This is kind of tough to call without seeing the whole code and without seeing a live example, but here are my ideas based on the info you've provided:
Try getting rid of the float: left; on #topNavBar, if you want it to fill the whole width, there shouldn't be any reason to float it. Also, try changing #topNavBar to a fixed width in px not by % and i wouldn't set #topNavBar to display: inline-block; just leave it as display: block;.
Related
I am trying to create a simple navigation menu that is fixed to the top of the screen, and will take up 10% of any screen's height. I also would like the navigation bar to be functional on all devices regardless of screen height and width; what I currently have gets messed up quite horribly if you should resize your screen or have a resolution that is naturally low. Also, I would like to have the text for each tab to be centered vertically, a task I am struggling to fix, having tried many methods, such as changing the padding, vertical-align, margins, and so on. I have searched and searched and tried many different approaches, such as using JavaScript to accomplish this, all without luck.
My current css:
#nav {
height:10%;
background-color:rgb(52, 152, 219);
position:fixed;
top:0;
left:0;
width:100%;
color:white;
font-family: Calibri;
font-size:24pt;
text-align:center;
}
#nav a {
display:inline-block;
height:100%;
padding-left:15px;
padding-right:15px;
}
#nav a:hover {
background-color:rgb(41, 128, 185);
}
And my HTML:
<div id="main">
<div id="nav">
<a>Home</a>
<a>Page2</a>
<a>Page3</a>
<a>Page4</a>
<a>Page5</a>
</div>
</div>
Thanks!
I fixed a couple things in your css and wrapped the links in div's.
#nav {
height:10%;
background-color:rgb(52, 152, 219);
position:fixed;
top:0;
left:0;
width:100%;
color:white;
font-family: Calibri;
font-size:24pt;
text-align:center;
}
#nav div {
display:inline-block;
padding:15px;
}
#nav div:hover {
background-color:rgb(41, 128, 185);
cursor:pointer;
}
And the HTML
<div id="main">
<div id="nav">
<div><a>Home</a></div>
<div><a>Page2</a></div>
<div><a>Page3</a></div>
<div><a>Page4</a></div>
<div><a>Page5</a></div>
</div>
</div>
Looked ok on browser resize, let me know if that's still an issue.
You can add to your nav css "z-index: -1;" to set it behind the rest of the content. You may need to add "z-index: -2; to you body css to keep your background image behind the nav bar. That should fix it to the top of your screen at least and have it remain there while the rest of the content scrolls
As for having the sizing go crazy, it's because you have a set font size. I think setting your font size to 2em will keep it at 24 for common size screens, but will allow it to adjust to smaller windows.
I kept searching on the Internet, but the only thing I get is how to avoid/prevent the div elements on wrapping/floating when resizing the browser. My problem is exactly the opposite: I have an horizontal menu and I'm trying to wrap down the elements (eg. Home, Contact etc.) once the browser is shrinking and then, to return to its initial state when the browser is maximized.
Here is the HTML document:
<div id="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
And the CSS is something like this:
#menu
{border:1px;
height: 40px;
width: 400px;
clear: both;
float: left;
position:relative;
top:20px;}
#menu ul
{list-style-type:none;
margin:0;
padding:0;
overflow:hidden;}
#menu li
{float:left;}
#menu a:link,a:visited
{display:block;
width:100px;
font-weight:bold;
text-align:center;}
I tried to change the height and width to auto, remove/shift the clear, float, overflow and position tag, I even changed the float:left in "#menu li", to float:none, but then the menu elements get fixed one after another and it stays that way, even if I resize the browser.
I also, divided each of the menu elements with div (is not in the code below), but without any succes.
Do I have to change the CSS code entirely or to do this with js, jquery etc.?
If so, how?
DEMO
This can be achieved simply by removing the fixed height widths.
Elements with unspecified widths are set to width:auto which is usually the size of the elements contents. Floated elements will wrap if they cannot fit on the page adjacently.
CSS
#menu{
border:1px;
clear: both;
/*height: 40px; Remove*/
/*width: 400px; Remove*/
float: left;
position:relative;
top:20px;
background:#58c;
}
#menu ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#menu li{
float:left;
}
#menu a:link,a:visited{
display:block;
width:100px;
font-weight:bold;
text-align:center;
}
You are setting the width of #menu to 400px which fixes that width, no matter how wide the browser window is. Use this one:
width:100%;
max-width:400px;
Not sure if the title is the real issue, but my horizontally scrolled list of images is not playing nice. I want all the images to bunch up (effectively float) next to one another (which I've managed to achieve using display:inline thus far). But I want them to all be 100% height of the window/body, and it isn't playing nice.
Here's my HTML:
<body>
<div id="content">
<ul id="content-images">
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
</div>
</body>
And the CSS:
html, body{
margin:0px;
border:0px;
padding:0px;
height:100%;
}
#content{
height:100%;
background-color:green;
}
#content-images{
height:100%;
white-space: nowrap;
}
#content-images li{
font-size:0;
display:inline;
height:100%;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
The problem is a small gap of about 2/3px that runs along the bottom of the li items. It is hard to tell if it is part of the body or part of the list items, but either way it is an annoying anomaly.
I'm viewing in Chrome. I've attached a screenshot. Note the bottom white line. To be clear, I'm happy for the images to run off the page on the x-axis, and for the client to scroll horizontally through the images, but I don't want any gaps on the vertical, between the images and the edge of the window.
Update:
I'm unable to replicate the issue in jsFiddle because the fiddle seems to have difficulty with styling the html, body and relatively-sized images. I haven't got the time or pateince to figure out why.
I've decided to go for a hack. A mixture of vertical-align:bottom on the img and an overflow-y:hidden on the html and body. This will make any whitespace after the list items redundant, as the viewable area will be restricted.
You can prevent this using vertical-align: bottom on your image tag, like so:
img {
vertical-align: bottom;
}
Hope this helped.
You're getting thing problem because of display: inline [Reason here]. Alqin is right, float:left will solve the problem, but you also have to remove display:inline. If you want horizontal slider, you can increase width of ul to sum of widths of images and use overflow-x:hidden or overflow-x:auto on its parent div.
PS: Its not a good idea to use height:100% on all elements. It will make your page look weird when the content overflows.
I changed the CSS to following, and also removed properties that I thought were unnecessary:
html, body{
margin:0px;
height:100%;
}
#content{
height:100%; /* a bad idea */
background-color:green; /* add this to body if you want whole body green */
overflow-x: auto;
}
#content-images{
height:100%; /* again, a bad idea*/
width: 3000px; /* sum of widths of images I used to test */
}
#content-images li{
font-size:0;
float: left;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
Have you tried removing the margin from the unordered list element?
#content-images{
height:100%;
white-space: nowrap;
margin: 0;
}
Use float left instead of inline:
#content-images li{
float:left;
}
That space is because inline elements have a space after them. Add an margin-bottom:-4px to images. Also give the images display:block. Play will all this, you should be able to fix your problem.
I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:
And here are my related CSS blocks:
.skills {
overflow:hidden;
height:100%;
}
.skills li{
border-bottom:1px dotted black;
position:relative;
width:200px;
height:18px;
margin-left:13px;
}
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
padding:0 5px;
}
Here is the HTML:
<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
<li>
<span>SOAP/Axis2</h4>
</li>
</ul>
Can you tell why this is aligned to the top? I want it in the center.
And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?
...where the same code results it in text being in the center. Does
that mean that CSS elements higher in the hierarchy may be causing it?
I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.
The default value for line-height is roughly 1.2x (depends on browser).
Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).
Example fiddle: http://jsfiddle.net/4vq42/
No line-height. Make it the same as the height, either 18px or 100%.
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
line-height:18px;
padding:0 5px;
}
Try adding line-height: 18px to .skills li span CSS.
Edit: Just realised Tim Medora already said this. Ignore me.
Setting line-height to the value of your element's height is the simplest way to vertically align text.
.skills li {
height:18px;
line-height:18px;
}
I have a <ul id="slide-holder"> which contains several <li class="slide">.
css:
#slide-holder{
position:absolute;
width: 720px;
height: 540px;
background-color:#FFF;
display: block;
list-style:none;
}
.slide{
width:720px;
height:540px;
display:inline-block;
list-style:none;
}
html:
<ul id="slide-holder">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
The problem is that instead of having each <li> element next to each other with a huge horizontal scroll bar being displayed, everything is displayed as a block i.e. vertical scroll bar is shown.
I was wondering if the window has a maximum limit of width that cannot exceed or if it is just a minor css issue?
Try to float your lis:
.slide{
float:left;
width:200px;
height:540px;
list-style:none;
}
ul .slide:last-child {
clear:both;
}
This is a css property and not an issue. The overflow will by default be wrapped, thus rendered on a new line. This is expected behavior, as you want your text (inside a <p> tag for example) to be rendered on new lines, when they reach the right edge of its parent.
This is default for all elements, so to remove the wrapping, you need to change the white-space property in your css:
ul{ white-space: nowrap; }
An example of non-default wrapping is seen in notepad. You need to select "wrap text", if you want to get rid of horizontal scrollbars.
jsFiddle here