I'm trying to create an effect where the blue section extends past the gray section.
The blue section is currently contained within the gray section, which may be the problem.
http://nufios.com/node
I've got this as the HTML:
<div id="header-wrapper">
<div id="header">
...
</div></div>
And this as the CSS:
#header-wrapper {
width: 100%;
background-color: #686868;
}
#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
}
How do I get it so that the blue section is centered within the gray section, and can still go down below the gray section (i.e., the height is greater on the blue section).
Try using z-index and fixed heights:
CSS:
#header-wrapper {
width: 100%;
background-color: #686868;
height:30px;
}
#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
z-index:10;
height:50px;
}
jFiddle demo here: http://jsfiddle.net/LynchJustRules/RQV4h/
Just give your #header-wrapper height. If you want to always fit the blue box's height when its height is less than the gray box's, set the max-height
#header-wrapper {
width: 100%;
background-color: #686868;
max-height: 92px;
}
Related
Here's an image of what I'm trying to achieve first: https://i.imgur.com/bTsL2wS.png
Note that this is only supposed to be one section of the full page. The background should not span the entire website. However each section has full-screen dimensions.
I had two ideas regarding doing this:
Have a container object with viewport dimensions and add an relative-positioned image with z-index: -1 and inside of that an absolute-positioned img with right: 0 and ~60% width, then rotate it.
Same as above but put the img inside of a 60% width right-aligned sub-container and skew the container.
Both approaches work on a desktop-screen but this happens when scaling the window down too much.
Basically I need it to work until the viewport reaches tablet/mobile size.
Wrap the part you want to have with that background in a div, then add the background-image property to the div.
*{ box-sizing: border-box}
#blue{ background: #269;}
#red{ background: #a22;}
#green{ background: #6a6; }
section{ display: block; height: 100vh; margin: 2% auto; color: #fff; font: normal 16px verdana, sans-serif; text-align: center; }
div{ height: 100%; width: 70%; overflow: hidden; float: right;}
img{ transform: rotate(70deg); height: 920px; margin: -120px 0 auto; }
h1, p{ margin: 5% auto 0 0; width: 40%;}
#media only screen and (min-height: 500px){ h1, p{ margin: 30% auto 0 0 }}
span{ position: absolute; left: 2%; z-index: 2; background: rgba(0,0,0,0); height: 100vh; width: 96%; padding: 20px }
css for tests only
span::before{ content: 'this is span'}
p::after{ content: 'this is pafagraph'; display: block; padding: 20px 0 0}
h1::after{ content: 'this is h1'}
section:hover h1, section:hover p{ background: grey}
span:hover{ background: rgba(0,0,0,0.5); }
<section id="blue"><div><img src="img.jpg" alt="blue"></div><span><h1></h1><p></p></span></section>
<section id="red"><div><img src="red.jpg" alt="red"></div><span><p></p></span></section>
<section id="green"><div><img src="green.jpg" alt="green"></div></section>
Responsiveness is an old story, mobile-first is up to date. Of course with responsive solutions, but #media only for larger devices.
You better not use flex, it leaks badly.
I am trying to put a background picture below the header. The picture is supposed to cover all the width and height, but should not cover the header. However, the background picture does not show up. What’s wrong in my code?? Thank you for taking your time My codes are below;
Part of my html is below;
<body>
<header>
<p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
<p class="btn2"><span class="king"><img src="images/king.png"></span><img src="images/B.jpg"></p>
</header>
<div id="wrapper" class="stampwrap">
</div>
</body>
and part of my css is below;
body{
font: 14px/1.6 sans-serif;
color:#313131;
background: #67b2e4;
}
header{
display: block;
overflow: hidden;
height: 80px;
background: #67b2e4;
padding: 2% 4%;
}
.btn1{
float:left;
}
.btn1 .stext {
font-size: 2rem;
font-weight: bold;
padding-left: 20px;
float:right;
margin-top: 20px;
}
.btn2{
float: right;
}
.skypic{
height: 80px;
width: auto;
}
#wrapper{
height: 100%;
width:100%;
background: url(images/zzz.jpg);
}
.stampwrap{
position: relative;
}
You need to define the height of the body element. the wrapper class has no space to be viewed. height:100%; cannot be seen in a parent body element with height:0px; which is the default if not defined.
can't get working layout as I want for the page I am creating for my portfolio website.
I have header with navigation(fixed size div).
then I have content div
and I have footer
<div>header</div>
<div>content</div>
<div>footer</div>
I want footer be fixed size, let say 200px, fixed always to the bottom of page. but content should fill all remaining space from header to footer. so that content div height would depend on windows height. By changing height only content div would change size.
flex makes it easy:
body {
margin:0;
height:100vh;
/* eventually : min-height: xx ; to avoid main to be squeezed down to zero in between header and footer */
display:flex;
flex-flow:column;
}
.main {
flex:1;/* fills remaining space */
overflow:auto;/* comes handy */
background:lightgray;/* see me */
}
div {
padding:1em;/* whatever */
}
<div>header of any height</div>
<div class="main">content</div>
<div>footer of any height</div>
header {
width: 100%;
position: fixed;
background-color: #9f0d0d;
color: #f5f5f5;
border-bottom: 1px solid #ddd;
min-height: 5%;
}
header :first-child {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
article {
top: 55px;
width: 100%;
height: 90%;
position: fixed;
}
footer {
top: 95%;
min-height: 5%;
width: 100%;
position: fixed;
padding: 10px 15px;
background-color: #9f0d0d;
color: #f5f5f5;
border-top: 1px solid #ddd;
}
footer :first-child {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
.centre {
text-align: center;
}
<div class="centre">
<header>Header</header>
<article>Remaining space</article>
<footer>Footer</footer>
</div>
I wrote this code in order to understand what does it margin, padding and position for the below code. the question are between these /* */. Thanks again.
html {
width: auto;
/* Does auto apply the background-color automatically to the display screen */
height: 100%;
/* 100% means 100% of the display browser??*/
margin-left: 1%;
margin-right: 1%;
/*does changing the value of the margin will change anything in the page*/
margin-top: 1%;
margin-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
Padding-bottom: 0%;
border: 1px solid black;
background-color: red;
}
body {
background-color: #00FF00;
width: 50%;
/* does it means 50% of the width stated above in the html (auto)*/
height: 50%;
/*does it means 50% of the height of the display browser or we have to add the padding-top(1%) in html*/
position: fixed;
top: 25%;
/* does it mean that the body is shifted to below 25% of it's heigh or 25% of the display browser? */
left: 25%;
/* what is the different if i give 0% to left and i changed the margin-left value to 25%*/
border: 2px solid black;
margin-top: 0px;
margin-left: 0px;
}
header {
width: 50%;
height: auto;
top: 25%;
left: 25%;
/* what does it mean here the value given to top and left??*/
border: 2px solid black;
margin-top: 10%;
margin-left: 25%;
}
h1 {
margin: 5px;
color: blue;
}
<body>
<header>
<h1> MY First webpage </h1>
</header>
</body>
Centering an item within the body is a simple combination of width and margins.
The margin applied below. margin: 0 auto; is shorthand for:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
Centered div.wrapper width a width of 960px
body {
margin: 0; /* REMOVE THE MARGIN FROM THE BODY */
}
.wrapper {
width: 960px; /* GIVE THE WRAPPING ELEMENT A WIDTH */
margin: 0 auto; /* USE MARGIN (0 AUTO) TO CENTER THE WRAPPER ON THE SCREEN */
}
/* demo styles */
#header {height: 100px; background: orange}
#content {height: 800px; background: grey}
#footer {height: 150px; background: pink}
<div class="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The difference between HTML and Body has been answered in this StackOverflow post.
Yes the body contains everything.
If I understand your question all you should need to do is mess with the body in your .css
body {
margin: XXXpx
}
Replace the X's with a number that best suits what you are after
The header in the pic is styled in 3 parts the top part contains a div with the width 100% and background color and inside the dive there is a div styled as a container which holds all elements at the top. This container has a width of 1000px and min-width of 960px and margin: 0 auto;
but when u re-size the browser and scroll with the scroll-er at the bottom the header appears as follows.
What am I doing wrong here for it to render this way?
CSS
#header {
height: 120px;
width: 100%;
margin-bottom: 15px;
}
#header .nav-content-holder {
width: 1000px;
min-width: 960px;
margin: 0 auto;
}
#header .header-menu-top {
height: 20px;
background-color: #d8d4cf;
color: #Color-Txt-black;
}
#header .header-menu-middle {
height: 70px;
background-color: #Color-FM-brown;
color: #Color-Txt-white;
}
#header .header-menu-bottom {
border-top: 1px solid #d3d3d3;
height: 28px;
background-color: #Color-FM-brown;
margin-bottom: 15px;
color: #Color-Txt-white;
}
HTML
Without code it is impossible to know what is going on but you need to try min-width: 1040px; on body.