Jump to content

Baxtex

Members
  • Posts

    51
  • Joined

  • Last visited

Everything posted by Baxtex

  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.
×
×
  • Create New...