Hello everyone and thanks for the help in advance. I’m working on a page located at http://www.christyforcongress.com/home/hero2. I’m trying to position the text centered on the page at either the top left or top right corner (in other words I’m trying to figure out basic placement). I have added position: absolute; float: left; on the div I want to move to the corner, but that seems to have no effect. Obviously barking up the wrong tree. Any help would be appreciated.
Well, that’s because you have the parent div set to display:flex; The div your wanting to move is a flex item.
To move the div continue using flex styles. Look back to the styles set on the parent div and use justify-content:end; to position the text on the right. Or use justify-content:start; to position on the left.
Then use align-items: start; to move the div to the top of the page.
1 Like
I don’t think that you can get any more basic than this…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
margin: 0;
font: normal 1em / 150% serif;
background-image: url( http://www.christyforcongress.com/images/slideshow/1-edit.jpg );
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#header {
padding: 1em;
}
h1 {
line-height: 1.25em;
color: #fff;
text-shadow: 0 1px 1px #000, 1px 0 1px #000, 0 0 1px #000;
}
.btn {
font-size: 1.5em;
color: #000;
}
</style>
</head>
<body>
<div id="header">
<h1>
Christy For Congress<br>
Wit, Wisdom, and Civil Discourse
</h1>
<a href="http://www.christyforcongress.com" class="btn">Learn More...</a>
</div>
</body>
</html>
coothead
2 Likes
To get the text centred and left aligned I would add the following to the code @coothead kindly supplied 
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
margin: 0;
font: normal 1em / 150% serif;
}
/* help mobile out with fixed image*/
body:before {
content:"";
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background: url( http://www.christyforcongress.com/images/slideshow/1-edit.jpg ) no-repeat center center;
background-size: cover;
z-index:-1;
}
#header {
padding: 1em;
display:table;
text-align:center;
}
h1 {
line-height: 1.25em;
color: #fff;
text-shadow: 0 1px 1px #000, 1px 0 1px #000, 0 0 1px #000;
}
.btn {
font-size: 1.5em;
color: #000;
}
</style>
</head>
<body>
<div id="header">
<h1> Christy For Congress<br>
Wit, Wisdom, and Civil Discourse </h1>
<a href="http://www.christyforcongress.com" class="btn">Learn More...</a> </div>
</body>
</html>
Background-attachment fixed doesn’t work properly on mobile so I moved the rule to a pseudo element that is fixed to the viewport and avoids the mobile issue.
Note that you have a horizontal and vertical scrollbar showing which is caused by using 100vw (and the 100vh) on your hero element. You don’t need a width anyway on that element as it will fill the available space anyway. (You probably added the width to counter the fact you haven’t removed the margins from the body.) You have also used height:100vh which means the element can never grow with content. Use min-height instead of height and that allows the element to grow if needed.
Try to keep things simple as @coothead suggests and it will make life easier in the long run
3 Likes
Thank you both for the response. As I am a bear of very little brain especially involving CSS, I am completely lost as to why this works. I am guessing that it is because you are assigning the background image to the body rather the my example which uses a to create the hero page. But what if I wanted the hero section to fill the entire viewport, but then have an additional page of content below. Is this even doable or advisable and if so, how do I accomplish this.
It’s hard to give an answer to every eventuality but you could do something like this.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
line-height:1.5;
}
/* help mobile out with fixed image*/
body:before {
content:"";
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background: url( http://www.christyforcongress.com/images/slideshow/1-edit.jpg ) no-repeat center center;
background-size: cover;
z-index:-1;
}
.main-header {
min-height:100vh;
}
.header {
padding: 1em;
display:table;
text-align:center;
}
.header h1 {
line-height: 1.25em;
color: #fff;
text-shadow: 0 1px 1px #000, 1px 0 1px #000, 0 0 1px #000;
}
.btn {
font-size: 1.5em;
color: #000;
}
.main {
background:rgba(255,255,255, 0.8);
/*background:#fff; hide hero image -if needed*/
position:relative;
z-index:1;
}
.content {
max-width:1280px;
margin:auto;
padding:1rem;
}
</style>
</head>
<body>
<header class="main-header">
<div class="header">
<h1> Christy For Congress<br>
Wit, Wisdom, and Civil Discourse </h1>
<a href="http://www.christyforcongress.com" class="btn">Learn More...</a> </div>
</header>
<main class="main">
<div class="content">
<h2>Main Content</h2>
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
</div>
</main>
</body>
</html>
It all depends on what you want to happen and how you want things to behave?
1 Like
Thank you for the help and I apologize for the overly-broad nature of my questions as I am trying to figure out exactly what I am looking for as well. Trying to understand your CSS, are you simply placing the image as background for the page, then letting the header text simply float to the default left top position? On the floating of the main content over the background is that the combination of z-indexes -1 and 1 with relative positioning?
I am placing the image as a viewport sized image using the pseudo element :before on the body. This allows it to be fixed positioned and also work in mobile unlike placing it as background-attachment :fixed which breaks on mobile.
I could have placed it as a background to the hero but you would lose mobile support.
It doesn’t float anywhere it just starts there at its default position. I made it display:table so that it shrinks to fit the content and then the text can be centred within the width of that shrunk wrap element.
The main content starts below the fold and I have simply given it a white background to rub out the initial image. The position:relative with appropriate z-index creates a stacking context to ensure the white background is on top of the previous image.
1 Like
Thank you for all of the help. I played around with the examples quite a bit, but I think I’m starting to get the picture. One question I’m not following is why does placing the image as a background to the hero fail in mobile?
It’s because of the use of background-attachment:fixed which doesn’t work properly on mobile viewports especially when combined with cover. The images get stretched over the whole document and not the element they are applied to.
Thank you and thanks to all.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.