Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Very simple problem!

N

nStyle

macrumors 68000
Original poster
Dec 6, 2009
1,524
1,084
Hi.

I am working on a new layout for my site.

http://www.basedonstyle.com/test/

...will be where my test stuff goes.

I am having trouble getting the nav text to move up a couple pixels? I have a span around the text that "should" fix it... though somehow it does not...

Any help appreciated!
 
Find:

HTML: 
#navcor {
	position: relative
	top: -5px;
}

Change to:

HTML: 
#navcor {
    position: relative;
    top: -15px
}

First, you left off the ; after "relative" then I simply added on 10 more pixels to top so it's -15 (you set font size to 15px for your header div earlier, so it's essentially top justified).

-jim
 
I'd suggest improving the markup, then it will be easier to use CSS on it to get the desired effect.
 
Thanks!... wow I can't believe I left out something so simple.

How could the markup be improved thus far?

Also, do you guys know how I could make it to where only text links will be affected with a specific property?
 
nStyle said:
How could the markup be improved thus far?

Also, do you guys know how I could make it to where only text links will be affected with a specific property?
Click to expand...
Something along these lines. This will help with your second question there as well as it'll be easier to create a CSS selector that only goes after what you want.
HTML: 
<body>
<div id="all">
<div id="header">
  <div id="logo"><a href="#"><img src="logo.jpg" /></a></div>
</div><!-- /header -->
<div id="nav">
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#">photography</a></li>
    <li><a href="#">design</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div><!-- /nav -->
</div><!-- /all -->
</body>
 
If I do that it turns it into a vertical list that I can't do anything about?

I want it horizontal.

Also - How can I make two more divs directly under the header div? I want the 2nd div to be the main content and the 3rd div to be a running fixed footer.

I am confused!! I have been reading a lot and watching videos but it never seems to work.
 
Here's one of many tutorials on making a list into a horizontal navigation bar. This is a very common approach to marking up navigation so it'll be good for you to learn this and understand how CSS can transform your HTML into a lot of different layouts. The CSS Zen Garden was one of the original sites to show off the power of CSS and remains to be source of inspiration.

As far as adding the other div tags, just put them in. You'll likely want to keep them inside the #all div. For fixed footers, you can find some CSS tutorials easily via Google.
 
Ok... I am having more and more problems.

I got my list set up without it being vertical and all that.

The spacing between the words is rather weird though.

Also... I can't get the logo to come and stick next to the links like it was.

My final two problems are the "main" and "footer" content divs. They are just appearing at the top of the page... I can't figure out why they aren't starting on new lines!

I have read an entire book on this stuff, even looked at that website you gave me.

I can't figure out my problems for the life of me.

You can see my progress via the link in the first post.
 
Here is what I kinda want it to look like (filling out all browser space)

http://www.basedonstyle.com/test/sketch.jpg

Of course I can take care of the fancies and the background and all that, I just need to get the basic structure down. I am having trouble with that.
 
Here's the CSS. I commented out parts. The attached image shows what it looks like with this CSS. Look through it and try changing parts to see how it effects your layout. Tinkering is the best way to learn CSS.
Code: 
body {
  margin:0;
  padding:0;
  background:#000;
}
#all {
  height:100%;
  width:100%;
}
#header {
/*
  left:0;
  position:fixed;
*/
  text-align:right;
/*
  top:0;
  width:100%;
*/
  background:#fff;
}
a {
  color:#333333;
/*
  display:block;
*/
  text-decoration:none;
/*
  width:100px;
*/
}
a:hover {
  color:#666666;
}
a:active {
  position:relative;
  top:1px;
}
a img {
  border:0 none;
}
#nav {
  display:inline;
  margin-right:0;
  margin-top:0;
}
#nav ul {
  float:right;
  list-style:none outside none;
  margin:0.3em 0 0;
  padding:0;
/*
  width:45%;
*/
}
#nav li a {
  padding:0 1em;
}
#nav li {
  display:inline;
/*
  float:left;
*/
  padding:0;
}
#main {
  background-color:#000000;
  height:100%;
  width:100%;
}
#footer {
  background-color:#FF0033;
  bottom:0;
  height:24px;
  position:absolute;
  right:0;
  width:100%;
}
#logo {
  display:inline;
/*
  float:right;
*/
  text-align:right;
/*
  width:55%;
*/
}
/*
#navigation li {
  float:left;
}
*/
 

Attachments

  • basedonstyle-1.png
    basedonstyle-1.png
    16.9 KB · Views: 85
Thank you very much.

I fixed it but somehow the black main content is still not there. I would like it to fill in between the header and footer if possible. I thought height and width to 100% would be enough since the all is set to width height 100 100.

Also somehow it lost the top margin of 0. I tried setting this in the all, the header, and even both the nav and the logo. It made no difference, the top margin would never come. This is what confuses me the most about CSS. I learn something, then do it, and it doesn't work... Setting the top margin of the entire header to 0 should shift everything up inside of the header div so that it is aligned with the top of the page I would think.
 
Looks like you deleted too much,
Code: 
#header {
  ...
  background:#fff; /* this line is missing */
}
As far as the height 100% not doing what you think it should, that's a common misconception. It's not 100% of the window, but 100% of the surrounding element. The body tag is the main parent and it's height is determined by the amount of content. The footer sits at the bottom only because it's forced there with the CSS.

If it's still not looking the way my attachment shows, let me know what browser you're using.
 
I am using Safari. It works in Firefox.

Also, I tried putting a BG in the main div. no luck. I might try the body I guess.

isnt there a way to stretch the main div height from the header to the footer?

Also... is there any way to make my text in the footer be vertically aligned? I tried vertical-align: middle. I used relative positioning but I was hoping for a more concrete way.
 
Safari doesn't like this line,
Code: 
@charset "UTF-8";
You don't need it either so just delete it. Your HTML already has a meta tag declaring the character set.
 
angelwatt:

Thanks so much for all the help!

Do you know anything about my background problem? I want it to stretch from header to footer.. but not scroll. Is there a way around that little bit?
 
nStyle said:
Do you know anything about my background problem? I want it to stretch from header to footer.. but not scroll. Is there a way around that little bit?
Click to expand...

The bg.jpg image seems to just be a black image. Your main area has a black background. What are you expecting exactly?
 
The bg is 900 x 1024.

It is a gradient I saved for the BG.

Right now it is there but it scrolls with no content.

In firebug when I move my mouse over div id="main" it selects everything on the page (header, main, footer). Im thinking this is part of my prob. not sure how to fix.

Something else weird happened. I tried adding a div within "main" It shifts my header down and has some weird reactions! it offsets everything weird.
 
The shifting down is because of the "position:fixed" you're using on #main. Avoid using fixed positioning because it isn't supported by all browsers and will give you more headaches. The bg image still looks solid black to me.

You should get some content for the page. Creating the layout with no content really becomes meaningless and you'll likely end up having to redo some of the CSS as the content will have an effect on things too.
 
There is no fixed positioning on the main. There is only fixed on the header and footer so they stay still even when I scroll...

There is no positioning at all on main or description. It looks like the #main would appear as a new block (and the #description div would appear within the #main) but it doesn't..

The bg image is there I promise. Right click and view background image. Its very subtle but it is there.

Whats happening is the #header AND #main are on the same block right now and they are being pushed from the top with a margin (no idea why).

I think I need to get the main on its own block (under the header) to stop all these problems but I am not sure how.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back