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
Related
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;
What simple CSS mistake am I making?
I have a number of images setup in a ul as part of a gallery, each with a hover over text box
For everything except mobile breakpoints, I'd like them (the thumbnail versions) to line up 4 across.
By setting the width to 25%, I thought the following would handle that, but it's breaking it into 3 across with a bunch of space on the right side of the container - as if there was padding on the container or margin on the images forcing a new row.
There also appears to be a small amount of margin or padding on all sides of the image. I've double checked each element through the browser and there is no margin or padding being applied from some other rogue style that I may have missed.
JSFiddle Example Here
UPDATE: On my fiddle example, the hover-over text box is clearly going beyond the right edge of the image, but the css sets it's width at 100%. Do I just have my positioning screwed up?
Link to live page at www.deckdoctors.net/bay-area-deck-ideas.html
Abridged HTML:
<div id="gallery">
<ul class="nivo">
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
</ul>
</div>
Abridged CSS:
#gallery {
width:100%;
padding:0;
}
#gallery ul {
list-style:none;
margin:0;
padding:0;
}
#gallery ul li {
display:inline;
position:relative;
margin:0;
padding:0;
}
#gallery ul li span {
visibility:hidden;
position:absolute;
width:100%;
left:0;
bottom:0px;
z-index:3;
background:rgba(0,0,0,.6);
color:#FFF;
text-align:center;
}
#gallery ul li:hover span {
visibility:visible;
}
#gallery ul li a img {
width:25%;
margin:0;
padding:0;
}
Here's the issue:
Inline elements will have spaces after them which makes the last item on the row drop to the next line, so if you set a width of 25%, you'd need to counter for the spaces produced after each <li>.
A better way to do this would be to use float: left (which makes elements 'block-level') on the <li> and set it's width to 25%.
eg.
ul li {float: left; width: 25%}
See this fiddle: http://jsfiddle.net/pavkr/685m0b5z/
Also see this screenshot of it in action on your website:
Here's my fix: http://jsfiddle.net/3rmzz59m/1/
I believe the problem is related to the inline lis; sizing is a bit weird when it comes to inline elements. By changing them to inline-block and setting the width on the li elements instead, the extra spacing around them goes away.
Make the width of images 24% instead of 25%
#gallery ul li a img {
width:24%;
margin:0;
padding:0;
}
also set text-align:center for Gallery:
#gallery {
width:100%;
padding:0;
text-align: center;
}
Checkout this DEMO: http://jsfiddle.net/3rmzz59m/2/
I try to use the
position:fixed;
width:10in;
but when resize the browser, the contents go out of boundary(there's no way to reach those elements).
i need an alternative because i want the nav bar to be at top at all times.
edit: i also want the contents to be inline which is not served by using
width:100%;
display:inline or inline-block
check here - http://jsfiddle.net/dF4Bx/1/
In simple language -
I need that the browser should provide a horizontal bar if the width is not fullfilled by the resized window.
Making your top bar sticky with CSS
#header{
position:fixed;
left:0px;
top:0px;
height:30px;
width:100%;
background:#999;
}
I see what's your problem.
Use this HTML instead of yours:
<div class="back">
<div id="header" class="front">
<ul>
<li>Home</li>
<li style="float: right;">Login</li>
<li style="float: right;">Register</li>
<li style="float: right;">Search: <input type="text" class="textbox" name="sr"></li>
</ul>
</div>
</div>
And put this rule into your CSS:
#header ul li {
margin-right: 7px;
}
And too, change this width 8in to 95%:
div.back div.front {
background-color: #0072C6 !important;
margin: auto;
width: 95%;
}
Note that i removed the inline style padding of search element.
Try with below CSS,
position:fixed;
top:0;
width:100%;
z-index:99;
8In is such a big value and moreover it is fixed width that's why it keeps going beyond browser. Use % values for responsive designs.
So change width like this
div.back div.front {
width:100%;
}
then about keeping the elements inline,
Use something like margin-left:20% instead of 24In in padding:24px 20px 24px 2in!important;.
Even it will break the line when it reaches a limited browser window. You can reduce this range by avoiding larger fixed values of padding and width in your code.
Check Fiddle: FIddle
to arrive to your purpose you can try this code :
.divClass{
position:fixed;
top: 0px;
z-index: 99;
width: 80% /*for responsible width*/
}
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 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;.