Reply to thread

Message

<blockquote data-quote="Vezel" data-source="post: 182902" data-attributes="member: 24702">Okey so this is what happens:This is how it looks like on my screen that i code on: <a href="http://prntscr.com/un2bj" target="_blank">http://prntscr.com/un2bj</a> (if you think it's ugly it's becouse i started to code 2 days ago and this is my first website <img src="/styles/default/xenforo/smilies/emojione/tongue.png"&nbsp; class="smilie" loading="lazy" alt=":p" title="Stick Out Tongue&nbsp; &nbsp; :p" data-shortname=":p" />)This is how it looks on a smaller screen: <a href="http://prntscr.com/un2ge" target="_blank">http://prntscr.com/un2ge</a>&nbsp;Code: [HTML]&lt;!doctype html&gt;&nbsp;&lt;html&gt;&lt;head&gt;&lt;title&gt;Vezel - Home&lt;/title&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;configs/ccsconfig.css&quot;/&gt;&nbsp; &nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;boxed&quot;&gt;&lt;a href=&quot;index.html&quot; id=&quot;active&quot;&gt;Home&lt;/a&gt;&lt;a href=&quot;about.html&quot; id=&quot;About&quot;&gt;About&lt;/a&gt;&lt;a href=&quot;info.html&quot; id=&quot;Info&quot;&gt;Info&lt;/a&gt;&lt;a href=&quot;contact.html&quot; id=&quot;Contact&quot;&gt;Contact Me&lt;/a&gt;&lt;/div&gt;&nbsp;&lt;div class=&quot;nav&quot;&gt;&lt;a href=&quot;news.html&quot; id=&quot;active&quot;&gt;News&lt;/a&gt;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&lt;div class=&quot;infobox&quot;&gt;&lt;div class=&quot;text&quot;&gt;&lt;header&gt;&lt;hgroup&gt;&lt;h1&gt;Vezel's Website&lt;/h1&gt;&lt;/hgroup&gt;&lt;header&gt;&nbsp;&nbsp;&lt;p&gt;This site is made by Vezel and this is my first Website that i've ever made,since it's my first it isnt so good and im just doing it to test out html.&lt;/p&gt;&nbsp;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;menu&quot;&gt;&lt;div id=&quot;login&quot;&gt;&lt;p&gt;&lt;strong&gt;Login here:&lt;strong&gt;&lt;/p&gt;&lt;form&gt;&lt;b&gt;Username:&lt;/b&gt; &lt;input type=&quot;input&quot; name=&quot;Button&quot;/&gt;&nbsp; &nbsp; &lt;br/&gt;&lt;b&gt;Password:&lt;/b&gt; &lt;input type=&quot;password&quot; name=&quot;pass&quot;/ id=&quot;pass&quot;/&gt;&nbsp; &nbsp; &lt;br/&gt;&lt;div id=&quot;submit&quot;&gt;&nbsp; &nbsp; &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;/form&gt;&nbsp;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&nbsp;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]&nbsp;CSS:[CODE]&nbsp; &nbsp; &nbsp; &nbsp; b {color:white}&nbsp; &nbsp; &nbsp; &nbsp; #pass {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 77px;}&nbsp; &nbsp; &nbsp; &nbsp; form {border 1px solid red}&nbsp; &nbsp; &nbsp; &nbsp; #menu {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 500px;}&nbsp; &nbsp; &nbsp; &nbsp; #submit {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 95px;}&nbsp; &nbsp; &nbsp; &nbsp; #login {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:540303;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: -100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 250px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 120px;}&nbsp; &nbsp; &nbsp; &nbsp; body {background-image:url(bilder/bg.jpg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size:100%;}&nbsp; &nbsp; &nbsp; &nbsp; .boxed {border: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:#A21111;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 250px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 980px;}&nbsp; &nbsp; &nbsp; &nbsp; a:link {color:white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size:25px;}&nbsp; &nbsp; &nbsp; &nbsp; a:hover {color:black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration:underline;}&nbsp; &nbsp; &nbsp; &nbsp; a:visited {color:white}&nbsp; &nbsp; &nbsp; &nbsp; #Home{position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:15px;}&nbsp; &nbsp; &nbsp; &nbsp; a#active { color: black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:15px;}&nbsp; &nbsp; &nbsp; &nbsp; a#About {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:15px;}&nbsp; &nbsp; &nbsp; &nbsp; a#Info {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:90px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:15px;}&nbsp; &nbsp; &nbsp; &nbsp; a#Contact {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:130px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:15px;}&nbsp; &nbsp; &nbsp; &nbsp; .nav {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:400px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:1300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:#A21111;}&nbsp; &nbsp; &nbsp; &nbsp; .infobox {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:444px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:1200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:750px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:#A21111;}&nbsp; &nbsp; &nbsp; &nbsp; .text {position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid #870505;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:400px;}&nbsp; &nbsp; &nbsp; &nbsp; h1{padding: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font: 20px Palatino Linotype;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #white;}&nbsp; &nbsp; &nbsp; &nbsp; p {color:white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-indent:25px;}[/CODE]&nbsp;As is said, it's my first website and im just trying to get better on coding so pleaase no hate on the code but you can give me ideas on what i should change/add, and ofc i would be nice if you could answere my question and show me how to do next time i code <img src="/styles/default/xenforo/smilies/emojione/smile.png"&nbsp; class="smilie" loading="lazy" alt=":)" title="Smile&nbsp; &nbsp; :)" data-shortname=":)" /></blockquote>

