I want to stretch background color (or an image) so it would look like the bottom example in
this jsfiddle
Same code but here:
Example1:
<div class="fixed_width">
<div class="header">Header</div>
<div class="menu">
Here be some menu
</div>
<div class="content">
Here be some content<br/>
ANd even more
</div>
</div>
Example 2
<div class="fixed_width">
<div class="header">Another<br/>Header</div>
<div class="menu2">
Here be some menu
</div>
<div class="content">
Here be some content<br/>
ANd even more
</div>
CSS:
body {background: lightgray}
.fixed_width {width: 500px; border: solid thin black;
margin: 20px auto; background: white;}
.menu {background: blue; color: white; padding: 20px;
margin-bottom: 10px;}
.content {background: white; border: solid thin gray;
margin: 5px;}
.menu2 {width: 500px; background: blue; color: white;
margin-bottom: 10px;padding: 20px 2000px 20px 2000px;
margin-left: -2000px;}
Bottom example is something I came up with but the problem is browser wants to scroll to those 2000px on the right.
The structure of the page is similar to the code in jsfiddle and as you can see there is no telling where exactly the top of menu will be - above it there will be a header which can have variable height (so I can not use a nice pre generated whole page background image).
I can not disable scroll because on smaller screens ppl wont be able to scroll. Please help me fix that (if possible).
put your menu in a wrapping element, give the latter a width of 100% (assuming it is the top most element), and center the menu:
HTML:
<body>
<div id="menu_wrapper">
<ul id="menu">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</body>
CSS:
#menu_wrapper {
width:100%;
background:blue;
}
#menu
width:1000px;
margin:0 auto;
}
Related
I'm experiencing an issue with overflow content in divs. I am using SharePoint and some of the content [namely Libraries or Lists or big webparts containing the aforementioned] will extend past the visible display space, but the body content doesn't scroll properly.
My structure looks something like this:
html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
#container { margin: 0 auto; min-height: 100%; }
#topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}
.topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
.social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
#main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
#content {width:80%}
#footer {background:#000; width:100%}
<body>
<div id="s4-workspace">
<div id="bodyContainer">
<div id="container">
<!-- this is the beginning of my custom coding, and my own styles. -->
<header id="topnav">
TOP NAV MENU HERE
</header>
<section id="main">
<div id="quicklaunch"> SIDE NAV HERE</div>
<div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
</section>
<footer id="footer"></footer>
</div>
</div>
</body>
What's happening is that the Content div that's set to 80% won't display content that extends past the screen properly. The content overflows but the background is my body color (dark Blue). I can't set the content div width to 100%, as that will make the entire div go under the sideNav AND it affects how webparts then display. [They stretch across the entire screen forever, since by default SP allows the webparts to take up full width of their containing zone].
Essentially, all I want is for the background color of my content div to stretch when the content overflows.
Please, i need some help here. 2 days i can't solve this elementary task. I'm new to the web design and may be this is easy but i just can't understand, why when i use align:left/right or position:absolute for the child divs – main div just disapaer... I want aside bar to the left, tabs under it, and the main content on the right. Please give me some advise, when i do wrong?
Here's a sample:
<div id="main_container">
<aside id="aside1">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
</div>
And the CSS:
#main_container {
background: #fff;
border-radius: 5px;
box-shadow: 1px 2px 5px 0px #606060;
-moz-box-shadow: 1px 2px 5px 0px #606060;
-webkit-box-shadow: 1px 2px 5px 0px #606060;
position: relative;
}
#aside1 {
margin: 10px 10px;
background: #c0c0c0;
width: 250px;
}
#container {
width: 680px;
}
.tabs {
}
I know that my Css is not finished but i just confused what should i do or use.. position, float, display...
I appriciate any advices!
position: absolute takes an element out of document flow. So, as far as that container is concerned, that child element no longer exists (at least in the sense it doesn't need to reserve space for its layout).
So if all the child elements of a container are positioned as absolute, then that container has no space which it needs to reserve, and collapses.
One solution would be to give the container a defined height, such as #container { height: 100vh; } which will set the height of the container to 100% of the viewport height.
Another solution would be to use something like the flexbox model.
Floated/absolutely positioned containers are removed from the "flow" of a document. This means that any containers around them don't think they exist anymore and the parent containers won't expand to fit around them. If you're using floats, the way to fix this is to put an element underneath the floated elements that uses clear: both like this:
<div id="main_container">
<aside id="aside1" style="float: left">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
<div style="clear: both"></div>
</div>
for example the CSS in a other way
#main_container {
width: 500px;
}
#main {
display:table;
}
#aside1 {
display:table-cell;
width: 40%;
background-color:#faf;
}
#container {
display: table-cell;
background-color:#555;
}
first you have to modify the structure:
<div id="main_container">
<div id="main">
<aside id="aside1">
<ul>...</ul>
</aside>
<div id="container">
<p>...</p>
</div>
</div>
<div id="bottom">
<div class="tabs">
<img src="images/tab1.png"/>
</div>
</div>
Then the css. The divs have to be defined with display:inline;
Mike
i have this fiddle: http://jsfiddle.net/z715whdj/1/ don't know what you need from css so please take a look at the fiddle.
<div class="container">
<div class="head">
<!-- Slogen and meta-links -->
</div>
<div class="carousel">
<!-- Maybe some headpics or a slider -->
</div>
<div class="logo">
<!-- Main Logo -->
</div>
<div class="navi">
<div class="logos">
<ul>
<li></li>
<li></li>
<!-- Placeholder for some logos -->
</ul>
<div class="clr"></div>
</div>
<div class="nav">
<!-- Navi UL -->
</div>
</div>
<div class="content">
<!-- Content comes here -->
</div>
<div class="footer">
<!-- Footer -->
</div>
</div>
the left blue bar should be the navi and it should be as high as the content+footer is (overlapping over footer). How can i get that?
I got the min-height aspect but it seems to be struggling because i get a scrollbar. i read through some of the questions here but i wasn't able to get some aspects of them.
is there a possibility to stretch the height of the navi in function of the content+footer or do i have to write a workaround and if i have to, how to write this workaround?
Try to set position:relative to container and position:absolute for navi. Set top property to compensate header height, and bottom to 0 to let navi fullfill container height.
CSS:
.container {
width: 970px;
padding-right: 3px;
padding-left: 3px;
background-color: #fff;
margin: auto;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.65);
z-index: 1;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #575756;
min-height: 100%;
height: 100%;
position:relative;
}
.container .navi {
float: left;
margin-left: 30px;
z-index: 3;
background-color: #233872;
padding: 20px 10px 20px 10px;
border: 3px solid #fff;
border-bottom: 0;
position: relative;
width: 220px;
position:absolute;
top:50px;
bottom:0px;
}
jsFiddle
EDIT:
As requested, I've created a new (simpler) layout to let container fullfill 100% height without vertical scrollbar: jsFiddle
On the following jsfiddle:
http://jsfiddle.net/oshirowanen/4fgkj/
Here is a snippet of the HTML as it would have been too much HTML to post up here if I posted the whole thing:
<div id="main">
<div class="inner">
<ul class="column">
<li class="one">
<ul>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
</ul>
</li>
<li class="two">
<ul>
<li class="main_content">
<p>content goes here</p>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
You will see that I have a menu and some content. The problem is that I don't want the content to wrap around the menu.
How do I stop that from happening?
First of all, don't use li for content, it's only used for displaying lists (such as menus).
Second - to answer your question - a structure like this might do what you want, and is quite regularly used:
HTML:
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapright">
<div class="right">
right
</div>
</div>
<div class="left">
left
</div>
<div class="footer">
footer
</div>
</div>
CSS:
.wrapper{
width: 90%;
margin: 0 auto;
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.wrapright{
float: left;
width: 100%;
background-color: #cfcfcf
}
.right{
margin-left: 220px;
background-color: #afeeee;
height: 200px;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
background-color: #98fb98;
height: 200px;
}
.footer{
float: left;
width: 100%;
background-color: #f4f4f4;
}
body {
padding: 0px;
margin: 0px;
}
LIVE DEMO
Of course, you'll have to adjust the CSS to change background colour, padding,... and the HTML to adjust the content. But I think you'll be able to figure that out.
Well, don't tell it to wrap around... in :
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
}
just remove the line
float:left;
You have to set min-height to your css rules (#main .column .one). If you set it, your content will be right the menu, but will not be wrapped around it.
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
min-height:600px;
}
All you need to do is add this to your styles:
.main_content {overflow: hidden;}
However, I must say, using a ul for page layout like that is not a good idea. Semantically, your page content is not an unordered list.
I am trying to make a div that contains other floating divs to adjust its width such that adding more floating divs (dynamically using jQuery) will only expand the div in its width, not allowing the floating divs to create a new line. Therefore, I want to fix this issue such that each div with class grid-row only expands in width, and so I will be able to scroll using the overflow: scroll for the parent grid div. I have searched a lot for answers, and it seems that it is a famous issue. However, non of the answer solved my problem.
I am currently doing this:
<div id="grid_container">
<div id="grid">
<div class="grid_row">
<div class="module" id="experience">
Experience
</div>
<div class="header">
Google
</div>
<div class="header">
Microsoft
</div>
</div>
<div class="grid_row">
</div>
</div>
</div>
CSS:
body {
}
#grid_container {
margin: 50px auto;
width: 500px;
height: 500px;
padding: 10px;
border: black solid 1px;
}
#grid {
overflow:scroll;
height: 100%;
}
.grid_row {
clear: both;
height: 50px;
}
.module, .header{
padding: 10px;
float: left;
border: gray solid 1px;
}
You can achieve this by making the row container float and have the style "white-space: nowrap;"
http://jsfiddle.net/UeNZr/3/
EDIT
An alternative is to make each item display inline and make each grid element float. http://jsfiddle.net/UeNZr/5/.
If you're making a list, consider using the more semantic ul.
Demo
HTML:
<ul class="grid">
<li>
<ul>
<li>One Mississippi</li>
<li>Two Mississippi</li>
<li>Three Mississippi</li>
<li>Four Mississippi</li>
<li>Five Mississippi</li>
<li>Six Mississippi</li>
</ul>
</li>
<li>
<ul>
...
</ul>
</li>
<li>
<ul>
...
</ul>
</li>
</ul>
CSS:
.grid ul{
margin:10px 0;
height:42px;
width:100%;
overflow-x:scroll;
background:white;
white-space:nowrap;
}
.grid li li {
list-style-type:none;
display:inline-block;
padding:10px;
border:1px solid gray;
height:20px;
}