Image moving when adding new content to <h1> - html

First website here (just a heads up)!
My problem is that I'm trying to put my content (Flying Fish Painting & Maintenance with Service link below) all in the h1 category without moving the images! I would really like for the two images (on the left and right) to stay in the top left and top right corner respectively when I add the Services href link. Any ideas? Here is my code:
.round1 {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
width: 70px;
height: 70px;
}
.round2 {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 70px;
height: 70px;
}
.linkto {
color: white;
font-size: 60%;
font-family: Arial;
}
.linkto:hover {
color: blue;
}
body {
padding: 20px 20px 20px 20px;
}
h1 {
color: white;
border: 6px solid black;
border-radius: 25px;
text-align: center;
font-family: Forte;
font-weight: bold;
background-color: black;
font-size: 180%;
padding-bottom: -50px;
}
<h1>
Flying Fish Painting &amp Maintenance</br>
<img class="round1" src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291" align=left>
<img class="round2" src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291" align=right>
<a class="linkto" href="C:\Users\CE User\Desktop\services.html">Services</a>
</h1>

First of all, Instead of cramming everything inside an H1 tag, you could put the content in separate divs and then use flex-box to align them. Why not in H1 tag? It's meant for headings
There's so many ways how to accomplish what you're aiming for, this is just one of them
/*
More about box-sizing:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.wrapper {
background: black;
border-radius: 25px;
text-align: center;
padding: 1rem;
margin: 0 auto;
display: flex;
justify-content: center;
/* could be any number you want */
max-width: 780px;
}
.image-wrapper {
flex-basis: 70px;
}
img {
max-width: 100%;
}
h1 {
text-align:center;
font-family:Forte;
font-weight:bold;
color: white;
margin: 0 1rem 0 1rem;
}
a {
color: white;
text-decoration: none;
font-size: 1.5rem;
font-family:Arial;
}
a:hover { color: blue }
<div class="wrapper">
<div class="left image-wrapper">
<!-- removed the align attribute -->
<img src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291">
</div>
<div>
<h1> Flying Fish Painting &amp Maintenance</h1>
<a class ="linkto" href="C:\Users\CE User\Desktop\services.html">Services</a>
</div>
<div class="right image-wrapper">
<img src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291">
</div>
</div>

I hope this helps.
.linkto {
color: white;
font-size: 60%;
font-family: Arial;
}
.linkto:hover {
color: blue;
}
body {
padding: 20px 20px 20px 20px;
}
h1 {
color: white;
border: 6px solid black;
border-radius: 25px;
text-align: center;
font-family: Forte;
font-weight: bold;
background-color: black;
font-size: 180%;
position: relative;
}
h1:before {
position: absolute;
content: url('https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=50,h=50');
left: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
width: 70px;
height: 70px;
background-color: black;
}
h1:after {
position: absolute;
content: url('https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=50,h=50');
right: 0;
top: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 70px;
height: 70px;
background-color: black;
}
<h1>
Flying Fish Painting &amp Maintenance <br/>
<a class="linkto" href="C:\Users\CEUser\Desktop\services.html">Services</a>
</h1>

Related

Z-Index, Create a text box and bringing it to the front

I have a simple page, background image and a text box.
I need the text box to be at the front but as I'm quite new to html/css I just got lost a bit :)
I tried to solve it with z-index but also didn't find the right way to do it.
This is the html:
<div><img src="back.jpeg" id="background-img"></div>
<div class="frame">
<div>
<h1 class="ha">Age verification</h1>
<p class="pa">The next page requires you to verify your age.</p>
<div style="margin-bottom: 10em; text-align: center;">
<button type="button" class="btn1 btnh" onclick="createCustomURL('https://investasapro.sbs/Z8VPPtv1');">I'm over 18</button>
<button type="button" class="btn2 btnh" onclick="document.location='../underage'">I'm under 18</button>
</div>
</div>
</div>
This is the css:
<style>
.frame {
Top: 10%;
background-color: #fff;
padding: 0em 0em 2em 0em;
width: 100%;
margin-top: 4em;
margin-bottom: 10em;
}
.ha {
text-align: center;
padding: 1em 0em;
font-size: 40px;
}
.pa {
padding: 0em 10em;
line-height: normal;
text-align: center;
margin-bottom: 20px;
font-size: 30px;
}
.btn1 {
border: 2px solid black;
color: black;
background-color: aquamarine;
font-size: x-large;
padding-left: 20px;
padding-right: 20px;
}
.btn2 {
background-color: white;
border: 2px solid black;
color: black;
font-size: x-large;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btnh:hover {
background-color: gainsboro;
color: white;
}
#background-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
opacity: 0.2;
}
Z-index should be the correct way, just add it to #background-img. Because you use opacity: 0.2; the background image is transparent and the other object are visible. When you remove it, the image will cover the other elements.
#background-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
/* opacity: 0.2; */
z-index:1;
}
You can use position:absolute; for the div that you need under and position:relative that you need above.
.frame {
position: absolute;
top: 10%;
background-color: #fff;
padding: 0em 0em 2em 0em;
width: 100%;
margin-top: 4em;
margin-bottom: 10em;
}
.ha {
text-align: center;
padding: 1em 0em;
font-size: 40px;
}
.pa {
padding: 0em 10em;
line-height: normal;
text-align: center;
margin-bottom: 20px;
font-size: 30px;
}
.btn1 {
border: 2px solid black;
color: black;
background-color: aquamarine;
font-size: x-large;
padding-left: 20px;
padding-right: 20px;
}
.btn2 {
background-color: white;
border: 2px solid black;
color: black;
font-size: x-large;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btnh:hover {
background-color: gainsboro;
color: white;
}
#background-img {
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
}
.img-div {
position: relative;
}
<div class="img-div"><img src="back.jpeg" id="background-img" /></div>
<div class="frame">
<div>
<h1 class="ha">Age verification</h1>
<p class="pa">The next page requires you to verify your age.</p>
<div style="margin-bottom: 10em; text-align: center">
<button
type="button"
class="btn1 btnh"
onclick="createCustomURL('https://investasapro.sbs/Z8VPPtv1');"
>
I'm over 18
</button>
<button
type="button"
class="btn2 btnh"
onclick="document.location='../underage'"
>
I'm under 18
</button>
</div>
</div>
</div>

