Menu bar 100% width - html

I've got a menu bar here: ---
Now when you resize the window (so there appears a horizontal scrollbar) and you scroll to the right, the background is vanished! How can I solve this problem?

#kevin; may be you have to define min-width for your menu bar.
for example
.menu{
min-width:1200px;
width:1300px;
}
for more :
Min width in window resizing
http://friendlybit.com/css/min-width-and-max-width-template/

You should wrap everything in a new div, and apply min-width: 960px to that.
<div id="container" style="min-width:960px">
<div id="ovoMenu">
..
</div>
<div id="ovoSubmenu">
..
</div>
</div>
You could just set the min-width on body, but I'm not sure what else will be going on that page.

Related

Center content with fixed background

I want to center all the content of a website with a fullscreen background even when resized with CTRL + scroll mouse button on windows.
Website exemple : http://www.benzinga.com/
If you press CTRL and use the scroll button on your mouse, you will see that the background of the header stays full screen, but the content stays centered.
Is it possible to do that only with HTML and CSS?
Can you show me how?
I think this is what you are going for. The width for the content div should be in terms of px rather than % in order for it to properly zoom.
Here is the HTML:
<body>
<div id="content">
</div>
</body>
Here is the CSS:
body {
background:url('http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg');
background-size:cover;
}
#content {
background-color:red;
width:1000px;
height:500px;
margin:auto;
}
My solution would be to use Bootstrap's container div.
Once you include Bootstrap,
Simply use:
<div class="container">
...
</div>
The content will stay within that, in the center of the page, very similarly to she site you linked, even when you zoom in.

How to set changable width ( div with background ) to make look good on different devices?

I'm using Twitter Bootstrap. Here is my problem: I need to set div's background color,which should be full screen, but when I try :
and my HTML:
<div class="rowHome">
<div class="container">
<div class="row">
...
</div>
</div>
</div>
and full CSS:
.container{
width: 960px;
}
...
.rowHome{
margin-top:10px;
width:100%;
background-color:#400143;
}
it look like this, when I resize page:
but when I scroll right I see the bug:
Can someone tell me where is my error ?
This type of problem is mostly come when the parent have flexible width & his child have fixed width. Write this in your css:
body{
min-width:960px;
}
Check this for more iPad background for div blocks not spanning entire width of screen

Make DIV Scrollbar Main Page Scrollbar?

I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;

Hide horizontal scrollbar caused by specific div

i've got the next html:
<div id="container">
<div id="content"></div>
</div>
The container div is 1050px wide and includes only the shadow background that is repeated vertically.
The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.
What do I need - that a horizontal scroll bar appears only if the browser window is smaller than content div, but container div shall not cause scroll bar to appear. How can i make it?
overflow-x:hidden does not work.
Thx
http://jsfiddle.net/98Eqf/1/
I would suggest using a media query then, to check if the browser is 950px wide and then make the scrollbar appear. That'll allow you to use overflow-x:hidden; while it's larger and then once it becomes smaller you can just do overflow-x:scroll; and make the bar appear.
http://jsfiddle.net/hobobne/98Eqf/2/

Scroll - use the page/browser scroll bar to scroll a specific div element only

The problem: I have a layout of the following:
<div class="container">
<div class="filters1">
</div>
<div class="filters1">
</div>
<div class="stream">
<div class="item"/>
<div class="item"/>
<div class="item"/>.......
</div>
</div>
I want the page to have the standard browser scroller but that it would scroll the stream div only
I tried defining the filter1 div's as position:fixed. but this causes some cross-browser problems and resizing issues. (needed chrome css hacks not to talk about IE7)
Is there a standard solution I can use, various searches did not help...
Thanks
By 'fixed' you mean 'position:fixed' or that you gave it a fixed width and lenght? (I don't why this latter option may have such difficult rendering issues).
Try
.stream {
width: XXpx; /*put your width here*/
height: XXpx; /*put height here*/
overflow:scroll;
}
EDIT: sorry misread the question, do you want the WHOLE page having scroll bars or just the DIV .stream?