Jump to content

Baxtex

Members
 View Profile  See their activity

  • Posts

    51

  • Joined

  • Last visited

 Content Type 

Posts posted by Baxtex

    Navbar positioning

    in CSS

    Posted · Edited by Baxtex

    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.

    Fixed div moving anyways

    in CSS

    Posted · Edited by Baxtex

    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%;}

    Linking serveral css via buttons?

    in HTML/XHTML

    Posted

    I Think Its Possible..

    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.

    correct positioning

    in CSS

    Posted

    Oh yes, set the background color for #page to the same value as #menu. Also remove the fixed height from the #header. Then increase the padding on h1 to 18px. Also you can reduce the border radius on #header to about 18px to close up that strange little gap.

     

    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?

    correct positioning

    in CSS

    Posted

    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.

    correct positioning

    in CSS

    Posted

    The first rule is to avoid using relative or absolute positioning unless there is no other way to achieve the desired result.

     

    Do you want an 80% width centered page?

     

     

    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%.

    correct positioning

    in CSS

    Posted · Edited by Baxtex

    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...