I am trying to get rid of a thin white line that appears between the 1st 2 Div's of my website ("video_main" and "parallax"). I thought this might be an artifact of the video so I cropped the bottom in export from Premiere Pro CC but it still appears. I tried making a margin, padding and border 0px for the video_main and parallax div's but it doesn't get rid of the thin white line. Can anyone tell why it's happening? Many thanks.
<!DOCTYPE HTML>
<html>
<head>
<script src="//content.jwplatform.com/libraries/YQ8opLwo.js">
</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="red_hook_rush_hour_trimmed.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>
</div>
<div class="parallax">
<div class="container_blank_space">
<p>text</p>
</div>
<section class="wrapper_pano_and_text">
<div class="pano">
<img src="https://bartonlewisfilm.com/barton-3.jpg" alt="barton" width="auto" height="auto" />
</div>
<div class="pano_text">
<p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
</div>
</section>
</div>
</body>
</html>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
paragraph {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*THIS IS THE END OF THE MYER RESET*/
body {
width: 100%;
margin: 0 auto 0;
}
a {
font-family: "europa", sans-serif;
text-align: left;
text-decoration: none;
letter-spacing: 3px;
font-size: 22px;
color: white;
}
a:hover {
text-decoration: underline;
}
.parallax {
/* The image used */
background-image: url("https://bartonlewisfilm.com/html_bckgd_1024.jpg");
/* Set a specific height */
height: 1620px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.video_main {
margin: 0 auto 0;
width: 100%;
height: auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index: -1500;
}
.content h1 {
font-family: "jaf-domus-titling-web", sans-serif;
color: white;
text-align: center;
font-size: 400%;
letter-spacing: 4px;
z-index: 100;
position: absolute;
top: 50px;
}
.content h2 {
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 225%;
letter-spacing: 6px;
z-index: 100;
position: absolute;
top: 175px;
}
.content p {
font-family: "europa", sans-serif;
color: white;
font-size: 120%;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
.content .videolinks {
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
}
.videolinks p {
padding: 20px;
padding-left: 60px;
}
.videolinks p:first-child {
padding-top: 250px;
}
.wrapper_pano_and_text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
align-items: center;
}
.pano img {
width: 100%;
height: 100%;
padding: ;
z-index: -1500;
}
.pano_text {
width: 45%;
overflow: hidden;
z-index: 100;
position: absolute;
}
.pano_text p {
font-family: "europa", sans-serif;
font-size: 150%;
padding-right: 80px;
letter-spacing: px;
color: white;
font-weight: 500;
line-height: 135%;
font-weight: 500;
}
.container_blank_space {
height: 75px;
}
.container_blank_space p {
text-indent: -9999px;
}
Looks like your video element under .video_main is missing a value for display different from inline.
You should set its value for display (CSS) to display: block or display: flex so the parent container can adapt its height properly.
Working Codepen example. Take a look at the declaration of .video_main video.
Related
I have been looking everywhere for a solution to my problem, but nothing seems to work. It always bugged me that the top of my website always had a gap on the top and all the answers to the problem did nothing. I inspected the website in firefox and found that there was a whitespace between the body and first div (I tried putting the code on the same row but that did nothing). Any Idea on how to remove the whitespace? (I can remove it in inspect on firefox and it goes away there)
Here is the HTML and CSS:
/* CSS Document */
html,
body {
height: 100%;
}
* {
overflow: auto;
margin: 0;
}
body {
margin: 0;
background-color: #111111;
padding: 0;
font-family: verdana;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
color: white;
text-align: left;
}
video {
width: 100%;
z-index: 0;
}
.menubar {
left: 100;
}
.ulmenubar {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.ulmenubar a {
float: left;
}
.space {
margin: 0;
padding: 0;
}
.rightside {
float: right;
}
.ulmenubar a {
display: block;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.ulmenubar a:hover {
color: grey;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #181818;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
#contact {
width: 200px;
margin-left: auto;
margin-right: auto;
}
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
<div class="menubar">
<ul class="ulmenubar">
<div class="rightside">
Home
Portfolio
About
Contact
</div>
</ul>
</div>
<div class="space"><video id="background-video" autoplay="" loop="" muted=""><source src="vid.mp4" type="video/mp4"></video></div>
<div id="vids"></div>
<div class="row">
<div class="column">
<img src="https://media0.giphy.com/media/xT8qBoDhee6aWOhLqw/giphy.gif?cid=790b7611a86749120009311d9c18651c96962c8e7e27def2&rid=giphy.gif&ct=g" alt="Sea" style="width:100%">
</div>
<div class="column">
<a onclick="openWin()"><img src="https://media4.giphy.com/media/UxTZDNv0Zej4s/giphy.gif?cid=790b76118b066a194adc23988667623a5aea3c7b55f3c44b&rid=giphy.gif&ct=g" alt="Forest" style="width:100%"></a>
</div>
<div class="column">
<img src="https://media4.giphy.com/media/l41lQIclE3lItAlfq/giphy.gif?cid=ecf05e47mgmmt0kas0kp9zc0435gcanw878chwmk129z9uhf&rid=giphy.gif&ct=g" alt="Sky" style="width:100%">
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
Add this to your CSS
After many hours of trying, I figured out what the problem was. This may not be the case but when I went into the HTML file on text edit, I saw two <body> on the top, I deleted one and also deleted the space between <head> and <body>. It worked.
I’m making a small website to host my music, where each section has its own layout. My problem is with this specific page - https://terramsc.github.io/vault/for-zofia.html
I’ve decided to position an MP3 player on the bottom of the site, in a fixed div stuck to the bottom. It looks OK everywhere, except Safari mobile browser. It appears cut and I don’t know how am I supposed to fix it.
<head>
<meta charset="utf-8">
<title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<style>
/* GET RID OFF TUMBLR BS */
#tumblr_controls,
.controls {
display: none !important;
}
#tumblr_controls {
display: none;
}
iframe:first-child {
display: none !important;
}
iframe:nth-child(2) {
display: none;
}
.app-cta-button {
opacity: 0 !important;
}
.tmblr-iframe--app-cta-button {
display: none !important;
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
display: none;
}
#search {
display: none;
}
/* HTML & BODY */
html,
body {
margin: 0;
background-color: #B16791;
}
html,
body,
{
font-family: 'Inter', sans-serif;
}
/* MAIN CENTERED DIV WITH A PIC */
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
max-width: 600px;
width: 100%;
text-align: center;
color: white;
/* Whatever width you want */
}
/* GO BACK BUTTON */
input[type=button] {
margin: 20px 0px 0px 20px;
padding: 0;
position: fixed;
height: 100px;
width: 100px;
border-radius: 100px;
background: #B16791;
border: 1px solid #B16791;
font-weight: 1000;
font-size: 48px;
background-image: url("https://i.imgur.com/mojAVpi.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100%;
z-index: 99;
}
input[type=button]:hover {
cursor: pointer;
}
/* SOMGS */
#somgs {
font-family: 'Press Start 2P', cursive;
color: white;
position: fixed;
bottom: 20px;
left: 20px;
width: 600px;
}
#somgs2 {
font-family: 'Press Start 2P', cursive;
color: white;
position: fixed;
display: none;
bottom: 40px;
left: 40px;
right: 40px;
font-size: 36px;
}
audio {
border-radius: 100px;
right: 0;
width: 100%;
}
/* OTHER */
#top_text {
font-family: 'Press Start 2P', cursive;
color: white;
width: 100%;
text-align: center;
padding-top: 20px;
}
#media only screen and (max-width: 1000px) {
.subtitle {
font-size: 42px;
}
input[type=button] {
height: 140px;
width: 140px;
cursor: pointer;
}
#somgs {
display: none;
}
audio {
border-radius: 100px;
width: 100%;
}
#somgs {
display: none;
}
#somgs2 {
display: initial;
left: 0;
right: 0;
padding: 0px 40px 0px 40px;
}
#top_text {
padding-top: 72px;
font-size: 36px;
}
}
</style>
<script type="text/javascript">
document.getElementById("button").onclick = function() {
location.href = "https://terramsc.github.io/vault/index.html";
};
</script>
<body>
<div id="button"><input type="button" value="" onclick="location.href = 'https://terramsc.github.io/vault/';"></div>
<div class="outer">
<div class="middle">
<div class="inner">
<img src="https://i.imgur.com/nc24BBo.gif" width="100%">
</div>
</div>
</div>
<div id="somgs">
<p>"I couldn't say goodbye"</p>
<p>v0.1 - 17.04.2022</p>
<audio controls>
<source src="https://drive.google.com/file/d/1eFnqeF0wmRhAXwG8UrYWWpYgiyteEbnu" type="audio/mpeg" /></audio>
</div>
<div id="somgs2">
<p>"I couldn't say goodbye"</p>
<p>v0.1 - 17.04.2022</p>
<audio controls>
<source src="https://drive.google.com/file/d/1eFnqeF0wmRhAXwG8UrYWWpYgiyteEbnu" type="audio/mpeg" /></audio>
</div>
<div id="top_text">
sleep tight
</div>
</body>
</html>```
[1]: https://i.stack.imgur.com/xeFLt.jpg
First, I'm so sorry because I know that it's possible, but I really suck at CSS.
This is what I'd like to do:
I've managed to do it but it's really messy... The main issue is that my header isn't responsive at all and I'd to know what is the best way to do it (I know that usually flexbox is a good practice when it comes to build something responsive but my issue is that if I create 2 columns thanks to Flexbox I won't be able to align them just next to each other).
This is my current code (I know it's uggly):
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%; /* Full width */
z-index: 1;
max-height: 8vh;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
}
.logo {
position: absolute;
top: 10px;
right: 35%;
height: 2.5em;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
<header id="myHeader" class="sticky">
<div class="header-title">
<h1>
Title
</h1>
<img
src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517"
class="logo"
alt="logo plane"
/>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
</header>
Thank you guys!
In HTML with CSS it is sometimes a good idea to do some nesting of elements.
I used an wrapper element (.header-title-composition) to layout title, line, and subtitle vertically . This is all wrapped alongside the paper plane inside .header-title, which is responsible for the horizontal layout
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
/* This destroys everything inside this demonstration */
/* Basing a height on the actual viewport's height is somewhat dangerous */
/* max-height: 8vh; */
}
.header-title {
display: flex;
align-items: center;
}
.header-title :first-child {
margin-left: auto;
}
.header-title :last-child {
margin-right: auto;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
}
.logo {
/* position: absolute;
top: 10px;
right: 35%;*/
height: 2.5em;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
<header id="myHeader" class="sticky">
<div class="header-title">
<div class="header-title-composition">
<h1>
Title
</h1>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
Here somewhat of a starting point for you. First of all, I added .header-brand as wrapper for title, line, sentence and image. Used display: flex for alignment. The additional media query takes care of the alignment, when the screen size is below 480px (But try it out on your own, since there are probably still some issues with that)
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
max-height: 80vh;
display: flex;
}
.header-brand {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
margin: 0;
}
.logo {
height: 2.5em;
margin-left: 20px;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-title {
margin-top: 10px;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
#media screen and (max-width: 480px) {
.line {
width: 100%;
}
.logo {
margin-left: 0;
}
}
<header id="myHeader" class="sticky">
<div class="header-brand">
<div class="header-title">
<h1>
Title
</h1>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
Combine flexbox and a simple wrapper using text-align: center, the decorated line can be a pseudo-element.
h1,
div,
p {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #c16200;
color: white;
overflow: hidden;
position: sticky;
padding: 0.5rem;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.logo-wrapper {
text-align: center;
margin-right: 1rem;
}
header img {
width: 2rem;
height: 2rem;
}
h1 {
font-weight: bold;
font-size: 1.5rem;
}
h1::after {
width: 10rem;
height: 1px;
display: block;
background-color: white;
content: '';
}
<header class="sticky">
<div class="logo-wrapper">
<h1>TITLE</h1>
<p>the tag line</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</header>
I suppose you want the element which contains the title and subtitle centered, and the image aligned right to that, not both together centered. So here's a solution:
The .title-container is centered within the header using display: flex and other flex settings (see below) on the header. Avoiding both the text container and the image to be centered together is done by applying position: absolute to the image, making it a child of .title-container and applying position: relative to .title-container to make it the position reference for the absolutely positioned image. That way the image isn't considered at all when centering the .title-container.
Take a look at the position parameters for the image: Vertically-centered alignement is achieved by top: 50% and transform: translateY(-50%);, the horizontal position is done with a negative right value: -2.5rem, i.e. the width of the image (2rem) plus 0.5rem for the distance to the text container. Adjust all values as needed.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #c16200;
color: white;
position: fixed;
padding: 1rem;
top: 0;
width: 100%;
font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.title-container {
text-align: center;
position: relative;
width: 200px;
}
.title-container .line {
border-top: 1px solid white;
width: 100%;
margin: 2px 0 4px;
}
.title-container img {
width: 2rem;
height: 2rem;
position: absolute;
right: -2.5rem;
top: 50%;
transform: translateY(-50%);
}
.title-container h1 {
font-size: 1.5rem;
margin: 0;
}
.title-container p {
margin: 0;
}
<header>
<div class="title-container">
<h1>TITLE</h1>
<div class="line"></div>
<p>SUBTITLE</p>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I have been looking around on stackoverflow to find the answer on my problem but I couldn't find it. The problem is that I have a background img where I want to have text on it. But if I use postition: absolute; the text disappears. I also don't want it in my style because I going to use this on different pages with different images.
Visit problem
HTML:
<body>
<div id="header">
<img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</body>
And my CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 540px;
background: #efede7;
}
body {
background: #efede7;
font-family: 'Montserrat', sans-serif;
color: #fff;
line-height: 1.3;
}
#header {
}
.begin {
width: 100%;
max-height: 540px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
font-size: 1.5em;
color: #c7c7c7;
text-align: center;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
I hope someone is smarter than me and could figure this out?
Thanks for already looking into it!
You put your background as image, so it's not just background, but also element with dimension. You should remove your <img /> and put it as background using CSS.
#header {
background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}
Remove the header image from your html and use CSS properties instead.
See DEMO which uses this updated CSS snippet:
#header {
background-image: url('http://www.larsdejonge.nl/werk/img/background.jpg');
background-size: auto 540px;
background-repeat: no-repeat;
height: 540px;
}
Background-resize is necessary because your image is way too large.
Remove <IMG> and use the img url as background in CCS:
here is an example:
http://jsfiddle.net/act6uasf/5/
I see that you don't want the img in your CSS but if you want that I think you need to find it out your self. I don't see the big problem using a url in your CSS ore is it just me?
My solution
You can better use it for the time this now, if you find later something else you can always change it.
HTML Code:
<body>
<div id="header">
<div class="text">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</div>
</body
CCS Code:
#header {
background-image: url(http://www.larsdejonge.nl/werk/img/background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 540px;
}
.text {
padding-top: 150px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
color: #545454;
font-size: 1.25em;
letter-spacing: .06em;
margin: 0;
padding: 0 0 2.5em;
text-align: center;
text-transform: uppercase;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
If you really want to solve this problem with absolute position, you can use my example
http://jsfiddle.net/act6uasf/2/
here to make absolute property work, you just need to add
position:relative;
to #header, but i recommend you to try solving it with background property.
CSS doesn't prevent you from swapping the image out like you have suggested. I would use a body class.
HTML
<body class="home"><!-- change this class for each page -->
<div class="intro">
<p>
Hello World!
</p>
</div>
</body>
Simply change the class on the body tag for each page, i.e. home, about, contact, etc.
CSS
.home .intro {
background-image: url('path-to-image.jpg');
}
.about .intro {
background-image: url('path-to-some-other-image.jpg');
}
Here is a demo. Swap the class on the body tag from home to about and click Run to see the difference.