Here is my website www.michaelmorris.website. I like the way that it looks full screen but when I resize the browser down to a smaller screen everything is squashed. I need small screen to stay the same as full size. I realize there could be some errors but at this point i’m just concerned with the resizing issue. I’ll post the code below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" type="text/css" href="Main.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="michael">
<p class="m">Michael</p>
</div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" `enter code here`width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website" width="350" height="50">
</div
</body>
</html>
CSS:
.wrapper {
width: 497px;
height: 100px;
margin: 0 auto;
/* padding: 0 5%; */
display: block;
}
.michael {
width: 100px;
height: 90px;
}
.m{
color: #EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 30px;
margin: 0px;
display: inline-block;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
left: 30%;
top: 0%;
max-width: 50%;
max-height: 50%;
}
.ringhead {
width: 200px;
height: 90px;
}
.ring{
position: fixed;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
bordr: 1px solid black;
display: inline-block;
left: 50%;
top: 4%;
margin: 0px;
max-width: 100%;
max-height: 100%;
}
.christina {
color: #EEE8AA;
position: relative;
float: left;
borer: 1px solid black;
/* top: 0%; */
text-transform: uppercase;
font-size: 30px;
padding-left: 10%;
/* max-width: 100%; */
/* max-height: 100%; */
}
.c{
max-width: 80%;
max-height: 60%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 55%;
left: 55%;
transform: translateX(-55%) translateY(-55%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
going to need to repost my code
You can edit your previous post. The CSS should be preceeded by three backticks on a line by themselves and closed with three backticks on a line by themselves. (The formatting will be retained and the code box will be given a vertical scrollbar) Like this:
```
your lines of code here
```
EDIT:
There are quite a few HTML errors on the page that could be fixed. Please check the following link to the HTML validator. Click the “message filtering” button for a summarized view. Let us know if you need help.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.michaelmorris.website%2F
1 Like
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Main.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
</div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring"width= "5%" height="5%" >
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="date">
<p class="d">Sept 1, 2016 7:00 PM Salisbury, NC</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website" >
</div
</div>
</body>
</html>
CSS:
wrapper {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 11px;
/* padding: 0 5%; */
}
.michael {
width: 10%;
height: 5%;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
margin: 0px;
}
.m{
color: #EEE8AA;
max-width: 100%;
max-height: 100%;
text-transform: uppercase;
position: absolute;
font-size: 1.8em;
left: 30%;
top: 4%;
font-style: italic;
}
.ringhead {
width: 10%;
height: 5%;
background-color: white;
}
.ring{
position: absolute;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
left: 49%;
top: 3%;
max-width: 100%;
max-height: 100%;
}
.christina {
width: 10%;
height: 5%;
background-color: white;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
margin: 0px;
}
.c{
color: #EEE8AA;
max-width: 100%;
max-height: 100%;
text-transform: uppercase;
position: absolute;
font-size: 1.8em;
right: 23%;
top: 4%;
font-style: italic;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.date{
border-color: white;
width: 100%;
height: 1%;
background-color: white;
}
.d{
color: #EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 1.5em;
font-style: italic;
/* max-width: 100%; */
/* max-height: 100%; */
left: 45%;
top: 20%;
max-width: 100%;
max-height: 100%;
padding-left: 0%;
padding-right: 0%;
margin-right: 20%;
}
.weddingWebsite{
width: 100%;
height: 20%;
}
.wedding{
border-style: double;
border-color: #EEE8AA;
position: fixed;
top: 100%;
left: 55%;
transform: translateX(-55%) translateY(-100%);
max-width: 70%;
max-height: 70%;
background-color: white;
}
}
wrapper {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 11px;
/* padding: 0 5%; */
}
.michael {
width: 10%;
height: 5%;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
margin: 0px;
}
.m{
color: #EEE8AA;
max-width: 100%;
max-height: 100%;
text-transform: uppercase;
position: absolute;
font-size: 1.8em;
left: 30%;
top: 4%;
font-style: italic;
}
.ringhead {
width: 10%;
height: 5%;
background-color: white;
}
.ring{
position: absolute;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
left: 49%;
top: 3%;
max-width: 100%;
max-height: 100%;
}
.christina {
width: 10%;
height: 5%;
background-color: white;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
margin: 0px;
}
.c{
color: #EEE8AA;
max-width: 100%;
max-height: 100%;
text-transform: uppercase;
position: absolute;
font-size: 1.8em;
right: 23%;
top: 4%;
font-style: italic;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.date{
border-color: white;
width: 100%;
height: 1%;
background-color: white;
}
.d{
color: #EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 1.5em;
font-style: italic;
/* max-width: 100%; */
/* max-height: 100%; */
left: 45%;
top: 20%;
max-width: 100%;
max-height: 100%;
padding-left: 0%;
padding-right: 0%;
margin-right: 20%;
}
.weddingWebsite{
width: 100%;
height: 20%;
}
.wedding{
border-style: double;
border-color: #EEE8AA;
position: fixed;
top: 100%;
left: 55%;
transform: translateX(-55%) translateY(-100%);
max-width: 70%;
max-height: 70%;
background-color: white;
}
}
Is the code that you just posted any different from the code on the web site?
no it’s the same
i posted the wrong code from my rough drafts the first and second time
We can copy the code from the web site, so there is no need to duplicate it in the post.
I noticed that the “Bottom Banner.png” does not display (and cannot be downloaded) because it contains errors. You might want to take a look at it.
FYI only, while I’m diddling with the code, I am taking the spaces out of the image names. Also deleting the stray space from between the lines of code to make them more human readable. (I have too much spare time).
2 Likes
Good, I’ll leave you to it 
2 Likes
the bottom banner is were the picture is, the middle banner is that small strip that the names are on(though it should be about 10px towards the top) and the top banner is were the ring and were the names should be. Thank you.
I thought space was a good thing in reading code. My fault i’ll remember that next time. The whole designing for a smaller device is what is confusing me the most. Marking up a full screen website isn’t really that bad.
You’re the coder, so the look of the code on the pages is up to you; however, some conventions are easier to read than others. I’m an advocate of indented code, a minimum of white space between lines and CSS properties written on individual lines (not in a long line). Since yours seems a bit random, I’m taking liberties with it. No offense intended. It just works for me.
Is there supposed to be a background image along the bottom of the window, or behind the image of the newlyweds? (I’m trying to account for all of the elements).
1 Like
No I haven’t and do not plan to put anything on the bottom of the image and there shouldn’t be anything behind the image. I haven’t built a website html/css since my html and css college course in 2014. Most of my courses have been coding back-end Php or Java
1 Like
This is my first website for a portfolio and to really learn. When you are in college your just trying to beat assignment deadlines and not really perfecting your craft.
2 Likes
Hi, Michael.
This is my interpretation of something similar to your request.
Consider this a starting point from which you can better describe what you would like to achieve.
@PaulOB can hardly wait!
Because the page is fundamentally narrow, portrait, I chose to apply the full width background colors/images with outer divs.
I used the same image “TopBanner.jpg” for the image behind the ring and names as I did for the image over the rest of the page which is applied in the body tag. The top image overlays the body image.
The row with the dates has been given an translucent black color rather than using the image with the gradient. I was lazy. I also realize that you may not want the dates over the black row.
I used display:table/table-cell properties because I am more familiar with them than with flexbox and I was able to tweak the tcells to suit.
The large image closely accommodates the height of the viewport using calc and vh minus a correction factor for the top sections. The image currently has a minimum width assigned but that is easily changed if one really wants the whole page to fit on a mobile in portrait mode.
For this demo, I reduced the size of the weddingsite.jpg image (the standing couple) from 2988x5312 (2,144 KB) to 675x1200 (110 KB) and lowered the quality to 80%.
The HTML and CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="michaelmorris1a.css">
<title>The HTML5 Herald</title>
<!--
https://www.sitepoint.com/community/t/divs-moving-downward-when-i-resize-the-browser/224155
morrism35 (michael morris)
May 16,2016 2:56 AM
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
html,body {min-height:100vh;}
body {
font-size:100%;
background-image:url("images/TopBanner.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
padding:0;
margin:0;
}
.bgwrap.h {
background-image:url("images/TopBanner.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
.bgwrap.d {
background-color:rgba(0,0,0,.3);
}
.container {
max-width:800px;
margin:0 auto;
/* outline:1px solid lime; /* TEST Outline. To Be DELETED. */
}
.names {
display:table;
width:100%;
padding:2vh 0;
/* outline:1px solid yellow; /* TEST Outline. To Be DELETED. */
}
.tcell {
display:table-cell;
text-align:center;
vertical-align:bottom;
/* outline:1px solid blue; /* TEST Outline. To Be DELETED. */
}
.m,.c {
text-align:right;
color:#eee8aa;
font-size:1.825em;
font-style:italic;
text-transform:uppercase;
width:35%;
}
.c {
text-align:left;
width:40%;
}
.ring {
display:block;
max-width:60px;
height:auto;
margin:0 auto 20px;
}
.date {
display:table;
width:100%;
max-width:550px;
border-spacing:6px 8px;
color:#eee8aa;
text-transform:uppercase;
font-size:1.25em;
font-style:italic;
margin:0 auto;
}
.date span {
display:table-cell;
vertical-align:middle;
text-align:center;
width:56%;
/* outline:1px dotted lime; /* TEST Outline. To Be DELETED. */
}
.date span + span {
width:44%;
}
.container.i {
padding-top:2vh;
}
.wedding {
min-width:240px; /* limits the minimum width of the image (therefore the height) */
max-width:calc(52vh - 70px); /* reduces width of image (therefore the height) as viewport height is reduced */
border:4px double #eee8aa;
margin:0 auto;
}
.wedding img {
display:block;
width:100%;
height:auto;
}
@media screen and (max-width:450px) {
body {font-size:75%;}
}
</style>
</head>
<body>
<div class="bgwrap h">
<div class="container">
<div class="names">
<div class="tcell m">Michael</div>
<div class="tcell"><img class="ring" src="images/gold.gif" alt="Wedding Ring" width="120" height="109"></div>
<div class="tcell c">Christina</div>
</div>
</div>
</div>
<div class="bgwrap d">
<div class="container">
<div class="date">
<span>Sept 1, 2016 7:00 PM</span><span>Salisbury, NC</span>
</div>
</div>
</div>
<div class="container i">
<div class="wedding"><img src="images/weddingsite2.jpg" alt="Wedding Website" width="675" height="1200"></div>
</div>
</body>
</html>
This page plus the images: (unzip, click and play)
morrism.zip (147.0 KB)
1 Like
Great never thought about putting the date of the event on the darker portion of the screen. I wanted to put it in between the picture and the darker border, but I make keep it this way. How far off was I and what tips would you give me. I plan on going through the code very carefully. This is more of a learning experience than anything. I feel i;ve learned more coding on my own than I did in college.
That is actually me and my fiancee.
2 Likes
Congratulations!
One nice thing about HTML and CSS is that there is often more than one way of accomplishing something. The code that I have used is not the most modern, but it is quite logical. I think flexbox would produce a cleaner looking HTML page but I’m not comfortable enough with it to use it in public.
By all means, study the code. You gave it a good try, but one should avoid using absolute positioning to layout significant portions of a page. pos:abs should be used in small doses when one wants to place a small object relative to a parent or ancestor.
Essentially, I started from scratch. Hope you don’t mind, and I hope you can get something out of it.
After reading and playing with it, don’t hesitate to ask any questions that come to mind.
Notice especially the behavior of the large image in the browser as you change the width of the browser window and the height of the browser window, too.
In the CSS, you will find several commented out outlines. I like to use outlines while coding or troubleshooting a page because they do not affect the dimensions of objects.
Cheers.