What I'm trying to build:
Essentially, a collection of vertically and horizontally divs that have content, using flexbox - pretty straightforward.
My issue:
When I start adding content - and the content starts exceeding the window, I can't seem to reach it: I can't scroll up or down to look at overflown content.
My build:
This is what my body looks like,
<body>
<div id="flex-container">
<div class="content">
<!-- content and other stuff -->
</div>
<div class="content">
<!-- content and other stuff -->
</div>
</div>
<body>
And this is what my style.css looks like,
#flex-container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100%;
}
.content{
width:75%;
}
I have tried setting overflow properties to no avail. If I don't add the height:100%; the content doesn't get centered vertically.
Thank you in advance!
You can add overflow: auto; to the div, this will add a scroll bar to see the extra overflown content
Related
I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/
I know the footer has to be fixed.
I know the content needs to have a higher z-index
I'm guessing (sort of) that the body needs to have a margin-bottom which is equal to the height of the footer???
Please would someone help me out.
I'm using Twitter Bootstrap 4. The general markup looks like this:
<body>
<div class="container"> <!-- This part should scroll up to reveal the footer below -->
<!-- Content goes in here -->
</div>
<footer class="footer"> <!-- This should be hidden initially -->
<div class="container">
<div class="row">
<!-- Footer stuff goes in here -->
</div>
</div>
</footer>
</body>
You will want to add a main content div and then give this div a background color of whatever you want your page to be otherwise you will just end up having text overlapping but yes you are right you will want to give your main content div a z-index of 1 or something and then fix your footer behind that and give it a z-index smaller than that in my example I gave it a z-index of -1. Then your main content div will scroll over the top of your footer. You will probably want to give your footer a height and your body a padding-bottom of the same height.
Here is an example of how I did it Fiddle Demo:
Html:
<div class="main-content">
<div class="container">
<div class="row">
Your main Content Scroll down
</div>
</div>
</div>
<footer>
<div Class="container">
<div CLass="row">
Footer Content
</div>
</div>
</footer>
Css:
body{
padding-bottom:200px;
}
.main-content{
min-height:200vh;
background:#fff;
z-index:1;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
background:#000;
color:#fff;
z-index:-1;
}
I have a container that holds an image, some text and a footer
The image is situated at the top with the text underneath, followed by a footer that simply contains some additional metadata
I want to be able to hover over the content (Excluding the footer) and for it to all highlight
The issue I have is that I cannot make the "text" div span all the way to the bottom where the absolute positioned footer begins.
The footer will highlight on hover independently. I don't want the content hover to effect the footer and I don't want the footer hover to effect the content hover
Here's a codepen link to an example which shows that the blue highlight only covers to the bottom of the text, opposed to the entire panel up until the metadata footer http://codepen.io/anon/pen/bVNeqr
An assistance or guidance here would be greatly appreciated.
HTML
<div class="item">
<div class="content">
<div class="image">
<img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
</div>
<div class="text"> Text here </div>
</div>
<div class="footer"> Footer </div>
</div>
Insted of position:absolute you can use css3 "flex" property to solve this problem. Try to add this to your code.
.item {
display:flex;
flex-direction:column;
}
.content {
flex-grow:1;
}
Here's an example
Something like this?
I just added some plain CSS stuff and it seems to work fine.
http://codepen.io/KingK/pen/bVNeoo/
.text
{ height: auto; }
If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire
Sorry, I couldn't post images without a higher reputation, so I linked them below:
PSD:
HTML:
Okay, the PSD screenshot is of what I want the alignment to do.
And the HTML screenshot is it's current form.
As you can tell, the sidebar is currently below the orange bar (nav) and the grey bar (banner). I know there is a way to make its position absolute and overlay it on top, but seeing that this is built on a responsive grid, I think that would ruin it.
Does anyone know of anyway to overlap the sidebar like it is shown in the psd without ruining the responsiveness?
I'm open to any and all suggestions.
Thanks!
Code:
<div class="container">
<div class="row">
<header> content </header>
</div>
</div>
<nav> content </nav>
<div class="container">
<div class="row">
<div class="col-sm-9">
<section>
<!-- Services Section Content -->
</section>
<services>
<!-- Clients Section Content -->
</section>
<section>
</div>
<div class="col-sm-3">
<!-- Sidebar -->
</div>
Using position:absolute would not ruin your responsive layout if you edit your media queries to compensate.
Alternately, try a negative margin on the sidebar element and set the z-index to be higher than the top bar element. Example:
header {
width:100%;
height:100px;
background:#ccc;
z-index:100;
}
.col-sm-9 {
width:200px;
height:500px;
margin:-50px 0 0 0;
background:#000;
z-index:200;
}
Have a fiddle: http://jsfiddle.net/68ANR/
It will perfectly works.Try it because position:absolute give the position to the main div or the parent div.
.col-sm-9 {
position:absolute;
left:/*give here from left*/px;
top:/*give here from top*/px;
width:200px;
height:500px;
background:#000;
z-index:200;
}
Hope the answer !
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}