CSS unaligned without scroll bar

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 2126 Views - Last Post: 04 February 2009 - 09:34 PM

#1 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

CSS unaligned without scroll bar

Posted 03 February 2009 - 04:53 PM

The title is kind of hard to understand. Basically my website is perfectly in line when you have a scroll bar on the side of the screen, but when you don't things come out of line and you can notice breaks in the background.

I'm not really sure whats causing this, any help would be appreciated.

Here is a link to the test site: Link

This post has been edited by neoseeker191: 03 February 2009 - 05:16 PM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS unaligned without scroll bar

#2 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 03 February 2009 - 05:17 PM

Uh oh - design 101 - loose the tables and spacers. You could easily throw that sky background as background: url(sky.gif) top left no-repeat;. Then place 4 links as follows:

	<ul id="nav">
	   <li>Link1</li>
	   <li>Link2</li>
	   <li>Link3</li>
	   <li>Link4</li>
	</ul>


css:
#nav ul {
  list-style-type: none;
  margin: 250px 0 0 0;  /*This will push the nav down to the bottom of the header*/
  padding: 0;}

#nav ul li {
   width: 50px;
   text-align: center;
   margin: 0 25px;
   display: inline;}




Let me know if you have any questions.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 03 February 2009 - 05:23 PM

The sky picture and navigation is an all in one deal I created in Fireworks, and exported to HTML. Then I managed to fit it in CSS, haha. But I have tried making that navbar pure CSS before I can't seem to do it.
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 03 February 2009 - 09:19 PM

Ok - that's fine - then open Fireworks and export a jpg without the nav and the logo (leave the logo in if you want).

If you can't do that - create a new one as what you are learning is fundamental - don't cut corners.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 03 February 2009 - 10:07 PM

Right I can export just the back drop without the navigation buttons. The issue I have is putting the buttons back on the backdrop like they were. So then I decided to go back to the way I have it now. So there is no way I can fix what I have now?
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 09:27 AM

OK. You are missing what I am saying I guess. Let me try another way. We'll cover just the background here.

HTML - Put this after the <body> tag
<div id="backgroundON">
	<ul>This is where your nav will go [actually put that text in there]</ul>
</div>


CSS - you can either put this in the actual page in between <style></style> tags or put in a file by itself with a .css extension and put this in your header <link type="text/css" href="backgroundON.css" rel="stylesheet">
#backgroundON {
	background: url(images/skyPIC.jpg) top left no-repeat;
	width: 700px; /* &&& Put in the width of your graphic here &&& */
	height: 250px /* &&& Diddo the above comment &&& */}



For right now JUST do that - and we'll tackle the rest later. You should see your background in that div with text on top of it.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#7 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 12:10 PM

Alright I did that, at least I did what I think you wanted. I reuploaded it to that link in my first post.
Was This Post Helpful? 0
  • +
  • -

#8 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 01:16 PM

Ok - good job - looks great. Create a list like in the first post of mine.

And ad the following styles to it.
#nav ul {
  list-style-type: none;
  margin: 250px 0 0 0;  /*This will push the nav down to the bottom of the header*/
  padding: 0;}

#nav ul li {
   width: 50px;
   text-align: center;
   margin: 0 25px;
   display: inline;}



Then post that - and we'll move on from there.
Was This Post Helpful? 0
  • +
  • -

#9 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 01:54 PM

Ok I did that, but I think something may be wrong. It seems like the nav isn't taking the styles. I'll put it up on that link.
Was This Post Helpful? 0
  • +
  • -

#10 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 02:15 PM

Sorry about that - that was my bad. Remove the 'ul' in the css.

The problem is this, when the browser goes to apply the styles it is looking for a unordered list within the unordered list of nav. Since we applied the id right to the ul, I shouldn't have been looking for a ul within that. Sorry.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#11 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 03:39 PM

It's shoving the whole header down 250px. When I add margin: auto; to nav# this fixes that but it doesn't fix moving the nav down. Changes have been updated to the Link.
Was This Post Helpful? 0
  • +
  • -

#12 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 04:28 PM

padding-top: 200px;

That should do it for you.

Hopefully you have figured out that CSS is a very refresh heavy language, meaning it is very trial and error language.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#13 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 04:35 PM

Yes I've noticed that. I don't really understand how doing this will fix my main issue? Am I trying to place the links where the navbar buttons are on the lower header? Am I trying to duplicate that?
Was This Post Helpful? 0
  • +
  • -

#14 neoseeker191   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 18-May 08

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 06:15 PM

I think I fixed the issue in my original code. All i did was make the wrapper width 744px instead of 745px and it seems to work. lol.

EDIT::: Turns out it was an issue not with the wrapper but with my background not being the size that I said it was.

This post has been edited by neoseeker191: 04 February 2009 - 06:27 PM

Was This Post Helpful? 0
  • +
  • -

#15 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS unaligned without scroll bar

Posted 04 February 2009 - 07:08 PM

good - glad to hear. but you should continue your work in learning CSS
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2