I have a text object placed in the middle of my page horizontally. I'm wanting to place it 90% down my page. So if you were looking at my page, it would be a little above the bottom. I would use margin: 330px; but I am pretty sure it will differ for ever user as they use different resolutions. Here is my code, if someone can help
HTML:
<div id="home">
<p>Read More</p>
</div>
CSS:
#home {
width: 100%;
height: 100vh;
margin: 0px;
padding: 0px;
text-align: center;
}
#home p {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
color: #FFF;
margin: 330px;
}
You can set your body to 100%, then use a wrapper div to house all the content above the home dive. The make the wrapper div 90% less the font size.
html,
body {
height: 100%;
margin: 0px;
}
#main_content {
min-height: calc(90% - 60px);
/* Make space for the font size */
}
#home {
clear: both;
position: relative;
width: 100%;
text-align: center;
}
#home p {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
line-height: 60px;
color: teal;
margin: 0px;
}
<div id="main_content">
</div>
<div id="home">
<p>Read More</p>
</div>
Make the container a flexbox, and align the heading to the bottom using margin-top: auto. To bring it up from the bottom a bit add a value for margin-bottom (10% in the example). Use media queries if you want to be very precise with placement across screen sizes.
body {
margin: 0;
}
#home {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#home p {
font-family: sans-serif;
font-size: 60px;
color: #000;
margin: auto 0 10%;
}
<div id="home">
<p>Read More</p>
</div>
For this to work as it should for every user you need to use relative lengths.
To place it "90% down" your page you can use :
margin-top: 90vh;
Check this link you can find what you're looking for there.
Good Luck,
Related
My content div that overlaps the header div in my CSS code as per the attached image. Both the content and side-nav divs should be below the header section.
I tried changing the value of position property for the elements but it doesn't work. I also tried introducing top property to the content section to be as same as the side nav but it didn't work too
body {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 400;
color: #777;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: orangered;
margin: 0;
max-width: 100%;
width: 100%;
}
#media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.header {
font-size: 1.4rem;
height: 8vh;
background-color: #3394e3;
border-bottom: var(--line);
top: 0px;
position: fixed;
width: 100%;
/*
display: flex;
justify-content: space-between;
align-items: center;*/
}
.side-nav {
position: fixed;
margin: 0px auto;
height: 100%;
float: left;
top: 8vh;
clear: both;
background-color: #fff;
bottom: 0;
}
.content {
background-color: #f4f4f4;
min-height: 93vh;
width: 85%;
float: right;
}
.footer {
background-color: green;
height: 7vh;
width: 85%;
float: right;
color: red;
}
<div class="container">
<div class="header-fixed">
<header class="header">
</header>
</div>
<nav class="side-nav">
</nav>
<main class="content">
</main>
<footer class="footer">Footer</footer>
</div>
Your .header has a position:fixed which takes it out of the normal flow of a webpage. So since it is taken out (essentially placed on a different layer of the page flow), your content is relatively positioned in the normal flow. As the .header is taken out of the flow, the .content is technically the first item in the flow of the page now.
So you will just need to give the .content a margin-top that is equivalent to the height of your .header.
Your .sidebar also has a position:fixed, so it's on a different layer, so it doesn't care about where it is placed in relation to the .header. So that's why you had to manually position it and give it a top:8vh to put it 8vh down from the top of the window.
My code is here: https://jsfiddle.net/yaphurt0/8/
I tried to get rid of the rest of the webpage to show just the necessary section, but it ended up not displaying correctly, and I couldn't figure out why for the life of me.
Regardless, I've trimmed away what I could and marked in comments in the css file the relevant code.
My problem is that I am trying to display 3 boxes at the bottom of the page next to each other. As the window shrinks I use a media query to increase the width of the boxes so there are 2 per line, and then 1 if the the window shrinks further. Of course this means the boxes take up more room vertically, meaning they spill out as the parent div doesn't scale with it.
I have tried overflow: auto; to #me, however this just added a scrollbar to the content, when instead I want the #me to scale accordingly to contain its children. This is a pretty big problem which is stumping me, as you can see from the main text ("Hi I'm Danny..."), that also suffers from the same issues if the webpage is made very wide and shallow.
As much as I'm looking for a solution, I'm really hoping for an explanation so I can understand why the webpage is behaving as it is/what makes the parent scale, so in the future I don't just copy and paste and hope.
#me {
width: 100%;
height: 45%;
background-color: white;
}
#me .container {
width: 60%;
height: 100%;
margin: 0 auto;
}
#me .container .introduction {
height: 30%;
margin-bottom: 5%;
}
#me .container .introduction .title,
.subInfo {
width: 80%;
color: #262626;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid orange;
}
#me .container .introduction .title {
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 4vw;
}
#me .container .introduction .subInfo {
text-align: center;
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 2vw;
}
#me .container .infoBody {
width: 100%;
height: 50%;
min-height: 75px;
margin: 0 auto;
}
#me .container .infoBody .columnInfo {
float: left;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 31.5%;
margin: 2px;
background-color: orange;
border: 2px solid #e8eaed;
border-radius: 5px;
}
#media only screen and (min-width: 500px) and (max-width: 1000px) {
.minimalHeading {
font-size: 5.5vw;
}
#me .container .infoBody .columnInfo {
width: 48.5%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 4vw;
}
}
#media only screen and (max-width: 500px) {
.minimalHeading {
font-size: 7.5vw;
}
#me .container .infoBody .columnInfo {
width: 90%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 5vw;
}
}
<div id="me">
<div class="container">
<div class="introduction">
<p class="title">My Skillset</p>
<p class="subInfo">The standard Web-development stuff</p>
</div>
<div class="infoBody">
<div class="columnInfo">Hi</div>
<div class="columnInfo">There</div>
<div class="columnInfo">You!</div>
</div>
</div>
</div>
The problem is in float:left property of the .columnInfo element and the height: 45% of #me element. If you remove those, you will see that #me will contain all three .columnInfo elements, but they will be stacked on top of each other. You can use display:flex on the .infobody to make them wrap next to each other. You will have to give your .columninfo elements an absolute height though.
You can use flex, like mentioned. Or simply add a clear to infoBody, like so:
// html
<div class="infoBody clear">
//css
.clear::after {
content: '';
display: table;
clear: both;
}
The problem is your .columnInfo. Elements with the float property are no longer part of the normal flow of the page, so the containing div doesn't know how high they are. The clear solves this problem by adding a hidden pseudo element below those columns and forcing the containing div down.
I want to center text in my header, the header takes up 100% of the view height and 100% of the width and does only consist of a solid color. When i center the text (Hello) the header is "pushed" down leaving white space and i have no clue how to fix this.
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
}
#body {
margin: 0;
}
<header id="mainHeader">
<p id="hello">
<Hello>
</p>
</header>
(The text needs to be centered vertically when window is zoomed by default)
I made a jsfiddle and I saw the white box above the header. I added a margin-top: 0 to the css at #hello and it seems to work for me. Test it out!
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
margin-top: 0;
}
#body {
margin: 0;
}
EDIT:
To fix what he wanted to do I used the flex-property to allign the items in the middle of the header like this:
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
display: flex;
justify-content: center; (vertical center)
align-items: center; (horizontal center)
}
Maybe you can play with the padding-top property! Of course, I've deleted the margin top that the <p> adds by default...
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
padding-top: 100px;
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin: 0 auto;
text-align: center;
}
#body {
margin: 0;
}
The white space has nothing to do with centring text. That is the combination of the default margin-top that applies to paragraphs and collapsing margins.
Add margin-top: 0 to the rules for #hello.
I have a page layout that I would like to make responsive. The page is currently split 50/50 down the middle vertically. I achieved this by making the Section div display as a table and the divs inside as cells. I also have an absolute positioned Title at the top-center of the page.
I would like to make is such that when the page is viewed on a smaller screen (e.g. tablet or mobile) the 50/50 split becomes horizontal, with all of the contained text centered horizontally and vertically, and with the Title remaining at the top-center of the page.
Here is my code:
html,
body,
section,
div {
height: 100%;
}
body {
color: #000000;
font-family: Cinzel, serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
div {
width: 50%;
padding: 1rem;
}
h1 {
font-size: 1.75rem;
}
.logo {
text-align: center;
color: red;
position: absolute;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.left-half {
background: #FFFFFF;
color: #000000;
}
.right-half {
background: #000000;
color: #FFFFFF;
}
<body>
<section class="container">
<header class="logo">
<h1>Title</h1>
</header>
<div class="left-half cell">
<h1>First Half</h1>
</div>
<div class="right-half cell">
<h1>Second Half</h1>
</div>
</section>
</body>
Any help would be greatly appreciated.
Use media queries for smaller screens in which you change display: tableand display: table-cell to display: block in .container and .cell.
And definitely erase that div { width: 50%; } rule - that affects ALL divs, which you certainly won't want! (Write that 50% width into the .cell rule instead, and add a media query rule for it for smaller sizes that makes it 100%.
Soooooo I'm making a sticky footer in Css. It doesn't work the way I want it to. The footer sticks to the bottom, but I also want 100% height for the page. This doesn't work, and I've tried a lot. Currently, the footer gets in the way of the container, and they overlap. If i give the container margin-bottom: 70px;, it creates extra unwanted space when the content is very small, making an unnecessary scrollbar.
Here's my code:
<html><head>
<style type='text/css'>
body {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
height: auto !important;
min-height: 100%;
}
.bold-show {
font-family: Helvectica, sans-serif;
font-size: 96px;
background-color: rgba(0, 0, 0, 0.95);
color: #eeeeee;
padding: 50px;
}
#footer {
position: relative;
height: 70px;
width: 100%;
text-align: center;
display: table;
margin-top: -70px;
background-color: rgba(0, 0, 0, 0.9);
color: #eeeeee;
}
#footer div {
display: table-cell;
vertical-align: middle;
}
</style>
</head><body>
<div class='container'>
<div class='bold-show'>
Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
</div>
</div>
<div id='footer'>
<div>
We support a free and open internet.
</div>
</div>
</body></html>
Also, this is not the actual site. Just testing to implement on real site.
I think that this is what you are looking for:
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
body, html, #wrapper { height: 100%; } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header,
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */