FlorisW Posted February 10, 2013 Share Posted February 10, 2013 Hello, I'm new to CSS and HTML and I run up to a problem. When I try to position a Hyperlink using a class the layout bugs out and and the hyperlink doesn't move to the asigned position. Here is the code and the layout. The layout above is how it is supposed to look and the layout underneath that is how it displays after I use a class to position the hyperlink. Any help is much appreciated! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2013 Share Posted February 10, 2013 Difficult to see, would help to have the code itself rather than image of code, or link maybe, please.I can guess, that the position: absolute, causes this element to be taken out of the flow of other elements, which will mean the other elements do not detect it and will occupy the vacant space it left behind. Also it will position itself to a area defined by a parent element using position relative, if it can't find such a element, it will position itself to the area defined by browser window. Link to comment Share on other sites More sharing options...
FlorisW Posted February 10, 2013 Author Share Posted February 10, 2013 (edited) Ok here are the codes: HTML code: <html><head><title>PumpkinCraft</title><link href="style.css" rel="stylesheet" type="text/css"></head><body> <div id="houder"><div id="hoofd"><div class="horlinks"><a href="mcserver_info.html>Minecraft server</a></div> <div id="links">Links</div><div id="rechts">Rechts</div><div id="lichaam">Lichaam</div><div id="voet">Voet</div> </div> </body></html> CSS code: #houder { width: 900px; } #hoofd { width: 900px;height: 100px;position: relative;background-image: url(resources/HoofdPuC.jpg);border-bottom: 2px solid #000000; } #links { float: left;width: 140px;height: 400px;background-color: #3D9E3D;border-right: 1px dashed #694717;position: relative; } #rechts { float: right;width: 140px;height: 400px;background-color: #3D9E3D;border-left: 1px dashed #694717;position: relative; } #lichaam { width: 500px;position: relative; } #voet { clear: both;background-color: #35710C; } #hoofd a { color: #FF6600;text-decoration: underline;font-weight: bold; } #hoofd a:hover { color: #D10000;text-decoration: none;font-weight: bold; .horlinks { position: absolute;top: 77px;left: 180px; } Edited February 10, 2013 by FlorisW Link to comment Share on other sites More sharing options...
FlorisW Posted February 10, 2013 Author Share Posted February 10, 2013 Can you make a fix for me then? As I said i'm new and I don't know how to fix it. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2013 Share Posted February 10, 2013 you have to many opening div tags '<div..' compared with closing div tags '</div>', that is first problem from start, next you should define a doctype http://w3schools.com/tags/tag_doctype.asp it helps make crappy IE look closer to how other better browsers look. Link to comment Share on other sites More sharing options...
FlorisW Posted February 10, 2013 Author Share Posted February 10, 2013 Alright I now have 7<div>'s and 7 </div>'s. And I placed <!DOCTYPE html> in the code. I use google chrome and the layout is still the same. Are there any more problems in my codes and how do I fix that absolute positioning thing what causes the other element to fill in the space? Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2013 Share Posted February 10, 2013 OK! i'll just guess where you wanted the closing div tag and go from there, hmmmmm i'll set it to after <div id="hoofd"> now its <div id="hoofd"></div> Right! css wrong, you missed closing bracket. #hoofd a:hover {color: #D10000;text-decoration: none;font-weight: bold;}.horlinks {position: absolute;top: 77px;left: 180px;} and by what we got, now! you don't require position: absolute just place 'horlinks' element inside 'hoofd' and it matches the correct image. Link to comment Share on other sites More sharing options...
FlorisW Posted February 10, 2013 Author Share Posted February 10, 2013 (edited) Thanks I fixed the closing bracket! I only have 1 problem left. The left side (#links) doesn't show up and #lichaam is I guess filling in the space of #links. This is my html code now: <!DOCTYPE html><html><head><title>PumpkinCraft</title><link href="style.css" rel="stylesheet" type="text/css"></head><body> <div id="houder"><div id="hoofd"></div><div class="horlinks"><a href="mcserver_info.html>Minecraft server</a></div> <div id="links">Links</div><div id="rechts">Rechts</div><div id="lichaam">Lichaam</div><div id="voet">Voet</div> </div> </body></html> I didn't put <div class="horlinks"> in "hoofd" because I get the same problem after that. I might have misunderstood you so could you please put in the code like you would put it in. That would help a lot. Thanks! Edited February 10, 2013 by FlorisW Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2013 Share Posted February 10, 2013 (edited) validate your site at http://validator.w3.org/ it should highlight the errors, you have not closed a quote in <a href="mcserver_info.html">Minecraft server</a> Edited February 10, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
FlorisW Posted February 10, 2013 Author Share Posted February 10, 2013 Oh wow it worked!! I'm so happy right now . Thank you so much! Link to comment Share on other sites More sharing options...
sProm Posted February 11, 2013 Share Posted February 11, 2013 + read about doctype's at w3schools Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2013 Share Posted February 11, 2013 you have to many opening div tags '<div..' compared with closing div tags '</div>', that is first problem from start, next you should define a doctype http://w3schools.com...tag_doctype.asp it helps make crappy IE look closer to how other better browsers look. at post #5 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now