I am trying to create a slider effect with a list of images. I need each one to by inline and take up with full screen width. I'm using float and also tried making the li's inline. The only thing that gets them on the same line is when they're not full width. How do I accomplish this while also having each li full-width of the screen? So they should extend past screen width.
Here is a screen shot of the current behavior:
https://www.awesomescreenshot.com/image/4177243/f8d1a38ce4b6096344f7f7befd4176fe
.mobile-slider-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 600px;
}
.mobile-slider-wrapper ul {
position: relative;
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.mobile-slider-wrapper li {
float: left;
display: inline;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
width: 100%;
}
You can use a combination of the vw unit and a non-wrapping container to achieve this effect.
Here's a CSS mock up:
#container {
/* This stops the items wrapping over onto the next line */
white-space: nowrap;
/* We set the width and scroll to stop this container affecting the entire page's width */
overflow-x: auto;
width: 100vw;
/* This prevents any gaps between inline elements, keep in mind that if your child elements contain text, they will need to reset the font size, or this property can be removed */
font-size: 0;
}
.item {
display: inline-block;
width: 100vw; /* Make the item take up the full windows width*/
height: 100px;
}
.item1 {
background-color: #F00;
}
.item2 {
background-color: #0F0;
}
.item3 {
background-color: #00F;
}
.item4 {
background-color: #FF0;
}
<div id="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
I think you'll need to use some JS to calculate the width on the wrapper. 2 slides = 200vw's, 3 slides = 300vw's, and so on.
$('.mobile-slider-wrapper').css('width', ($('.mobile-slider-wrapper').children().length * 100) + 'vw');
Related
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
I have the following code:
/* css */
.phone {
height: 100%;
width: 40%;
overflow: hidden;
padding: 0;
border-radius: 3%;
border: 2px solid red;
}
.phone .screen {
height: 50%;
overflow-y: auto;
background-color: #c3cee0;
}
.phone .nav {
background-color: black;
overflow: hidden;
color: white;
}
<!-- HTML -->
<div class="phone">
<div class="screen">
<p>Lorem Ipsum...</p>
...
<p>Lorem Ipsum...</p>
</div>
<div class="nav">
<p>Back</p>
<p>Home</p>
<p>Menu</p>
</div>
</div>
I want the phone to be responsive but in order to enable the scroll in the div.screen I need to set the height of the div.phone. The problem is that the red border is going beyond the phone's content.
I'd like the border to finish where the div.nav ends but I'm getting unwanted extra space. See this live demostration.
TL;DR
Live demostration.
I need to set a height (for div.phone) in order to enable the scroll for the text messages but then I get that extra space shown by the red border. How can I make div.phone (red border) be the same height of the whole content (without the extra space)?
Set height using calc().
.phone .screen{
height: calc(100% - 33px);
}
33px is the height of bottom nav.
Here is solution you need to remove height:100% prperty from .phone and define height in px in .phone .screen so it will work fine
Here is updated css
.phone {
height:auto;
}
.phone .screen {
height: 400px;
overflow-y: auto;
background-color: #c3cee0;
}
And here is live demo
I fixed the issue by using display: flex. Live demonstration.
Basically
.phone {
height: 50%; /* whatever height you need */
display: flex;
flex-direction: column; /* used to separate the divs vertically */
/* instead of horizontally */
border-radius: 3%;
border: 2px solid red;
}
.phone .screen {
flex: 9; /* screen will take 9/10 spaces from the div.phone */
overflow-y: auto; /* enables scroll */
}
.phone .nav {
flex: 1; /* nav will take 1/10 spaces from the div.phone */
}
I am trying to make a basic responsive structure for a website with CSS. So far I have managed to make three column divs, a menu, a sidebar and one for content.
What I would like to achieve now is to have the menu and the sidebar to be 100% of the viewport height and fixed so that the content div is "scrollable" but the menu and the sidebar stays on top no matter how much content there is in the col content column. Naturally, I do not want this to happen in the media query though.
How can I achieve this most efficiently with CSS. Do I have to restructure the divs in HTML or is there any way to achieve this with CSS?
/* SECTIONS */
.section {
clear: both;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
}
/* GRID OF THREE */
.menu {
width: 33%;
background-color: #98D2ED
}
.sidebar {
width: 33%;
background-color: #D3ADAD
}
.content {
width: 33%;
background-color: #C9E4D1
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.menu {
width: 100%;
}
.sidebar {
width: 100%;
}
.content {
width: 100%;
}
}
<div class="section">
<div class="col menu">
<p>
Menu
</p>
I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px.
</div>
<div class="col sidebar">
<p>
Sidebar
</p>
I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px.
</div>
<div class="col content">
Content
</div>
</div>
What I am trying to achieve:
You can use flexbox, either for known/unknown width and height elements, The key is to set the content area to overflow:auto, and switch the flex-direction to column in media queries.
jsFiddle
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.content {
flex: 1;
overflow: auto;
}
.menu { background: grey; }
.sidebar { background: silver; }
#media (max-width: 480px) {
body {
flex-direction: column;
}
}
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="content">
<!-- scroll test -->
<div style="height:1000px;">Content</div>
</div>
Or, the traditional way to set the menu and sidebar to position:fixed.
jsFiddle
html, body {
height: 100%;
margin: 0;
}
body {
margin-left: 200px;
}
.menu, .sidebar {
position: fixed;
top: 0;
height: 100%;
overflow: auto;
}
.menu {
left: 0;
width: 100px;
background: grey;
}
.sidebar {
left: 100px;
width: 100px;
background: silver;
}
.content {
overflow: auto;
}
#media (max-width: 480px) {
body {
margin: 100px 0 0;
overflow: hidden;
}
.menu, .sidebar {
left: 0;
width: 100%;
height: 50px;
}
.sidebar {
top: 50px;
}
.content {
height: calc(100% - 100px);
}
}
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="content">
<!-- scroll test -->
<div style="height:1000px;">Content</div>
</div>
As I understand, you want your .menu and .sidebar to be stuck to the screen in one place and have the content be scrollable. And add some more code to other things as well, I know that sounds vague, but it would be a waste of time to write everything down, as I have edited you I finished copy, and I have notes that explain all my changes (and the reasons for doing so) in the code below.
I removed the floats and their classes, as I believe those are not necessary, and that the floats do more harm than good. As well as moved the .content to be in the middle column (between .menu and .sidebar). However, if you need to, feel free to change any or al of these things back.
Here's the updated code: (and here's a JSFiddle: JSFiddle)
I know that .menu has a weird space above it (when running the snippet and the JSFiddle), but I have it live on my website here, and it behaves perfectly fine, and uses the same code.
* {
margin: 0px; /* Added to remove margin from everything */
padding: 0px; /* Added to remove margin from everything */
}
.section, .menu, .sidebar, .content {
display:inline-block !important; /* Added so they will line up next to each other */
}
.section {width:100%;} /* Pretty self explanatory, added to set ".section" to a width of 100% */
/* GRID OF THREE */
.menu {
width: 33%; /* Was already here */
background-color: #98D2ED; /* Was already here */
height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */
position: fixed; /* Makes it stay "fixed" to one place on the screen */
}
.sidebar {
width: 33%; /* Was already here */
background-color: #D3ADAD; /* Was already here */
position:absolute; top:0px; left: 67%; /* To make the element in the right place, add the width of "menu" and "content" */
height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */
position: fixed; /* Makes it stay "fixed" to one place on the screen */
}
.content {
width: 34%; /* Was already here, but changed it to 34 to make the website fill the page */
background-color: #C9E4D1; /* Was already here */
position:absolute; top:0px; left:33%; /* To make the element in the right place, make this the width of "menu" */
}
/* The CSS below this was already here */
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.menu { width: 100%; }
.sidebar { width: 100%; }
.content { width: 100%; }
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="section">
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
<div class="sidebar">
Sidebar
</div>
</div>
Really Hope that helped!
I am trying to set up my page layout to take up 100% of the screen but am running into problems with content overflowing into the footer.
Here's the code for the first example:
HTML:
<div class="container page-container">
<div class="page-leftSidebar">
<div class="sidebar" role="complementary">
<h4>Widget Title</h4>
</div>
<main class="post-wrapper" role="main">
<section class="entry-content">
<p>This makes the entire page 100% height, but <code>.post-wrapper</code> is not for some reason.</p>
</section>
</main>
</div>
</div>
<footer class="siteFooter">
<p>Copyright 2015 Me.</p>
</footer>
CSS:
/* Generic */
html,
body { height: 100%; }
body {
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
/* Containers */
.container {
margin: 0 auto;
width: 90%;
}
.page-container { min-height: 100%; }
/* Page Content */
.post-wrapper {
background-color: #fff;
min-height: 100%;
}
/* This is the row that will hold our two columns (sidebar and content) */
.page-leftSidebar {
width: 100%;
min-height: 100%;
}
.page-leftSidebar:after {
clear: both;
content:" ";
display: table;
}
.page-leftSidebar .sidebar { -webkit-background-clip: padding-box; }
#media (min-width: 60em) {
/* Page container */
.page-leftSidebar .post-wrapper {
-webkit-background-clip: padding-box;
min-height: 100%;
}
/* Left Sidebar */
.page-leftSidebar .sidebar {
float: left;
width: 19.25%;
}
/* Right Content */
.page-leftSidebar .post-wrapper {
float: left;
margin-left: 2%;
width: 78.75%;
}
}
/* Site Footer */
.siteFooter {
background-color: #2b303b;
color: #555555;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}
/* FULL PAGE HEIGHT */
.container { min-height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
I got things kind of working here, but my .post-wrapper container is still not 100% height: http://jsfiddle.net/1re4vLq4/10/
However, the above example does work if there is a lot of content on the page: http://jsfiddle.net/1re4vLq4/9/ (Note: that both this and the above example are using min-height)
Then I got the entire page (including .post-wrapper) to be 100% height by using height instead of min-height: http://jsfiddle.net/9m1krxuv/4/
Changed CSS:
.container { height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
However, the problem with this is when there is a lot of content on the page, it overflows onto the footer (you can see this by making the result pane in JSFiddle smaller): http://jsfiddle.net/1re4vLq4/8/ Which shouldn't be the case (nor do I want to hide the text using overflow: hidden).
Any suggestions or ideas on how to go about fixing this? I'm looking for the entire page to be at least 100% height, including .post-wrapper (which is the right column with a white background).
If you have a "full-sized" container that you want to always match the height of the viewport - you're best not to add content that will overflow (go beyond) that div, as you're essentially defeating the purpose.
Short answer: Remove height: 100%; from your .container CSS rule.
I've created a basic Fiddle example combining full-viewport-height divs, and divs that just hold a lot of content.
HTML:
<div class="full-div red height-full">
<!-- Full sized div. Content should fit within the viewport -->
</div>
<div class="full-div blue">
<div class="inner-div">
<!-- Add long lorem ipsum here. -->
<!-- Notice that the parent div does not contain the height-full class -->
</div>
</div>
<div class="full-div green height-full">
<!-- This div will get "pushed down"only because the div above is NOT height 100% -->
</div>
CSS:
html,body{ height: 100%; margin: 0; padding: 0; }
.full-div { overflow: auto; }
.height-full { height: 100%; }
.inner-div { width: 90%; background-color: white; margin: 0 auto; }
.inner-div span { text-align: center; }
DEMO here: http://jsfiddle.net/175mrgzt/
Ultimately, when you set a DIV to 100% - its expected to be 100% of the viewport (graphical viewing region of the browser). Once you add content that extends that you're essentially going over 100% - and in that case, you might as well remove the set height, and let HTML make the adjustments for you.