So I'm designing a website, and I created a banner/header image with text in the centre of that banner, and I want all my main content to go under the banner (the banner is the type which covers the entire page, so that you scroll down to see the content. However, the main content does not automatically go down or up, depending on the size of the header, since I set the width to 100%, so it gets resized according to the size of the window, so could somebody help with this issue, so that it maintains the same ratio with the header/banner?
The HTML code:
<div id="banner">
<h1 id="head">head</h1>
<img id="logo" src="Logo.jpg" alt="logo and banner"/>
</div>
<div id="everythingElse">
Scroll
<p>Content</p>
</div>
CSS code:
#head{
text-align: center;
position: absolute;
top: 4%;
left: 0;
width: 100%;
font-size: 100px
}
#logo{
width: 104%;
}
#banner{
position: absolute;
width: 100%; /* for IE 6 */
top: 0;
left: 0;
right: 0;
min-width: 1200px;
}
#everythingElse{
position: fixed;
width: 100%;
top: 75%;
}
Don't use absolute positioning. Use a height of 100vh if browser support is acceptable, otherwise use 100% and make sure your body and html elements are included in that rule.
Related
I wanted to create a footer which need to stay on the bottom of every screen, i have done it but the problem is it breaks on landscape view on small devices but on the portrait view it is working fine.
body, html {
height: 100vh;
position: relative;
}
.footer {
background: #0066cc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="footer">
<div class="content">
<h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
</div>
</div>
i want it to stay at the bottom of every device and on landscape also!!
I have done it with this code it stays on the bottom of the page on landscape as well as portrait
-first i did css on my container (main div)
.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }
-second i change footer css
.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }
and it fixed my problem .
by the way you don't get this problem every time but when you don't have enough content for your page footer will leave it's place and you'll get extra space on different devices even on the web view but when you have enough content for a page then footer will always stay at the bottom.
You just need to change the way you position the footer. As you wanted in same position, the fixed instead of absolute will do the job.
body,html{
height: 100vh;}
.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }
I am trying to make a showcase section for a web page. It consists of a div with a (responsive) background image and a header that would be centered horizontally and vertically over this image. I've managed to get the image in and have it be responsive, and I've got the header centered, but my problem arises when the window size becomes smaller.
I'm using position: absolute, the top property, and transform to have it be centered, but the top property only works when height is specified in the parent container. However, when the window shrinks to the point where the image begins to shrink to below its original height, the text does not stay vertically centered, only horizontally (since I'm going off of the original height for top (800px)).
I can't just change the height with a media query since the image size is changing constantly and I can't not use height because then the top property would not work at all, so I'm a bit confused with how to get around this.
Here are the relevant sections of my code:
HTML:
<section class="showcase">
<div class="showcase-container">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
CSS:
.container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: auto;
}
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: 800px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I might just guess because I don't know how does this really look, but I assumed few things and in a result instead of background image I would just use normal image, make it blocky and display div over it, you will have height preserved in any size, take a look:
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
}
.showcase-container img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
padding: 10px 20px;
}
<section class="showcase">
<div class="showcase-container">
<img src="https://source.unsplash.com/random/1200x700" alt="">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
See MDN's <figcaption> documentation.
<figure>
<img src="/media/examples/hamster.jpg" alt="a cute hamster" />
<figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>
If I'm understanding this right, you're saying you don't need to worry about the image always maintaining an 800px height, you just want the h1 to remain centered. In that case, it's really simple.
Just add your image as a background, setting the background-size to cover, then make sure the container is never larger than the window by setting its height to 100vh, but never taller than 800px by setting its max-height.
.showcase-container {
/* your styles here */
background-image: url('yourimage.jpg');
background-size: cover;
height: 100vh;
max-height: 800px;
}
OR if you need it to be vertically centered in the window independently of the container, you can always change top: 50%; to top: 50vh; and position relative to the body.
I'm trying to create a fixed navigation menu which scrolls down the side of the page.
The page has been structured so that everything stretches the full width of the page and then each div makes the fixed width of its content of 860px. Now I've come to add a fixed navigation and I'm struggling to make the fixed navigation align to the right of this content.
I can't have a page wrapper which sets a fixed page width and then contains everything because The backgrounds stretch the full width of the page.
I've tried to add a fixed div to contain the navigation but this div just ends up intercepting all the clicks as it's above the rest of the content.
There are several sections on the page, so I don't think I can nest the navigation inside the first section.
<div id="navigation">
<ul>
</ul>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
And the CSS:
#navigation {
height: 100%;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
z-index: 999;
}
#navigation ul {
background: blue;
height: 200px;
margin: -50px 0 0;
position: absolute;
top: 50%;
right: 0;
width: 80px;
}
.section {
margin: 0 auto;
position: relative;
padding: 0 0 100px 0;
width: 100%;
}
.section-content {
background-color: #1d1d1d;
background-color: rgba(29, 29, 29, 0.96);
color: #ffffff;
padding: 24px 0;
position: relative;
}
.section-content-panel {
margin: 0 auto;
padding-right: 100px;
position: relative;
width: 860px;
}
JSFiddle.
Could someone help me get this working properly?
EDIT
A sketch to show the effect I'm after.
It's a rough sketch, but blue is the viewport, grey are the sections and red is width of all the content. The sections contain all of the content to the red width, but their backgrounds need to expand full screen. The green is the navigation and I want that to sit fixed in the viewport, with the sections scrolling behind it.
I hope that helps clear it up?
Okay, the sketch is clarifying.
I believe you don't need div#navigation. I deleted the div and gave the menu the id, and changed the CSS to this:
#navigation {
background: blue;
position: fixed;
height: 200px;
width: 100px;
top: 50%;
right: 50%;
margin-top: -100px;
margin-right: -480px;
z-index: 999;
}
Check the updated fiddle.
Note1: changing the height or width also requires changing the margins. So when the height or width is dynamic, it won't be aligned right.
Note 2: when the window resizes, the menu won't keep its place. It will flow over the content, you can't fix that, because the list is on a fixed position calculate on the viewport sizes, and not the contents.
This question already has answers here:
Center a position:fixed element
(23 answers)
Closed 9 years ago.
I have an CSS issue specific to Google Chrome. I've done some research but nobody knows how to fix it without Javascript, which I do not want to use because my element will change in the future.
The code is below, if you use it you will see the that the child div goes to the right hand side of the page and if I add the same top an position values to the parents it moves in the opposite direction.
The website will have a lot more content, and I want a centered header where the sidebar and the floated content will disappear behind as you scroll through the page.
<body>
<!--this should not need any css coding till later on after the site is complete-->
<center>
<div class="header_p1">
<img class="header_p1_child" src="header.png"/>
</div>
</center>
and the css is
.header_p1
{
background: white;
width: 750px;
height: 110px;
margin-bottom: 10px;
}
.header_p1_child
{
float: none;
background: white;
width: 750px;
height: 110px;
position: fixed;
top: 0px;
}
You want a centered header fixed to the top of the page such that for longer pages, the content will scroll vertically beneath the header.
Here is the prototype HTML snippet:
<div class="wrapper">
<div class="header">
<img class="banner" src="http://placehold.it/200x100" />
</div>
<div class="content">
<p>Lorem ipsum dolor ...</p>
</div>
</div>
I created a div.wrapper block to define a context for the layout, which has some padding equal to the expected height of the header.
The div.header block contains an image (200x100 px), and div.content holds various text paragraphs.
The layout and styling is defined in the following CSS:
.wrapper {
outline: 2px dotted blue; /** optional **/
/** Top padding so that initially, the content is below the header **/
padding-top: 100px;
}
.header {
height: 100px;
width: 400px; /** Use 100% to fill the width of the page **/
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,255,0.2);
}
img.banner {
display: block;
margin: 0 auto;
}
The .header style declares a height and width, and uses position: fixed to pin the position of the element to the view port. For positioning, top: 0 places the header to the top of the page.
To center the element, set left: 0 and right: 0 and use margin: 0 auto.
Within div.header, you can declare the image to be a block type element and then center it by using margin: 0 auto.
I checked this both in Firefox and Chrome and it works as expected. This relies on CSS 2.1 so it should work in quite a few older browsers, perhaps IE7, but I did not test it, but perhaps someone can do so and comment accordingly.
Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/
Source: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
DO NOT USE <center> tag, this is outdated and should be done with CSS
<body>
<div class="header_p1"><img src="header.png"/></div></center>
CSS
.header_p1
{
background: white;
width: 750px;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
left: 50%; /* Start at 50% of browser window */
margin-left: -325px; /* Go half of width to the left, centering the element */
}
Orignally taken from here In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.
However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.
I have tried:
Setting the height of the body and html to 100% in CSS.
Setting the height of the content to 100% in CSS, but that made the content fill the window.
Styling the footer as height:auto 0 in CSS.
...but none of these have worked.
I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.
Thank you in advance.
If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f09;
}
#content{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: #f90;
}
#content iframe{
width: 100%;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
<iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>