I can't get my Header image to fit to the page content
Question
I am coding a restaurant website's Home page for a desktop publishing class that I'm in, but I seem to be having some issues (well, multiple issues, but I will start with this one). I can't seem to figure out how to size the header that I exported out of InDesign and coded in Dreamweaver to fit the rest of the content. There is also some white space on the right side that I can't get rid of. I've tried various methods such as adding "overflow: hidden" which just cuts off the content and adds a scroll bar. Would anyone be willing to help me? I'm going mad just trying to figure this out. Thank-you! (my html and css code from Dreamweaver 2019 is posted below)
!UPDATE!
Hello, So here's an update: I copied and pasted my image from InDesign to Illustrator and exported the image as a jpeg (exporting as html or css did not work). my web page looks great in Dreamweaver, but when I load it into a browser, the images get distorted and cut off. My web page only looks normal when I adjust the size of the entire browser a little. I've googled this issue and am not finding solutions. For some reason, the browser isn't supporting the size and I don't know how to fix it.
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Majesti Banner Bold;
margin: 0;
}
/* Style the header */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
background-image: url(images/banner.jpg);
background-size: cover;
}
/* Increase the font size of the h1 element */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #41393d;
}
/* Style the navigation bar links */
.navbar a {
float: right;
display: block;
color: #d7e4c2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #be1e2d;
color: #d7e4c2;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #41393d;
padding: 20px;
}
/* adding color to <h2> element */
h2 {
color: #d7e4c2
}
/*adding color to <h4> element */
h4 {
color: #d7e4c2;
text-align: center;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
background-image: url(images/shutterstock_1531950407.jpg);
background-size: cover;
}
/* Style the footer */
footer {
background-color: #be1e2d;
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="navbar">
<a href="contact.html">Contact</a>
<a href="reservations.html">Reservations</a>
<a href="about.html">About</a>
<a href="index.html">Home</a>
</div>
<div class="row">
<div class="side">
<h2><center>Welcome!</center></h2>
<h4><i>TOWN is a high-end fine dining restaurant which serves traditional Chinese cuisine with an added flare. Spanning 4 generations, TOWN prides itself on using the finest organic ingredients available with no added preservatives or MSG, giving you the most authentic experience possible! Part of our mission statement is to bring quality, style, and the wish for good fortune to all of our guests!</i></h4>
</div>
<div class="main">
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
[ ][1
1 answers
solution1
0 2019-11-24 21:54:11
html, body { height: 100%; /*body: 0;*/ margin: 0px; padding: 0px; } * { margin: 0; padding: 0; padding-left: 0; } .header { /* width of the main content */ background-image: url(http://writingexercises.co.uk/images2/randomimage/woodtextures.jpg); /* chinese food*/ background-size: cover; padding: 97px; /* Some padding */ background-repeat: no-repeat; height: 0%; margin-bottom: -2px; margin-right: 0px; margin-left: -45px; margin-top: -47px; } /* Style for the navigation bar */ .navbar { overflow: hidden; /* Hide overflow */ background-color: #41393d; /* Sleek background color */ } /* Style the navigation bar links */ .navbar a { float: right; /* Make sure that the links stay side-by-side */ display: block; /* Change the display to block, for responsive reasons (see below) */ color: #d7e4c2; /* Bamboo text color */ text-align: center; /* Center the text */ padding: 14px 20px; /* Add some padding */ text-decoration: none; /* Remove underline */ } /* Right-aligned link */ .navbar a.right { float: right; /* Float a link to the right */ } /* Change color on hover/mouse-over */ .navbar a:hover { background-color: #be1e2d; /* Fire Starter background color */ } /* Ensure proper sizing */ * { box-sizing: border-box; } /* Column container */ .row { display: flex; flex-wrap: wrap; } /* Create two unequal columns that sits next to each other */ /* Sidebar/left column */ .side { flex: 30%; /* Set the width of the sidebar */ background-color: #41393d; /* Sleek background color */ padding: 40px; /* Some padding */ border-style: solid; color: #be1e2d; -webkit-box-shadow: inset 10px 10px; box-shadow: inset -10px 10px; } /* adding color to <h2> element */ h2 { color: #d7e4c2 } /*adding color to <h4> element */ h4 { color: #d7e4c2; } /* Main column */ .main { width: 70%; /* width of the main content */ background-image: url(images/shutterstock_1531950407.jpg); /* chinese food*/ background-size: 100%; padding: 1px; /* Some padding */ height: ; background-repeat: no-repeat; margin-bottom: 0px; } /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 700px) { .row { flex-direction: column; } ; height: auto; height: 700px; height: 700px; height: 0px; height: 700px; } body { font-family: "Majesti Banner Bold"; }
<html lang="en"> <head> <title>TOWN Chinese Restaurant</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="wrapper"> <div class="header"> <!--<img class="header" src="images/banner.png" alt="chinese banner" height="100"--> </div> <div class="navbar"> <a href="contact.html">Contact</a> <a href="reservations.html">Reservations</a> <a href="about.html">About</a> <a href="index.html">Home</a> </div> <div class="row"> <div class="side"> <h2> <center>Welcome!</center> </h2> <br> <h4><i> <center>TOWN is a high-end fine dining<br>restaurant which serves<br>traditional chinese cuisine with<br>an added flare. Spanning 4<br>generations, TOWN prides itself<br>on using the finest organinc<br>ingredients available with no<br>added preservatives or MSG,<br>giving you the most authentic experience possible! Part of our<br>mission statement is to bring<br>quality, style, and the wish for<br>good fortune to all of our<br>guests!</center> </i></h4> </div> <div class="main"> <!--<img class="main" src="images/shutterstock_1531950407.jpg" alt="chinese food"--> </div> </div> </div> </body>
Super, so a couple of things, your HTML is invalid, which can render unexpected results. You appear to be missing two </div> (closing div tags) before the </body> tag.
Similarly, using background-size: cover; instead of a fixed size background, ie background-size: 1000px; will allow the browser to scale the background image for you - so less work - woo! Removing width: 105%; /* width of the main content */ width: 105%; /* width of the main content */ will also help with this.
The end result for your banner image looks like: (Ignore the url I used, I had to use an image I could access for testing).
.header {
/* width of the main content */
background-image: url(http://writingexercises.co.uk/images2/randomimage/woodtextures.jpg);
/* chinese food*/
background-size: cover;
padding: 97px;
/* Some padding */
background-repeat: no-repeat;
height: 0%;
margin-bottom: -2px;
margin-right: 0px;
margin-left: -45px;
margin-top: -47px;
}
NOTE: Stack Overflow may not render this, so have a look at it working on my JSFiddle
solution2
0 2019-11-25 16:43:12
First off in your .header CSS, change the width value to 100%; . You also are going to want to remove the negative margins and change background-size to cover !important .
Let me know if that works,
Thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.