I'm trying to stick both a header bar AND a logo to the top of the page. I have the header bar working great with position:sticky but the logo resides inside of a different div which is not nested (due to other existing elements). What would I need to do to make the following LOGO also sticky?
JS Fiddle Demo
.sticky {position: sticky; top: 0; }
.header-row {
width: 100%;
height: 35px;
margin-top:55px;
color: #FFF;
background-color: #1c1209;
border-bottom: 1px dashed #FFF;
}
.nav-logo-area {background-color: #076064; height: 200px; transform: none;}
.logo { width: 111px; margin: 0 auto;}
.content-area {background-color: #ACE0D5; min-height:1200px; height: 1200px;}
<!-- TOP ROW -->
<div class="header-row sticky">
header row here
</div>
<!-- LOGO & NAV -->
<div class="nav-logo-area">
This height set because nav menus and other content will go here.
<div class="logo sticky">
<img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-bird-symbols-png-logo-0.png" alt="Logo" />
</div>
</div>
<!-- MAIN CONTENT & BELOW -->
<div class="content-area">
Some main content here. Added some height to the div to we can see the scroll action.
</div>
Is this possible with CSS only? The existing layout has a TON of additional content so simply "moving" the logo div to a different location would require a lot of repositioning work so I am hoping to accomplish this with what I have here. Thank you so much.
Position sticky will be related to the parent element with position: relative.
You need to use position: sticky on the logo with top: 0, in this way your logo will stick to its parent element.
I added a black background to clearly show the border of the image.
.sticky {position: sticky; top: 0; }
.header-row {
width: 100%;
height: 35px;
margin-top:55px;
color: #FFF;
background-color: #1c1209;
border-bottom: 1px dashed #FFF;
}
#nav-logo-area {background-color: #076064; height: 200px; transform: none; position: relative }
.logo { width: 111px; margin: 0 auto}
img { width: 100%; background-color: black }
.content-area {background-color: #ACE0D5; min-height:1200px; height: 1200px;}
<!-- TOP ROW -->
<div class="header-row sticky">
header row here
</div>
<!-- LOGO & NAV -->
<div id="nav-logo-area">
This height set because nav menus and other content will go here.
<div class="logo sticky">
<img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-bird-symbols-png-logo-0.png" alt="Logo" />
</div>
</div>
<!-- MAIN CONTENT & BELOW -->
<div style="" class="content-area">
Some main content here. Added some height to the div to we can see the scroll action.
</div>
Related
I need to center images inside of multiple divs. Everything I try breaks.
These are four boxes, alternating red & blue - horizontal. Looking to have them centered in the page and pushed to the top under another div block. Within each block is an image, which is centered to the same % margin on all sides to the relative red or blue box. You can see below I tried both placing the image directly in a redbox/bluebox div or even going one layer deeper with a box just for the image.
4 Box Example - HTML:
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="images/2.png">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="images/3.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="images/4.png">
</div>
</div>
CSS:
box-container {
height: 900px;
width: 950px;
padding: 12px;
display: inline-block;
vertical-align: top;
margin-left: auto;
}
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
}
.thumbnail img {
display: block;
margin: auto;
height: 130px;
width: 150px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
You need to add padding to the image based on the height of your thumbnail div.
.thumbnail img {
display: block;
height: 130px;
width: 150px;
padding: 10px;
}
.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
display: block;
margin: 0 auto;
}
or
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
text-align: center;
}
using flexbox
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
display: flex;
align-items: center;
justify-content: center;
}
I believe I have what you are looking for in this here JSFiddle I just wipped up: https://jsfiddle.net/9yLspwr6/5/
A few key points before the code...
In order to have all the div elements 'float' left you ahve to apply div.className{float:left;} This will ensure divs float left to right and wrap around if they run out of space (much like a paragraph of text). More on CSS float property here: https://www.w3schools.com/css/css_float.asp
Vertical margin does not support 'margin:auto;' like it does for horizontal. Margin can be defined by div.ClassName{margin: 0px 0px 0px 0px;} OR div.className{margin:0px auto;}. The first element this way is for top/bottom margin. The second is for left/right margin. I had to use a little math to vertically center your images, but it gets you what you need. Here is some good documentation on margin: https://www.w3schools.com/cssref/pr_margin.asp
Cleaned up the HTML and removed some CSS no longer needed. I did this to simplify the code while maintaining the solution. If you drop this code into a site you'll want to ensure you only target only the appropriate tags. For example - my code is targeting ALL img tags. You would want to put a class or ID on the IMG tags you want and then ensure that is reflected in the CSS.
I modified the HTML quite a bit. Removed much of the unnecessary elements that were in place for troubleshooting.
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<img src="images/2.png">
</div>
<div class="bluebox">
<img src="images/3.jpg">
</div>
<div class="redbox">
<img src="images/4.png">
</div>
Modified CSS below:
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
float:left; // new. essentially left justifies the divs.
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
float:left; // new
}
img { // simplified the target. wrap entire contents of the HTML with a different DIV id to target only images within that div
display: block;
margin: 10px auto; // added 10px. it will then apply 10px margin to top and bottom, auto on left/right
height: 130px;
width: 150px;
}
That should do it. Hope it helps!
I design a single page web site with full width div without body scrollbar.
but I use scrollbar in div. And ı have a menu.
When I use top or margin-top in my div not show all content with full-height
.portfolio-content {
position: relative;
height:100vh;
margin-top: 70px;
}
.portfolio-item {
background: #fff;
padding: 10px;
#include shadow;
margin: 15px 0;
}
img {
width: 100%;
height: 200px;
}
<div class="portfolio-content">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-item">
<img src="https://placeholdit.imgix.net/~text?txtsize=2&txt=300×250&w=300&h=250" alt="">
<div class="portfolio-item-title">
www.example.com
</div>
</div>
</div>
</div>
[
I am a bit confused but can you try to adjust height:100vh; (increase) and check ?
I have a site that has a top navigation bar, a header, a sidebar and a content body next to the sidebar. The header, sidebar, and content body are positioned absolutely so that they don't move when you navigate to other pages that are using the same template. The sidebar and content body have scroll bars. The header and sidebar are always visible even with scrolling. This works great as shown in the demo. But suppose the top navigation changes height. Then the vertical alignment is off. Since this site is using a global top navigation that's used in other sites as well, the top navigation can change at any moment. When it does change, this layout will not be future proof. Is there a way to make this future proof?
What I have currently:
http://codepen.io/codingninja/pen/nKwox
body {
margin: 0;
padding: 0;
}
.content {
/*position: relative;*/
}
.top-nav {
background: #000;
height: 42px;
color: #fff;
}
.header{
position: absolute;
height: 100px;
width: 100%;
background: #ddd;
}
.sidebar {
position: absolute;
top: 142px;
left: 0;
bottom: 0;
background: #aaa;
overflow-y: auto;
overflow-x: hidden;
width: 100px;
}
.body {
position: absolute;
top: 142px;
right: 0;
left: 150px;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
What happens when the top nav changes height:
http://codepen.io/codingninja/pen/nICzK
.top-nav {
background: #000;
height: 100px;
color: #fff;
}
Do you mean this:
Css3 has a Calc() Function
Height: Calc( 100% - 100px )
Instead of absolutely positioning everything you can make use of display:table to achieve the layout you want. Using the following html
<div class="table">
<div id="top-nav" class="row">
<div class="cell">top-nav</div>
</div>
<div id="header" class="row">
<div class="cell">header</div>
</div>
<div id="content" class="row">
<div class="cell">
<div class="table">
<div id="side-bar" class="cell">
<div class="overflow">
sidebar
</div>
</div>
<div id="body-content" class="cell">
<div class="overflow">body-content</div>
</div>
</div>
</div>
</div>
</div>
And Css
html,
body,
.table {height:100%; padding:0; margin:0;}
.table {display:table; width:100%;}
.table .row {display:table-row;}
.table .cell {display:table-cell;}
#top-nav {height:42px;}
#header {height:100px;}
#content {height:100%;}
#side-bar {width:100px;}
.overflow {height:100%; overflow:auto;}
Example
You will notice that when your top nav grows, your main content area will shrink. You will also not get into a positioning / z-index nightmare
I found a solution that involves a line of javascript to set top to the calculated height based on the height of the top nav and the header.
$(".sidebar, .body").css('top', topnavheight+100);
I'm trying to have a fixed header on my webpage, i.e. it should always remain visible, even when scrolling. Note that my page is fixed width (800px) and horizontally centered on the screen.
What I've tried:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>
The separator is a horizontal line which should go all the width of the screen, see the footer.
Problems with this:
1. using the position:fixed also places it at left=0, instead of centered.
2. the separator doesn't show.
I can make the separator visible by placing it inside the header, but then the width is limited to 800px:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
<div class="separator clearfloat"></div>
</header>
The testpage is here.
How do I fix this?
I would position parent element as fixed and center header with margin: 0 auto;
jsFiddle Demo
Html:
<div id="top">
<header>Header</header>
</div>
<main>
<!-- Lots of content here. -->
</main>
Css:
#top {
position: fixed;
left: 0; top: 0px; right: 0;
z-index: 1;
/* The below styling is here for illustrative purpose only. */
border-bottom: 1px solid #c1c1c1;
background: #fff;
opacity: 0.9;
}
#top header,
main {
width: 500px;
margin: 0px auto;
}
#top header {
height: 100px;
/* Border styling is here for illustrative purpose only. */
border-left: 1px dashed #c1c1c1;
border-right: 1px dashed #c1c1c1;
}
main { margin-top: 100px; /* Should be the same as '#top header' height. */ }
Ok, a working solution.
In <header> wrap all the content (except separating line) with a <div>.
To that <div> you should add
overflow: hidden; //optional clearfix
width: 800px;
margin: 0 auto;
And also you should add width: 100%; to <header>
Just make your header the full width of the page and make that position: fixed;
Then wrap your header content in a div tag and set that to width: 800px; margin: auto;
This makes your header stay on a fixed position on top of your page.
And uses the div to set your menu/header data in the middle of the page.
I want to build CSS popup (or block) from three elements (top, middle, bottom).
I have always do it in simple way but there was no text area above the top/bottom part.
Now i have to build a custom background but don't have any idea how. Height of popup (block) should be dependent of content.
Is it possible to do without any JS hacks?
Slice it into nested boxes etc.
What i've tried is to create a container first, the a div for the arrow, then the content (with your background gradient) and a wrapper for the content (with the red background) and the content inside.
HTML
<div class="popup">
<div class="arrow"></div>
<div class="content">
<div class="wrapper">
<div class="top">Content top</div>
<div class="red-area">Your main content</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Now you've a nice html basis, with which you can play with floating, padding, margin, background-colors and rounded corners, like this:
CSS
* { margin: 0; padding: 0 }
body { background: #eee; padding: 50px; }
/* .popup { width: 250px; } */ /* If you wanto to manually set a width for the whole popup */
.arrow {
float: left;
width: 25px;
height: 50px;
margin-top: 10px;
background: white; /* your arrow image here */
position: relative;
}
.content {
margin-left: 25px;
background: white;
background: white url("your/gradient-image.jpg") repeat-x center bottom;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
.wrapper {
padding: 15px;
background: #ff7f7f;
}
I've floated the arrow to the left, left margin for the content and paddings for the wrapper.
It depends on border-radius and box-shadow which are supported in newer browsers.
If you like to support older browsers, then i recommend you to use more images for the visual effects.
Hope this helps. jsFiddle example
Try this:
-Divide the layout in 3 divs: top/bottom, with a fixed height and the top/bottom image as a background; and middle, using the middle image and repeating the background. Something like:
<!--Container-->
<div class="popup-container">
<!--Top part-->
<div class="top" style="height: 20px; background-image: url(top.jpg);"></div>
<!--Now the middle div with the background repeating only vertically-->
<div class="middle" style="height: auto; background-image: url(middle.jpg);
background-repeat: repeat-y;"></div>
<!--Bottom part-->
<div class="bottom" style="height: 20px; background-image: url(bottom.jpg);"></div>
</div>
Take a look on ColorBox it's so easy to use and u can customize it's css to do whatever you want.
you also able to define the popup content as a content from another page like that:
$.colorbox({href:"simplepage.html"});
Now the popup width will fit to whatever your page have....
it's apowerful tool try it.
I have found simple way to do it!
First create related block, inside content and three absolute blocks. Each of color don't overlaps other! Look at the example:
HTML:
<div class="popup-container">
<div class="content">
test 1<br />
test 2<br />
test 3<br />
test 4<br />
test 5<br />
test 6<br />
</div>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
CSS:
.popup-container {
position: relative;
}
.content {
z-index: 9999;
}
.top {
position: absolute;
width: 100%;
height: 20px;
background-color: red;
top: 0;
z-index: -1;
opacity: 0.5;
}
.middle {
position: absolute;
width: 100%;
background-color: yellow;
bottom: 40px;
top: 20px; /* height of top */
z-index: -1;
opacity: 0.5;
}
.bottom {
position: absolute;
width: 100%;
height: 40px;
background-color: blue;
bottom: 0;
z-index: -1;
opacity: 0.5;
}
http://jsfiddle.net/bhnuh/5/