Trying to find the answer quite long, but I am not even sure how to express the question to searchbar - so I'll try to explain here and if you know that it was already answered I will be happy for the link :)
I am creating a wordpress theme using The Underscores framework. I want make my header to be dependent on the background image height. I mean - I can upload there an image of any size and header's width will be 100 % of image and height wll be dynamically change according the screen size.
Better for imagination, here's an example:
http://hitchdiary.cz/
Try to change size of the window - image is allways fully displayed and the height of the header changes.
So that's what I want. What I have is a static size header and background image is adjusting according the screen size.
.site-header {
height: 100%;
width: auto;
background-color: #000;
background-size: 100%;
}
Header image is set by user in wordpress adjust section. In code it is this way:
<?php if ( get_header_image() ){ ?>
<header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner">
<?php } else { ?>
<header id="masthead" class="site-header" role="banner">
<?php } ?>
Thanks for any advice. Sorry if that's obvious. I'm quite a newbie.
WHAT'S GOING NOW:
demo
The height is calculated automatically according to the content in the div. By setting it to 100% you're telling it to take the height of the parent container.
Setting height to auto will solve your problem.
.site-header {
width: auto;
background-color: #000;
background-size: 100%;
}
or
.site-header {
height: auto;
width: auto;
background-color: #000;
background-size: 100%;
}
Flexible Width
Sorry I mistook it to be flexible width instead of height. Please ignore what comes below this statment. However it might help you in adjusting width in the future.
By default div, header, footer etc are block elements. They take up 100% of the parent div.
Say you have a
<div class="parent" style="width:500px;">
<div class="child"> </div>
</div>
Here the inner div takes up 500px as well.
I tried out similar code, all you have to do set display to inline.
.site-header {
display: inline;
}
You can even try floating it to the left/right in case making it inline doesn't work.
You can read more about the differences between block and inline
Related
I want my page to have a fix width, lets say 1440px. I usually put width in body and it applies to all elements. In my new project I need to have one section in white background, width being fixed makes it so that only 1440px is white. I managed to solve this by removing width from body and creating a class:
.width-fix {
width: 144rem;
margin: 0 auto;
padding: 0 1.2rem;
}
I set that class as additional to every section I don't needed colored.
Is this the right way to solve it or is there something better? Currently it works like a charm.
I started learning HTML/CSS 2 weeks ago, sorry if its dumb question
**Edit: Image for clarification
Yes, usually I work with a classname like container or section for all the most general default styling.
Every element is packed in a section which holds the right background-color and has a div with container for the right width and margins and padding.
So something like this:
.block {
background-color: green;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 25px;
}
<section class="block">
<div class="container">
</div>
</section>
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
I've used viewport height numerous times with success but this time it is causing me problems and I cannnot figure out why. You can see my issue on this web page: http://staging.chinahiking.cn/great-wall-hiking/wild-jinshanling-to-restored-jinshanling-great-wall-hike-1day/
.top-container.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.viewport-height {
height: 80vh;
}
<body>
<div class="top-container sticky"></div>
<div class="content">
<div class="viewport-height"></div>
<div class="description-container"></div>
</div>
</body>
But for some reason, the viewport height is not registering. And, when I change the screen height, the content within .description-container overlaps the content in my .viewport-height container. Does anyone know why this is happening and how I can get the content within my viewport-height container to be either 80vh or 100vh?
Make it height auto fix your problem because of contain problem is coming
.description-section-divider {
height: auto;
}
If you need some white space give some padding as per your requirement else if you want to fix using height:287px then you hvae to write media query for that better suggestion take height:auto;
Probably a newbie question but I would like my div and its contents to stay exactly as they are when the screen resolution is reduced (i.e. horizontal scroll bar will appear at the bottom).
I would also like to know how you would stop the contents of the page from stretching when its above the maximum size.
Hope this makes sense.
<style>
#header_container {
background: #d1d4fa;
height: 4.5em;
}
#header_layout {
height: 8.5em;
background: #edeef9;
}
</style>
<body>
<div id="header_container">
<div class="container">
<div id="header_layout">
</div>
</div>
</body>
</html>
Also, em is scalable font size. Reference.
Use px to keep your font of same size regardless of screen size.
You can set a defined width for your containers and elements.
#header_container {
width: 960px;
}
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.