I'm wondering if someone could help me e to create a fixed/sticky header... Not quite sure how to make this happen with CSS or HTML (sorry, I'm a neophyte).
My site is http://www.oliviafialkow.com/ and I would like my logo to stay fixed as visitors scroll down the page, like this example: http://lockebride.tumblr.com/
Any help would be wonderful--thanks!
My header HTML is as follows:
<div class="logo">
{{^customize.images.logo.url}}
<!--No Logo-->
<h1>{{site.title}}</h1>
{{/customize.images.logo.url}}
{{#customize.images.logo.url}}
<!--Logo Uploaded-->
<h1><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></h1>
{{/customize.images.logo.url}}
</div>
My header CSS is:
/***** site_name color *****/
.logo h1 a {
color: {{{customize.colors.site_name}}};
}
/***** subtitle color *****/
.logo h2 {
color: {{{customize.colors.subtitle}}};
position: fixed
}
Thank you!
I regularly use this solution:
position: fixed;
width: [your-width-here]
margin: auto;
This will auto-center it; no weird calculations or ~48%'s in your CSS.
However, if you want to exactly mirror what is seen on the page you mentioned:
.parent-div {
float: right;
right: 50%;
position: fixed;
z-index: 19999;
}
.child-div {
position: relative;
float: right;
right: -50%;
}
Alongside position: fixed, you also need to provide a top: 0 and left: calc(50% - [width of your logo]
Add this into your .logo div:
position: fixed;
top: 0;
left: calc(50% - 80px);
z-index: 10;
The logo will then be taken out of the flow of the document, and so you should add a spacer of some sort to fill in the space originally occupied by the logo image.
Edit your css like this
#site-header {
padding-top: 110px;
margin-bottom: 50px;
}
#site-header .logo h1 img {
width: 100%;
}
.logo {
font-size: 100%;
position: fixed;
left: 45%;
top: -21px;
width: 10%;
z-index: 1000;
}
Important, you must use a png logo.
Try with
.logo {
left: 50%;
position: fixed;
top: -20px;
}
For the logo really to be centered, you need a 2nd div inside with margin-left: 50%
In your case you can just add the margin to the #site-header .logo h1 class in line 91 of your CSS:
#site-header .logo h1 {
margin-left: -50%;
font-size: 1.8em;
line-height: 1.2;
text-align: center;
}
Usually you'd go with
<div class="logo" style="left: 50%; position: fixed;">
<div style="margin-left: -50%;">
// Your logo goes here
</div>
</div>
Position fixed is the easiest solution here, I've made a jsFiddle for you to... well... fiddle :) and see how to achieve what you want: jsFiddle. Please note that you need a transparent png logo to make this look as it should (your current is a jpeg with white background).
.logo-placeholder {
height: 180px; /* height of your logo */
}
.logo {
position:fixed;
top:0;
right:0;
left:0;
height:180px;
text-align:center;
z-index: 100;
}
.logo-placeholder just keeps the space that would normally be taken by your logo that is now "floating" above the rest of the content of the page. So you need to add it to your HTML:
<div class="logo-placeholder"></div>
<div class="logo">
<!-- your not modified html -->
</div>
This should work for both variants: image (if you have it uploaded) or text (if you don't).
However, I can see your webpage is responsive and just changing your logo to position:fixed would probably ruin user xperience and the visuals on mobile. iOS devices (which are most important for now in terms of mobile browsing) doesn't like fixed positioning and have some weird behaviour in terms of scrolling: they only update the position of an element once you end scrolling, and not while you do it (like normal desktop browser). That would result in your logo jumping all over the place while scrolling.
Also, using such big logo on small mobile screen would occupy most of the viewport which is not good either (not to mention problems with navigation caused by your logo overlapping buttons etc.).
So, if I were you I would add this CSS to make your change not affect mobile at all:
#media only screen and (max-width: 600px) {
.logo {
position: static; /* that is just default positioning */
}
.logo-placeholder {
display:none; /* we don't need tht anymore since logo is back on its place :) */
}
}
And here's the fiddle for the version with media-query: jsFiddle - you can scale the viewport to see it working.
Related
I'm trying converting my Photoshop design into a web site, manually writing HTML and CSS. It's my first time doing this type of exercise, so I'm having a little problem from the get-go with page dimensions.
I did my PS design using a 1920px page width, this is the fullscreen result. Writing CSS, I set header width to 1920px and logo width to 150px (as in the PS file). But I obtain this (don't worry about logo position).
As you can see, the page is very "zoomed in" and the scrollbar appears down below. I want to display the whole page without a scrollbar, just as in PS, keeping the same ratio between elements.
This is my HTML & CSS code for the header:
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 1920px;
/* I also tried width: 100% */
height: 100px;
background: #000000;
}
<div id="header">
<div id="logo">
<img src="..\codice\export\logo.png" alt="logo">
</div>
</div>
As shown in the code, I also tried setting the header's width to 100% but this way the logo proportion (150 px / 1920 px) was not respected.
How can I write in CSS: "1920 should be your 100% when visualizing the page with the browser"?
I'm sorry if this is a silly question but it's my first time working with these tools.
I made this jsfiddle
You can check with a fluid width: 100% you should not have this horizontally scrollbar
Then i added a header_content div with a fixed width of 520px (then you can see it is centered and well placed. but you will need to change that value according to your photoshop header width.
Note : css margin:0 auto makes your div centered horizontally.
Some additional HTML and CSS may solve the problem for you! And I'm considering you have to add the menu which you not yet done. Here is my solution. I put some helpful comment that you help you to understand the code properly. You can have same code at my codepen example.
body {
padding-top: 150px;
/* if you don't add this your code will be hidden under the #heade */
}
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0;
/*No need to add 'px' when the value is 0 */
left: 0;
/* I also tried width: 100% */
right: 0;
/*Thsi will cover the right side. So no need to declear a width*/
/* logo has some space at to so we are adding a padding at top*/
padding-top: 25px;
height: 75px;
/* reduce to 75px so header will be just half of the logo image*/
background: #000000;
}
.container {
width: 1170px;
/* hae to make this responsive for smallar devices*/
box-sizing: border-box;
margin: 0 auto;
}
.navigation {
float: right
}
/*Eacaping the proper code for the navigation so here is some face code */
.navigation {
color: #fff;
}
<div id="header">
<div class="container">
<div id="logo">
<img src="http://www.logospng.com/images/22/itunes-12-logopng-wikimedia-commons-22786.png" alt="logo">
</div>
<nav class="navigation">
Home Link1 link2 ecc
<!-- I escaping the coding of nav here -->
</nav>
</div>
</div>
Here is the thing.. I have a web page split to 2 sections (intro and main)
The intro section stretches to 100 based on the browser height with CSS:
#intro {
height: 100vh;
}
I want to add an arrow with href that will be positioned at the bottom section of the intro div no matter which screen size is entering the page.
Do you have any idea how can it be done?
Thanks!
#intro {
...
position: relative; /* or absolute, as appropriate */
}
#down_arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -25px; /* half the element's width */
}
This assumes markup similar to the following. In the future, please provide your markup in your question.
<div id="intro">
<div id="down_arrow"> ... </div>
</div>
Set position:relative to the #intro element and position:absolute to the arrow.
Also give a bottom and left rule:
#arrow {
width:40px; /* sample width - set as you wish */
position:absolute;
bottom:10px;
left:50%;
margin-left:-20px; /* important: set half of the width (centers the div) */
}
margin-top:90vh
:D and I need to write some text so stackoverflow knows I'm not spamming.
Rich homie quan is a good rapper. I think the limit has been reached, now.
Did You mean something like this Fiddle
I use positioning of intro element as relative and set this viewportheight as you want.
So if i set arrow postion to absolute it will stay inside intro element.
.arrow{
width: 50px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
}
Using flexbox (demo):
<div class="intro">
<div class="nav"></div>
<div class="link-container">
<a>Arrow</a>
</div>
</div>
<div class="main"></div>
CSS:
.intro {
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.intro > .link-container {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
...
Place the arrow inside of the intro container and use:
.arrow{
bottom: 0px;
}
you may also need to fiddle around with the POSITION property as well, but this should give you what you need. Hope this helps!
.section2 {
position:fixed;
bottom:0;
}
#intro {
position: relative;
}
Add appropriate styles to make it as center of the screen.
Short sketch of the situation: I'm making a website (obviously :)) and so I've got my header, then my banner and below the banner i've got my menu bar. However, the banner overlaps my header a bit (that's the intention ;)) and now I want to add the menu bar directly below the banner.
Here's my CSS code:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}
.menu {
background: url(../images/menubalk.png) no-repeat top center;
}
The menubar is at the position where i should be if the banner would not have an overlap.
I have just figured something small out, which would probably fix my entire problem. If I were to make my header a box, and then my main content a box (which holds the banner, content and footer) and make all the different things, like the banner children from that box? wouldn't that fix my entire problem while I use the inherit or whatever function?
Thank you in advance!
Kind regards,
David
One way of doing this has been suggested, use relative positioning for the menu element.
For example:
<div class="header_container">
Le Header Container
</div>
<div class="banner">
Le Banner
</div>
<div class="menu">
Le Menu
</div>
and the CSS would look like:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}
.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}
As a start, here is a fiddle: http://jsfiddle.net/audetwebdesign/9gvTG/
Alternative Method
You can achieve a similar effect by using a negative margin:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}
.banner {
background-color: yellow;
position: relative;
height: 210px;
}
.menu {
background-color: red;
position: relative;
height: 50px;
}
The advantage of this approach is that the positioning of the subsequent elements do not need adjusting if you change the header and need to modify the degree of overlap by the banner element.
It is good to be aware of both approaches.
One solution in your case would be to position your menu absolute at bottom:-120px. It's not the most elegant one but it should work.
You should assign a relative position to your menu as well. With same top value as the banner
.menu {
....
....
position: relative;
top:-90px;
}
The space you see is because the menu, in normal document flow, is positioned just below the place the banner is located. (which is shifted 90px up from its real position)
A fiddle here
Instead of your images I used background color
You can place the menu just at the bottom of your banner or where ever you need.
Then remember that element that follows the menu will see the menu in his real position . In this case 90px below.Many solutions to wrap all this issue so wont affect the rest of the page elements.
I am trying to create a simple layout in which there would be:
HEADER
CONTENT (image here)
FOOTER
What I am trying to achieve is to have an image placed inside the content div that will resize larger and smaller based on the browser size of the viewer.
This part I can achieve, however I would like the footer to always remain at the bottom of the browser and have the image in the content div resize without ever creating overflow.
Here is an example of what I am trying to do:
http://www.modernart.net/view.html?id=1,3,9
I have tried replicating this code but cannot make it work.
Is there a way that anyone can suggest to do this?
I would be extemely helpful as I have had no luck making it work so far.
Thanks in advance,
Takashi
Using percentages with css could be a solution: http://jsfiddle.net/rgv2e/
You really should try to do things and learn by your mistakes. Nonetheless, here's the layout you're after:
See this Working Fiddle Example!
HTML
<div id="header">My Beautiful website!</div>
<div id="content">
<a href="#" title="">
<img src="http://i328.photobucket.com/albums/l330/slowwkidd3923/backflip.jpg" alt="ups...">
</a>
</div>
<div id="footer">
This is the footer text!
</div>
CSS
/* basics */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* header */
#header {
position: absolute;
z-index:1;
top: 10px;
left: 10px;
}
/* content */
#content {
position: absolute;
left: 0;
right: 0;
top: 10px;
bottom: 20px;
text-align: center;
}
#content img {
height: 96%;
}
/* footer */
#footer {
position:absolute;
bottom: 0;
left: 10px;
right: 10px;
text-align: left;
height: 20px;
line-height: 20px;
}
Links to help you learn CSS:
Cascading Style Sheets
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
MDN :: CSS - References, Tutorials and Demos
I'm working with a piece of HTML similar to this:
<div id='headerBar'>
<div id='headerBarContent'>
<div id='leftContentSubdiv'></div>
<div id='rightContentSubdiv'></div>
</div>
</div>
With CSS like this:
#headerBar
{
position: fixed;
left: 0px;
right: 0px;
min-width: 1024px;
width: 100%;
height: 34px;
z-index: 10000;
}
#headerBarContent
{
display: inline-block;
position: absolute;
left: 50%;
margin-left: -512px;
width: 1024px;
}
#leftContentSubdiv, #rightContentSubdiv
{
position: relative;
width: 512px;
height: 34px;
}
What i'm trying to create is a header bar that scrolls vertically along with the page, and that scrolls horizontally when the window is smaller than the headerBarContent's width, without the use of JavaScript.
Facebook implements it exactly as I specified, without the use of JavaScript.
Twitter implements it with JavaScript
The Onion illustrates where I'm stuck at now. The page is unable to
scroll the header bar horizontally with the rest of the page once the
window size is smaller than the header's centered content
I can't figure out what exactly Facebook is doing in the markup have this functionality. Can anyone help?
If I correctly understand your problem, if the screen is < 1024px (headerBarContent) you want the header position to be relative.. right? (like Facebook)..
You could achieve this without JS by media queries i.e. :
#media screen and (max-width: 1024px){
#headerBar{
position:relative;
}
}
demo http://jsfiddle.net/BPcfB/