[QUOTE="Vezel, post: 182902, member: 24702"] Okey so this is what happens: This is how it looks like on my screen that i code on: [url]http://prntscr.com/un2bj[/url] (if you think it's ugly it's becouse i started to code 2 days ago and this is my first website :p) This is how it looks on a smaller screen: [url]http://prntscr.com/un2ge[/url] Code: [HTML]<!doctype html> <html> <head> <title>Vezel - Home</title> <link rel="stylesheet" type="text/css" href="configs/ccsconfig.css"/> <style type="text/css"> </style> </head> <body> <div class="boxed"> <a href="index.html" id="active">Home</a> <a href="about.html" id="About">About</a> <a href="info.html" id="Info">Info</a> <a href="contact.html" id="Contact">Contact Me</a> </div> <div class="nav"> <a href="news.html" id="active">News</a> </div> <div class="infobox"> <div class="text"> <header> <hgroup><h1>Vezel's Website</h1></hgroup> <header> This site is made by Vezel and this is my first Website that i've ever made, since it's my first it isnt so good and im just doing it to test out html. </div> </div> <div id="menu"> <div id="login"> Login here: <form> Username: <input type="input" name="Button"/> Password: <input type="password" name="pass"/ id="pass"/> <div id="submit"> <input type="submit" name="submit" value="Submit"> </form> </div> </div> </div> </div> </body> </html>[/HTML] CSS: [CODE] b {color:white} #pass {position:absolute; left: 77px;} form {border 1px solid red} #menu {position:absolute; top: 500px;} #submit {position:absolute; left: 0px; top: 95px;} #login {position:absolute; background-color:540303; top: -100px; left: 5px; width: 250px; height: 120px;} body {background-image:url(bilder/bg.jpg); background-size:100%;} .boxed {border: 1px solid black; background-color:#A21111; width: 250px; height: 980px;} a:link {color:white; text-decoration:none; font-size:25px;} a:hover {color:black; text-decoration:underline;} a:visited {color:white} #Home{position:absolute; top:10px; left:15px;} a#active { color: black; position:absolute; top:10px; left:15px;} a#About {position:absolute; top:50px; left:15px;} a#Info {position:absolute; top:90px; left:15px;} a#Contact {position:absolute; top:130px; left:15px;} .nav {position:absolute; top:15px; left:400px; width:1300px; height:50px; background-color:#A21111;} .infobox {position:absolute; top:100px; left:444px; width:1200px; height:750px; background-color:#A21111;} .text {position:absolute; top:1px; left:1px; border: 2px solid #870505; height:300px; width:400px;} h1{padding: 2px; font: 20px Palatino Linotype; color: #white;} p {color:white; margin-top:10px; text-indent:25px;}[/CODE] As is said, it's my first website and im just trying to get better on coding so pleaase no hate on the code but you can give me ideas on what i should change/add, and ofc i would be nice if you could answere my question and show me how to do next time i code :) [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members