4 Replies - 1007 Views - Last Post: 30 March 2010 - 01:50 PM

#1 guyfromri   User is offline

  • D.I.C Addict

Reputation: 55
  • View blog
  • Posts: 837
  • Joined: 16-September 09

CSS formatting and positioning

Posted 30 March 2010 - 11:40 AM

I feel like I'm being redundant here because I keep having similar issues so I am going to try and get to the base of it and see if I can get a greater understanding of what I'm doing right and wrong.

My Issue: I'm learning CSS and building a site at the same time(being ambitious). I tried absolute positioning and relative positions and they work but they don't work right. My first issue is I am programming on my home pc which has a 21" screen. My laptop has a 15" screen. When I switch to my laptop, some items don't position correctly.

Secondly, it's mostly universal but if you open my page in Chrome, the nav bar is aligned to the left. If you open in IE, the same nav bar is aligned left with maybe a 20px gap. I've tried everything. Plus to make the nav bar, I had to use float:left;. This is great but when I open the site on the smaller screen, the nave bar becomes two rows. Is there any other way to keep it horizontal without floating left?

My site is here so you can see what I'm talking about and exactly how it's set up online.

These are my basic questions for now, I'm sure I'll have more later.

This post has been edited by guyfromri: 30 March 2010 - 11:41 AM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS formatting and positioning

#2 jrm402   User is offline

  • D.I.C Regular
  • member icon

Reputation: 52
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: CSS formatting and positioning

Posted 30 March 2010 - 11:50 AM

As a rule, when I start my coding my CSS, I use this:

* {
    margin: 0;
    padding: 0;
    /* Any other attributes here that should apply to the page as a whole */
}



The * lets you target everything in the page. So we start by setting everything's margins and paddings to 0.

Could you post the url to your website so we can help you with your positioning and the menu.
Was This Post Helpful? 0
  • +
  • -

#3 Excavator   User is offline

  • D.I.C Head
  • member icon

Reputation: 21
  • View blog
  • Posts: 60
  • Joined: 10-December 06

Re: CSS formatting and positioning

Posted 30 March 2010 - 11:59 AM

Hello guyfromri,
Positioning issues where elements are moving around differently in different resolutions are usually caused by the positioning being relative to the body of the document. You can solve that by making your positioned elements relative to a main containing div.
See how being relative to #container makes #demo stay where you put it -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
#container {
	height: 600px;
	width: 800px;
	margin: 30px auto;
	background: #999;
	position: relative; /*makes ap elements take position relative to #container*/
}
#demo {
	height: 100px;
	width: 100px;
	position: absolute;
	top: 100px;
	left: 300px;
	background: #ff0;
}
</style>
</head>
<body>
    <div id="container">
    	<div id="demo"></div>
    <!--end container--></div>
</body>
</html>


We'd just about need to see your site to address the other issue. I didn't see a link in your post.

This post has been edited by Excavator: 30 March 2010 - 11:59 AM

Was This Post Helpful? 0
  • +
  • -

#4 guyfromri   User is offline

  • D.I.C Addict

Reputation: 55
  • View blog
  • Posts: 837
  • Joined: 16-September 09

Re: CSS formatting and positioning

Posted 30 March 2010 - 01:16 PM

View Postjrm402, on 30 March 2010 - 10:50 AM, said:

Could you post the url to your website so we can help you with your positioning and the menu.


I wasn't paying attention, apparently. I thought I had. Thanks for the help.
My Site
Was This Post Helpful? 0
  • +
  • -

#5 jrm402   User is offline

  • D.I.C Regular
  • member icon

Reputation: 52
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: CSS formatting and positioning

Posted 30 March 2010 - 01:50 PM

First, in your CSS, you're giving #nav1 ul a list-style-type of none and 0 padding. What that statement is doing is targeting all <ul> tags inside of a tag with an id of 'nav1'. You need to target only #nav1; remove the ul from the end of that statement.

Also, to have a valid document, you can only have one id with the value of 'item1'.

By giving your navigational <ul> element a set width, you can eliminate the <li> elements from floating to the next line. What happens is the width is set to auto which is defaulting to the screen width (or whatever if you have additional padding/margins) so as the screen shrinks, so does the width of the menu causing it to jump to the next line. It defaults this way because if you were to add five or six more menu items, would you want to scroll all the way to the right every time you wanted to get to the last item?

Position: relative is intended to use in a container that holds elements that are positioned absolute. The way you are using it right now is useless. Just stick with margins.

I would take the image, put it after the paragraph. There is also a nifty little display property - inline-block. Apply that to the paragraph and it treats it as a block and inline element allowing the image to float up next to it. Then reapply the margins as necessary to space them apart. I would try to stay away from moving stuff around on the page using large negative margins. Try to stick to a 'top-down left-right' approach and style from there. So make the page from top to bottom and left to right.

For reference W3Schools has great tutorials on pretty much any language you can imagine. CSS tutorial.

Hope this helps you further your knowledge.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1