html - My div goes out from the website width? -
im new coder, dont know why every time make div or class, automatic makes website more width. have set position relative...
i hope guys understand
html,body { height: 100%; width: 100%; margin: 0px; } h3#hvemerjeg{ position: relative; left: 200px; font-weight: 100; padding: 0; margin: auto 0; } h3#hvorformulti { } h1{ text-align: center; font-size: 30px; color: black; display: block; top: -32px; font-family: fantasy; } p#infotekst { text-align: center; width: 20%; font-size: 15px; position: relative; padding: 1%; left: 10%; border-style:hidden; border-width: 5px; border-color: #ff5050; } #multitekst { text-align: center; width: 20%; max-width: 20%; font-size: 15px; position: relative; padding: 1%; left: 30%; top: -340px; border-style:hidden; border-width: 5px; border-color: #ff5050; } { text-decoration: none; } #logohead { position:absolute; top: 10px; left: 10px; margin: 0px; padding: 0px; width: 12%; } .sect { display: block; height: 100%; width: 100%; background-size:cover; background-repeat: no-repeat; } .subsection { height: 450px; background-color: white; background-repeat: no-repeat; } .sectone { background-image: url(image/forside.png); } .secttwo { background-color: aqua; } .sectthree { } footer { background-color: black; color: white; overflow:auto; padding-bottom: 1%; height:10%; } #footerlogo { padding: 1%; padding-left: 3%; display:block; float: left; } .footertekst { font-family: 'trirong', serif; padding-left: 30%; float:right; font-size: 15px; position: absolute; } .socialemedier { position:relative; padding-left: 75%; display: block; } .ikoner { padding-left: 5%; }<!doctype html> <html> <title> multimediadesigner hamzeh khan </title> <meta name="description" content="jeg hamzeh khan, studere multimediadesigner på århus erhvervsakademi på 1 semester, gennem uddannelse vil jeg få et større forståelse indenfor det digitale verden, og konsturere dem videre til virkeligheden"> <meta name="author" content=" made hamzeh khan"> <meta name="keywords" content=" design, multimediadesigner, konceptudvikler, webdesign"> <head> <meta charset="utf-8"> <meta name="description" content="jeg hamzeh khan, studere multimediadesigner på århus erhvervsakademi på 1 semester, gennem uddannelse vil jeg få et større forståelse indenfor det digitale verden, og konsturere dem videre til virkeligheden"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <header> </header> <style> h2 { text-align: center; font-size: 40px; } p { text-align: center; } ul { list-style-type: none; margin: 0; padding: 0; overflow:hidden; background-color:#000000; } li { float: right; } li { display: block; color: white; text-align: center; padding: 16px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: grey; } .active { background-color:#ff5050; } </style> <body> <a href="index.html"> <img id="logohead" src="image/logokhan.png" alt="headlogo" style="width:10%;height:30px;border:3%"> </a> <ul> <li><a href="contact.html">contact</a></li> <li><a href="about.html">about</a></li> <li><a href="mywork.html">mywork</a></li> <li><a class="active" href="index.html">home</a></li> </ul> <div class="sect sectone"> <article> </article> </div> <div class="subsection"> <br> <h1> test 1 1 </h1> <h3 id="hvemerjeg"> hvem er jeg ? </h3> <p id="infotekst"> jeg hedder hamzeh seyed og studere multimediadesign på 1 semester på erhvervsakademi Århus. jeg er 22 år gammel, og bor kolding sammen med en roomie og pendler til skolen hverdag kl. 05.30 om morgen. jeg har store forventninger til mig selv ifølge uddannelsen og vil derfor gennem de næste 3 næste semester vil jeg få et langt større forståelse indenfor den digitale verden end jeg har nu. min fritid er jeg det meste sammen med mine nærmeste omgivelser, og bruger det meste af tiden på @ optage video og tager masser billeder, primært af naturen. </p> <h3 id="hvorformulti"> hvorfor multimedia design </h3> <p id="multitekst"> af baggrund af de uddannelser jeg var været igennem, så føler jeg mig meget til rette den uddannelse jeg læser nu, da jeg er den kreative/innovative person der har forståelse den teknologis verden, og mener @ der er meget jeg kan byde ind på. når det gælder om design, er jeg den person der godt kan lide @ tænke ud af boksen, og improvisere noget der ikke findes. jeg bruger meget af min tid bag computer, hvor jeg kommer ind på nye hjemmeside hver eneste dag, og lære indtil hvordan deres struktur egentlig er, og hvordan det kan videreudvikles til noget bedre. </p> </div> </p> <div class="sect secttwo"> </div> <footer> <img id="footerlogo" src="image/khandesign.png" alt="headlogo" style="width:5%;height:10%;"> <div> <br> <h4 class="footertekst"> kontaktes på </h4> </div> <div class="socialemedier"> <a href="https://www.facebook.com/hamzeh.iipp"><img class="ikoner" src="image/facebookicon.png" alt="facebookicon" style="width: 10%;"></a> <a href="https://www.instagram.com/khaain/"><img class="ikoner" src="image/instagramicon.png" alt="instagramicon "style="width: 10%;"></a> <a class="tooltip" href="mailto:hslipp@hotmail.com"><img class="ikoner" src="image/mailicon.png" alt="mailicon" style="width: 10%;"><span class="tooltiptext"></span></a> <br> <br> <br> <br> </body> </html>as can see in picture, div goes of range of website, / orange color, , have given site me 100 % width, every time make div, goes of range. ]1]1
im new coder, dont know why every time make div or class, automatic makes website more width. have set position relative
what happens, created naturally positioned block element (#hvemerjeg).
when move element around using position:relative, element (#hvemerjeg) goes out of page , creates horizontal scrollbar.
orange area shows block elements have default parent's width, when limit width, width shown margin (orange). (this shown, not related problem really.)
one solution set "width: calc( 100% - 200px );" element.
other solution set overflow-x: hidden; parent element of element.
in general, using relative positioning make page layout, bad idea :)
Comments
Post a Comment