Heading not staying in the absolute position when screen is resized

I'm trying to create a description box for a website in React. The image below is the desired look:
but when I resize the screen to be large, the h1 tag doesn't seem to hold its absolute position anymore. I would like the box to resize like it has with the screen but the "Project 1" title should stay in the same place.
The CSS code to produce the images is:
body {
font-family: sans-serif;
margin: 0 auto;
padding: 25px;
max-width: 800px;
min-width: 400px;
background-color: #e0e0e0;
text-align: center;
}
.card {
position: relative;
padding: 25px 0px;
background-color: #ffffff;
margin: 50px 0;
text-align: left;
}
.top {
height: 100px;
width: 100%;
background-color: #69143a;
position: absolute;
top: 0;
left: 0;
display: flex;
}
h1 {
position: relative;
display: flex;
}
.name {
font-size: 2em;
color: #ffffff;
display: flex;
flex: 1;
margin: 10% 25px 0;
}
.supervisor {
font-size: 1em;
margin: 20px 20px;
color: #353535;
}
.bottom {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
color: #353535;
}
.info {
margin: 20px 20px;
}
.subjects {
margin: 20px 20px;
font-style: italic;
}
and the React component is:
function Project(props) {
return (
<div className="card">
<div className="top">
<h2 className="name">{props.title}</h2>
</div>
<div className="bottom">
<h4 className="supervisor">Supervisor: {props.supervisor}</h4>
<p className="info">{props.description}</p>
<p className="subjects">Prerequisites: {props.subjects}</p>
</div>
</div>
)
}
Any help would be greatly appreciated - been banging my head on the wall all day trying to get it to format correctly.
The root of the issue is the dynamic margin you had set on .name. You can remove that and also remove the position: absolute; and exchange it with relative. Then remove the top padding on .card and you are good to go.
body {
font-family: sans-serif;
margin: 0 auto;
padding: 25px;
max-width: 800px;
min-width: 400px;
background-color: #e0e0e0;
text-align: center;
}
.card {
position: relative;
padding: 0px 0px 25px 0px;
background-color: #ffffff;
margin: 50px 0;
text-align: left;
}
.top {
width: 100%;
background-color: #69143a;
position: relative;
top: 0;
left: 0;
text-align: center;
}
h1 {
position: relative;
display: flex;
}
.name {
font-size: 2em;
color: #ffffff;
padding: 30px;
}
.supervisor {
font-size: 1em;
margin: 20px 20px;
color: #353535;
}
.bottom {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
color: #353535;
}
.info {
margin: 20px 20px;
}
.subjects {
margin: 20px 20px;
font-style: italic;
}
<div class="card">
<div class="top">
<h2 class="name">{props.title}</h2>
</div>
<div class="bottom">
<h4 class="supervisor">Supervisor: {props.supervisor}</h4>
<p class="info">{props.description}</p>
<p class="subjects">Prerequisites: {props.subjects}</p>
</div>
</div>

I can't get the li's to be in my gray nav bar?

