Html page getting weird with doctype -
I wrote an html page, wrote some CSS in a separate file and it worked fine. Then I realized that I should give a Dictip announcement for my HTML. I did this and my page completely messed up! I tried all kinds of announcements, but everyone ended it!
This is my html (currently only working with Chrome, and without any work):
& lt; Html & gt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "style.css" & gt; & Lt; Title & gt; Luka Road - Home & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body background = "images \ background.jpg" & gt; & Lt; Div id = "header" & gt; & Lt; Div id = "header-back" & gt; & Lt; / Div & gt; & Lt; Div id = "top-spacing" & gt; & Lt; / Div & gt; & Lt; Div id = "content" & gt; & Lt; A href = "index.html" headline = "Luka Rood - Home" & gt; & Lt; Img id = "image" src = "picture \" logo.png "alt =" Lukka Rood "& gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; And this is my CSS:
body {background-repeat: no-repeat; Background-condition: center center; Background-shaped: 100% 100%; Margin: 0 px 0 px 0 px 0 px; } #header {status: relative; Height: 15%; } #HeaderBack {Status: Absolute; Width: 100%; Height: 100%; Background: # 000000; Opacity: 0.3; Z-index: 1; } #top-space {height: 20%; Width: 100%; } # Content {status: relative; Width: 80%; Height: 60%; Margin-top: 0 pixels; Margin-down: 0 pixels; Margin-left: auto; Margin-right: auto; Z-index: 2; } #image {height: 100%;
Post-text "itemprop =" text ">
You get the problem of classic percentage heights Coming to fix this, you have to add the height: 100% to the body style and add a style to the html element in which height is: 100% also: & lt; style & gt; body {/*...*/ height: 100%;} Html {height: 100%;} & lt; / style & gt; Hope this works!
Comments
Post a Comment