in my website there is 3 vital parts
Top Bar (must remain in the top, not fixed, 40px height, 100% width)
Timeline this is always floating left to the main area, the timeline is not re sizable, it is neutral in size
main area re sizes with the window it is Horizontally scrolled so it can be small width as long as you can still keep scrolling right/left
here is my progress so far......
JSFiddle
My issues:
the top bar child elements are not aligned. like those simple inputs/text is at the bottom of the topbar and part of it is hidden, this doesnt happen with the image removed?? i need the top bar to always keep elements inline vertically centered and never resize in height
i cant get timeline and main area to take up the remaining height, i have them at 800px because nothing was working.
width: 100%;
height: 100% !important;
margin: 0px;
I added a padding and checked your fiddle it looks much better. Is it this what you are after?
.top_bar
{
z-index:100;
width:100%;
height:40px;
max-height:40px !important;
background-color:#ffff00;
color:black;
padding:40px;
overflow: auto;
}
For your top bar just float your image:
.wtblogo {
float:left; /* Add this to your current CSS */
}
and add a line height equal to your top bars height to vertically align objects with in it:
.top_bar {
line-height: 40px; /* Add this to your current CSS */
}
I am not sure what you mean for your second issue.
For #1 you can easily fix it by adding:
vertical-align: middle;
to your image class.
So you'll have:
.wtblogo {
height: 40px;
vertical-align: middle;
}
For #2, I'm not sure what you're trying to do. Could you clarify?
Related
I would like to have my menu bar across the entire screen, currently it is in the middle with white space on either side. I would like the bar to be stretched along the top of the page but for it to not "hover". I have tried the position:fixed and that has achieved the look of the menu that I want however I don't want the menu bar to be fixed to the top of the screen as the reader scrolls down the page. The URL to my blog is as follows : http://www.blankesque.com and I have included the css coding for the menu bar below :
#topdropcont {
width:100%;
height:45px;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:absolute;
background:#f5f5f5;
}
Change position:absolute; to position: fixed;
The other option is running the following jQuery script that calculates the width using JS
$("#wctopdropcont").css('left',($(document).width() - 1080) / 2 * -1).width($(document).width());
Best I can tell (and assuming I understand how you want your page to look), the problem isn't in your topdropcount, it's in your content-outer, which appears to specify a space that's 1080 pixels wide.
If you dont want a fixed header you have to change the position attribute of div.content-outer & .fauxborder-left to position: static (actually relative).
The problem here is you're using a relative width (100%) inside of a defined width container (.content-outer{1080px;}). You can see how this works by adding a larger relative width to your #topdropcont. (e.g. #topdropcont {width: 120%;}).
You can easily solve this by moving the markup of the menu outside of that container.
Just like #Matthew Darnell said your class content-outer has the following css styles min-width: 1080px and max-width: 1080px so having a width of 100% on your menu will give it a width of 1080px. If you don't want to move your menu outside of countent-outer, you can make the following changes to your css:
1) Remove min-width: 1080px and max-width: 1080px from .content-outer
2) Add min-width: 1080px, max-width: 1080px and margin: 0 auto to your header tag and to .main-outer
This should solve your issue.
Since first parent element of the Menu that has 100% width is .content, make sure it has position: relative, than make sure all other parent Menu elements have no position set. Than you can set your menu container to absolute positioning.
Final CSS should be:
.content {
position: relative;
}
.content-outer {
/* REMOVE: position: relative; */
}
.fauxborder-left {
/* REMOVE: position: relative; */
}
#wctopdropcont {
position: absolute;
/* Fading script should be removed...
it changes opacity and display, so: */
display: block !important;
opacity: 1 !important;
}
What you get after is this:
First off let me assure you I've searched and tried so many solutions to this seemingly simple layout without success.
For now I've had to resort to laying it out with display:table, but would very much prefer a non-script, pure CSS solution using divs.
What I need is a basic 2-column layout: A sidebar div hugging the top-left and a content wrapper div to the right of the sidebar.
The sidebar will contain 3-4 divs, the content wrapper 1 div.
The kicker is I need the background of the sidebar and content wrapper always to fill 100% height of the viewport - even if there's no content inside the content wrapper div.
If there's content inside the content wrapper div, the background of both the sidebar and content wrapper should expand vertically to fill the viewport.
The fiddle below does exactly this. The problem with this approach (using position:fixed on the sidebar) occurs once you start "zooming" on mobile devices. The content will then disappear behind the fixed div.
Any advice on how to best achieve this layout?
Fiddle: http://jsfiddle.net/mnorup/2Xvdn/1
I think I got something quite close to what you want: http://jsfiddle.net/2Xvdn/5/
What I changed:
added a wrapper having the id outside and added the following css to it: {
overflow: hidden;
min-height: 100%;
}
replaced the css for sidebar by {
background: yellow;
width: 230px;
float: left;
margin-bottom: -9999em;
padding-bottom: 9999em;
}
removed min-height for contentwrap and added the following css: { margin-bottom: -9999em;
padding-bottom: 9999em;
}
Here are some other approaches to have columns with equal heights: http://www.vanseodesign.com/css/equal-height-columns/ I used the here described Borders and Negative Margins, just that I used padding instead of borders.
Is this doable for you? FIDDLE
I just changed a width and floated.
CSS
#sidebar {
height: 100%;
background: yellow;
width: 230px;
border: 0px solid transparent;
float: left;
}
#contentwrap {
min-height: 100%;
background: blue;
float: left;
margin-left:10px;
OK, see if this is closer. FIDDLE
The container for the text is the container for everything, and as it expands, so will the bar on the left.
Smaller contents so you can see the background - FIDDLE
I'm building a page that has a list on the left, and a container showing a single item's details on the right. Here is a sample image showing the page layout and the parts I want to scroll.
In both the left container and the right container, I need to scroll when the data exceeds the container's viewport height. I only want the red-highlighted containers to scroll--the outer blue container is fixed, and the yellow portion inside the blue container is fixed. Only the red containers' contents should scroll, only when applicable.
I've put up a codepen where I'm playing around with it and can share it with you (the app itself is behind firewall, codepen is the best I can do). What you'll see on the codepen is that I can get the container to scroll when I set it's height (in this case, 380px, which is loosely about how much space is there on screen). If you move the sample codepen's container up, you'll see the scroll area stays fixed (duh), and if you increase the height of the scrollable container beyond 380px, once you go below viewport, scrolling starts to go away--at around 800px or so it completely goes away.
What the heck am I missing here? The blue containers should size themselves to the bottom of the viewport, whether it's 800px high or 1600px high. Then The red container's height would fill that available height inside the blue container, and scroll if necessary.
I'm really stumped on what I'm missing here.
Edit: jQuery and javascript sizing are not options. This is achievable by CSS only, I'm just missing some property somewhere and am stumped.
Edit 2: I tried the suggested html (html: height:100%, etc). It works in codepen, but when I attempt it on my full version of the site, it doesn't work. In the screenshot here, you can see the blue high-lighted area is the scroll container in question, and the white bar on the right is the scrollbar (custom-styled background) but no actual scroll--just the bar background.
I have implemented a basic version which should help you out.
You can find the code over at https://codepen.io/hunzaboy/pen/aWmMeJ .
Here is the CSS
body,
html {
overflow: hidden;
}
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
width: 20%;
background: blue;
color: white;
overflow-y: scroll;
}
.content {
background: yellow;
color: brown;
overflow-y: scroll;
}
with css just use overflow-y:scroll and define the max height, or just height
.that-box {
overflow-y:scroll;
height: ###px;
}
--edit: and hide the scroll bar at a certain width
#media screen and (max-width: 1024px)
{
.that-box {
overflow-y:hidden; //this will cause clipping on content outside of the box
height: ###px;
}
}
--edit2: a CSS solution
html {
min-height:100%;
position:relative }
body {
height:100%}
.box {
position:fixed;
height:100%;}
The solution I like to use is through use of the view width (vw) and view height (vh) units. Using 100 respectively for each is the equivalent of your viewport's current size.
HTML
<div class="dashboard">
<div class="left-panel v-scroll">
<!-- the stuff on your left nav -->
</div>
<div class="right-panel v-scroll">
<!-- the stuff on your right nav -->
</div>
</div>
CSS
.dashboard{
width: 100vw;
}
.left-panel{
height:100vh;
width: 20%;
float:left;
margin-left: 20px;
}
.right-panel{
height:100vh;
width: 76%;
display: flex;
}
.v-scroll{
overflow: scroll;
}
This will ensure that they will scale according to how your screen size changes.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
I need to align a image to the center of the browser window, therefore i created the following css:
#charset "utf-8";
/* CSS Document */
html {
background-color:#CCCCCC;
}
body {
margin:0px 0px 0px 0px;
}
img {
position:absolute;
border:0px;
left:50%;
top:50%;
margin-left:-156px;
margin-top:-217px;
}
The problem is however that if you make the browser window very small, the image floats out to the top and the left. Instead it should be fixed in the top left corner, and then give the possibility to scroll to see the rest of the image.
View the problem here: ejlstrup.com
Try the following css:
img {
border: 0px;
margin: auto auto;
}
The problem will be with your negative margins, they are what is causing the image to be pushed to the left out of view. If you use margin: auto auto, it should center the image for you and you won't have to use absolute positioning with percentages.
Edit: Just tested my method and it didn't work as intended. What you can do then (if you don't mind using a div), is to wrap the image in a div. Make the div the size of the image, then the margin: auto auto; will work properly.
Edit2: Credits to Senthil for pointing out that if you set the image display property to block, you don't have to wrap the image in a div for it to center. However, auto isn't working for centering the div vertically, if it needs to be center you can use a percentage (although I'm not sure if this can cause problems with different resolutions).
img {
border: 0px;
margin: auto;
display: block;
}