Jump to content

Baxtex

Members
  • Content Count

    51
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Baxtex

  • Rank
    Newbie

Profile Information

  • Location
    Sweden
  1. Baxtex

    Navbar positioning

    http://codepen.io/anon/pen/cosBK I started out making all my divs resizable adn scalable and I'm now aiming for a more static site. On the website above you nitced that the margin of the content disappears when the window get's smaller, but the navbar/menu doesn't follow it and goes haywire. I want it to stick to the top of the content and follow it when the window get's smaller. By removing the position attribute the problem disappears, but then I can't get it were I want either.
  2. Solved it, I set the height with pixels and the width with % instead.
  3. Okay so I got this horizontal menu bar which I had positioned with absolute:relative to put it were I want it. It stays in place when resizing the browser windows left and right but not up and down as my menu seem to float up or down. I tried switching to position:fixed but it doesn't work either. When I got divs that are either relative or fixed I can't seem to move them either up or down only at the sides. I can move them up and down with absolute, but that makes them move when I resize my window. Here is the code; <div id="mainmenu"> <ul> <li><a href="#">Om oss</a></li> <li><a href="#">Öppettider</a></li> <li><a href="#">Hitta hit</a></li> <li><a href="#">Kontakta oss</a></li> </ul> </div> #mainmenu{background-color:black;width:600px;font-size:1.2em;font-weight:bold;text-align:left;border-radius:2px;margin:40px auto;position:absolute;top:17%;left:19%;}
  4. I'm not sure this is what I want though... This is my task: Create 2 html pages and 4 css files. I'm going to have 4 buttons that will point to: Html1CSS1 Html1CSS2 and then Html2CSS1 Html2CSS2 But I'm not sure how to do it.
  5. So I got 1 html file but 2 css files. I got two buttons which I would like to be able to switch between these to css files. So button 1 would make the page use css1 and button 2 would make the same page use css2 instead. Is this possible?
  6. Baxtex

    correct positioning

    Wasn't that I mean I mean the left menu bar, look: http://sv.tinypic.com/view.php?pic=2z6b51f&s=8 You see how it get's grey down in the left corner as the bar don't stretch?
  7. Baxtex

    correct positioning

    This works like a charm, thank you sir! The only problem is the menu background/column which doesn't get higher, as the rest of the page, and I have used min-height.
  8. Baxtex

    correct positioning

    Oh, but how do i position things then? Yes well this site is just for testing purposes, I just want the page centered, the width is not that important, but sure we can say 80%.
  9. Baxtex

    correct positioning

    Hello, to start off I'm kinda new to this so this might be really simple question: How do I position my blocks correctly? I can get it to look like I want, but my website works very bad with scaling (resizing the window) elements go out of frame and borders and it doesn't look good at all. Even though I have used relative position and only used % it's not looking good. Here is my code: HTML <!DOCTYPE html><html> <head> <title>Menus</title> <link rel="stylesheet" type="text/css" href="css1.css"> <link rel="stylesheet" type="text/css" href="css1meny.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="page"> <div id="header"> <h1>Äspåröds äventyrsland</h1> </div> <div id="menu"> <ul class="mainmenu"> <li><a href="x">Webb 1</a></li> <li><a href="x">Webb 2</a></li> <li><a href="x">Mobil 1</a></li> <li><a href="x">Mobil 2</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales nisi at <br> sem pretium, vitae posuere ante pharetra. Cras quis elit facilisis, ultricies eros a, <br> condimentum neque. Quisque commodo ullamcorper vestibulum. Ut orci tortor, dignissim non <br> fringilla a, eleifend quis risus. Curabitur<br> dictum tempor nisi a accumsan. Aenean rhoncus, metus non convallis varius, urna velit<br> imperdiet tortor, sed ornare nisl eros vel dolor. Mauris sed tortor scelerisque, porta purus<br> pretium, tempus velit. Maecenas et felis sed magna dignissim laoreet nec nec eros. Cras <br> sollicitudin molestie leo vel cursus. Donec quis orci ut metus congue gravida. Quisque <br> id tellus fringilla, malesuada dui eu, pretium tortor.<br> Sed ac volutpat massa, faucibus euismod purus. Maecenas suscipit lobortis congue. Pellentesque <br> enim massa, vestibulum et nisi sit amet, tincidunt suscipit metus. Vestibulum ante ipsum primis<br> <br><br><br> in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ultrices ipsum suscipit lacus <br> aliquet, porta tristique enim blandit. In pulvinar sem at libero tempor euismod adipiscing nec nulla.<br> Fusce dapibus at libero ac auctor. Nam mattis volutpat fringilla. Curabitur ante lectus,<br> faucibus sit amet pellentesque eu, porttitor at sapien.<br> Nam eu suscipit massa. Ut in nisi nec ipsum eleifend scelerisque.<br> Ut id consequat augue, egestas blandit neque. Nulla rutrum magna <br> ac convallis lacinia. Nulla facilisi. Nunc molestie auctor auctor.<br> ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br> In hac habitasse platea dictumst. Praesent elementum blandit purus vitae <br> cursus. Suspendisse vitae porttitor ante. Donec in lorem sapien. Fusce commodo <br> sagittis adipiscing. Duis metus orci, tincidunt nec lobortis non, egestas vitae sem.<br> Donec ipsum ante, consectetur eu leo eget, pharetra faucibus est. Aliquam ornare at sem <br> ac tincidunt. Nullam vel odio purus. Proin non ipsum enim. Donec adipiscing dolor at molestie<br> pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div id="footer"> </div> </div> </body></html> CSS body{background-color:grey;}#page{ /*Vet inte varför mina rundade hörn cpar*//*margin:5% 0% 2% 10%;*/width:80%;height:55em; /*Can't use this with % dunno why, page goes all crazy*/text-align:left;border-radius:20px;border-style:solid;border-width:2px;position:relative;top:30%;left:10%;}/*position: absolute; top: 10px; right: 10px;*/#header{ width:100%;height:10%;background-color:black;position:relative;}#menu{width:15%;height:80%;background-color:#CACAFF;float:left;position:relative;}#footer{width:100%;height:10%;background-color:#B4B4FF;float:left;position:relative;bottom:-0%;}#content{font-family:Helvetica;float:left;background-color:white;width:85%;height:80%;position:relative;}h1{position:absolute;left:40%;font-family:Verdana;color:#E6E600;} (not including my other css file for the menu) Anyone got any hints on how to solve my problem? Have I understood it all wrong? I have tryed implementing float:left but I don't really understand how to use them. I have also tried overflow:auto; which puts scollbars inside wich do help me, but isn't how I would like it to be. I want the rest of the page scale accordingly so when you make the window smaller the whole page just becomes smaller.
  10. So i have begun to learn Java a little bit, but i can't get my programs to compile. I have set Both my Path and Path class to C:\Program Files (x86)\Java\jdk1.6.0_22\binBut I just get the message: "'javac' is not recognized as an internal or external command, operable program or batch file" when i type this: D:/stuff>javac HelloWorld.javaI also downloaded a ide, Eclipse after i had chnaged the path, but when i press "run" or "debug" nothing happens. What should i do? I'm so pissed of right know, sure i'd know Java maybe would be an challenge, but i can't even get the code to compile.BTW i don't have any javac.exe file on my computer either, even though i have installed JDK.
  11. Thanks, it worked. :)I also found this code when i searched on Google: #navigation a{ padding:40px 51px 50px 50px; background-color:#040F4C; color:white; border:2px solid black; text-decoration:none; display:block; } #navigation a:hover,a:focus{ background-color:#080214; Color:white; } I changed the IDs and it actually worked, but i thoguth you had to do like "link, visited, hover and active".
  12. I got a link that i want to style; <div id="ankare"><a href="#">link1</a></div>But as i understand, i should do like this: a.ankare:link { color:black; background-color:white; } a.ankare:visited{ color:purple; } a.ankare:hover{ color:grey; font-size:1.5em; } a.ankare:active{ color:green; } But nothing happens at all. Only that my link for some reason becomes purple.
  13. It worked great! Thanks!BTW the code format to the CSS document, that dosen't matter wich it is, right?
  14. When i'm making a new HTML document i Notepad++, i pick the format "Code in UTF-8 without bom" and i use the meta:<meta http-equiv="content-Type" content="text/html;charset=UTF-8">And then i save it. It works great, i can use all the letters i want, for example ÅÄÖ. But when i turn of my computer, then start it again and starts codeing again, it looks fine, everything seems to be working. But if i add ÅÄÖ they just become question marks. Even though it worked last time i worked with it.Do anyone have any idea how to make ÅÄÖ work, even after i have restarted my computer? And yes i can assure you i have saved the document.
×
×
  • Create New...