here is a output of sample website problem it has is the nev should like this re
ID: 3590509 • Letter: H
Question
here is a output of sample website
problem it has is the nev should like this regardless to of browser size and moniter resolution, in my pc it comes like the above pc
it has some issues that need fix
issues are how to make the css auto adjust based on the browser size
and the main image that is has how to auto resize image
please here is the code
please take a look
change the image and css to adjust to any pc and broswer size, so it does not somes out of shape to big ot too small it should cover the whole page both image and css regardless to browser size
PIZZA PLANET
PIZZA PLANET
HOME
MENU
CONTACT
PIZZA PLANET
HOME
MENU
CONTACT
PIZZA PLANET
HOME
MENU
CONTACT
Mail Us at :
pizzaplanet@example.com
body{
margin:0px;
background-color: #333333;
color:white;
}
#body{
width:100%;
background-color: #333333;
}
h1{
margin-top:0px;
padding-top:20px;
color:white;
text-align: center;
}
h2{
color:#c12705;
}
.menu {
margin-left: 550px;
margin-top: 50px;
}
table, td, th {
border: 1px solid #c12705;
text-align: center;
font-size:25px;
}
td:hover {background-color: #c12705}
form{
margin-left:10px;
}
#menu ul {
list-style-type: none;
margin:0px;
padding: 0;
overflow: hidden;
background-color: #232323;
}
#menu li {
float: left;
margin-left: 180px;
margin-right: 180px;
}
#menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menu li a:hover {
background-color: #c12705;
}
#menu .active {
background-color: #c12705;
}
#header {
background-color:#333333;
}
Explanation / Answer
For adjusting the image width & height according to the browser window, please add the following snippet in the CSS:
To make sure that the menu items are always aligned, change the following CSS snippet:
#menu li a {
display: table-cell;
width: 33%;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.