I have two links that I want to be on the right side of the navbar. I am not sure what I am missing here but if anyone can take a look at this I would greatly appreciate it. Here is my rep.it https://gregs-list.leezamartinez.repl.co/
I have tried to put them in a span and move the span to the top of the page but it just doesn't seem to work. I apologize if this is a stupid question I cannot seem to figure it out.
I want the Post and Account links to be in the right side of the navbar
https://gregs-list.leezamartinez.repl.co/
This is due to the fact that your h1 has a 100% width, the best approach here is to make the nav tag display:flex, justify-content:space-between and align-items:center to center everything vertically.
Example
html {
padding: 10px;
padding-right: 10px;
padding-left: 10px;
}
a {
text-decoration: none;
display: inline;
}
a::hover {
text-decoration-line: underline;
}
body {
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
main {
padding: 5%;
margin: auto;
padding-top:86px;
}
nav {
position: fixed;
margin: -18px;
background-color: whitesmoke;
width: 100%;
height: 65px;
text-align: left;
display:flex;
justify-content:space-between;
align-items:center;
z-index:9;
}
li {
float: right;
color: purple;
list-style: none;
font-size: 20px;
padding: 8px;
margin-right: 8px;
}
ul {
display: inline;
padding: 5px;
}
span {
color:rgb(184, 179, 179);
text-decoration-style: none;
}
p {
color: blue;
font-weight: bold;
}
placeholder {
font-famiy: 'Nunito', sans-serif;
color:lightgrey;
}
#mag {
height: 31px;
width: 29.5px;
display: -webkit-inline-box;
position: absolute;
border: 1px solid #DDDDDD;
border-radius: 3px;
}
h1 {
font-famiy: 'Nunito', sans-serif;
font-size: 25px;
font-weight: 700;
padding: 10px;
margin: 5px;
}
input {
height: 33px;
font-color: whitesmoke;
font-size: 20px;
width: 400px;
padding: 5px;
border: 2px solid whitesmoke;
}
label {
font-weight: bold;
}
#button1 {
width: 102px;
height: 40px;
padding: 12px 28px;
border-radius: 4px;
float: left;
border: 1px solid rgb(228, 228, 228);
text-align: center;
font-size: 14px;
background-color: ghostwhite;
}
#button2 {
width: 155px;
height: 40px;
padding: 12px 28px;
border-radius: 4px;
float: left;
border: 1px solid rgb(228, 228, 228);
background-color: ghostwhite;
font-size: 14px;
}
#button3 {
width: 100px;
height: 40px;
padding: 12px 28px;
border-radius: 4px;
text-align: center;
font-size: 14px;
background-color: ghostwhite;
border: 1px solid rgb(228, 228, 228);
}
.container {
position: absolute;
padding-top: 10px;
}
form {
padding: 20px;
padding-right: 55px;
padding-left: 0;
}
<nav>
<h1>Greg's List</h1>
<ul>
<li> Account</li>
<li> Post</li>
</ul>
</nav>
<main>
<div class="box">
<label>Search jobs</label>
</div>
<form action="#">
<input id='search' type="search" name="search" placeholder="Search software jobs" /> <a href='#'> <img id='mag' src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.6_challenge_design_to_code/magnifying-glass.png" alt="magnifying glass" /></a>
</form>
<button type="button" id="button1"> prev</button>
<button a href="#" type="button"id="button2">1 to 100 of 179</button>
<button type="button"id="button3"> next > </button>
<div class="container">
<p><span>June 22</span> Technical Project Manager <span> Midtwon East</span></p>
<p><span>June 21</span> Frontend Developer <span> SoHo</span></p>
<p><span>June 20</span> Senior Python Developer / Cofounder<span> Flatiron</span></p>
</div>
</main>
Also, bear in mind that you had a lot of markup errors in your HTML, I've corrected them in the snippet above. Plus you needed some padding for your main tag due to the fixed navigation bar (that also needed a z-index:9 in order to keep other things from showing above it).

Can't get content in a div to center on page?

I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
footer {
background-color: #bfd8d8;
position: absolute;
bottom: 0px;
width: 100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height: 50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar"> <a class="currentNav" href="index.html">Home</a> Music Photos Poetry About </nav>
<h2 class="pageTitle"> Get the Full Effect! </h2>
<img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams">
<h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<div class="footerSpacer"> </div>
<footer> © 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1#snhu.edu</span> </footer>
</div>
</body>
Add this to your CSS:
#container {
text-align: center;
}
And if you don't want all your content centered in this way, just wrap the content you do and give the container a text-align: center.
add text-align:center in your body tag. Try it.
body {
text-align:center;
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}

Page Scrolls down when I click on Link

I'm trying to build a page that has a lightbox - but I don't want any javascript on it.
I found a tutorial on how to do this, but when I started to add it, I noticed that everytime I click on the link, it scrolls down ever so slightly, hiding the top border of the page.
How can I stop this? Because it ruins the look of the site
HTML
<div id="container">
<div id="header-row">
<div class="logo span4">
<h1>Title <span>.</span></h1>
</div>
</div>
<div id="content">
<p></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-form">
<div class="box">
<h3>About</h3>
<p>
</p>
x
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
CSS
html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}
strong { font-weight: 700; }
a:hover { text-decoration: none; }
::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }
.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}
.logo h1 span { color: #e75967; }
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Here is a JSFiddle
Sorry for all the code - but it wont let me post it without it
x
using #close in a link like this makes your browser jump to that ID
Haven't pinpointed exactly on which elements it makes a difference, but you can simply add this your your CSS:
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
And it won't jump any more.