CSS positioning

  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8677
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post November 16th, 2009, 5:54 pm

I was certain i had already posted this but as it turns out i have not yet done so.

The problem i have here is the boxed areas with the text "Welcome" and "Latest News" should be positioned next to each other and not the way they currently do.

I don't have alot of time to dig up code right now, however if you happen to see the code and would be able to inform me on where i am going wrong then i would very much appreciate the reply.

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 16th, 2009, 5:54 pm

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 16th, 2009, 6:16 pm

#right_column and #footer don't appear to have a float directive. I don't see any other positioning directives applied, either.

So, they're acting like DIVs. :)
- dM
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8677
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post November 18th, 2009, 7:54 am

I'm not overly sure what you mean.

You may have noticed that this is based off of a tutorial you posted here many moons ago :lol:. I'm really not as clued up on this as i once was.

Any idea on how i would go about indenting the "Environmental" text and "Architecture" text from the rest of the navigation?
  • immortality
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Nov 19, 2009
  • Posts: 8
  • Status: Offline

Post November 19th, 2009, 2:56 am

Actually you should specify your question if you want detailed explanation
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 19th, 2009, 4:39 am

SB wrote:
I'm not overly sure what you mean.

You may have noticed that this is based off of a tutorial you posted here many moons ago :lol:. I'm really not as clued up on this as i once was.

Any idea on how i would go about indenting the "Environmental" text and "Architecture" text from the rest of the navigation?


In your CSS, in the selectors #right_column and #footer, add "float:left;" and remove "position:absolute;". This will cause the DIVs to behave differently - more like inline elements, but not exactly.

Currently you have this...
Code: [ Select ]
#right_column{background:#ddd;width:600px;height:100px;}
#footer{background:#ccc;width:460px;height:100px;position: absolute;}
  1. #right_column{background:#ddd;width:600px;height:100px;}
  2. #footer{background:#ccc;width:460px;height:100px;position: absolute;}


Try this...
Code: [ Select ]
#right_column{background:#ddd;width:600px;height:100px;float:left;}
#footer{background:#ccc;width:460px;height:100px;float:left;}
  1. #right_column{background:#ddd;width:600px;height:100px;float:left;}
  2. #footer{background:#ccc;width:460px;height:100px;float:left;}


After that, you should the difference you're looking for.

If you're not familiar with this method, you might run into more problems, so please don't hesitate to ask. I'm not going anywhere. ;)
- dM
  • bilhasry4you
  • Novice
  • Novice
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 33
  • Status: Offline

Post November 25th, 2009, 7:55 pm

Code: [ Select ]
<div id="right_column">
<h3>Welcome</h3>
</div>

<div id="footer">
<p>Latest News</p>
</div>
  1. <div id="right_column">
  2. <h3>Welcome</h3>
  3. </div>
  4. <div id="footer">
  5. <p>Latest News</p>
  6. </div>

i think you can combine with add extra div like this
Code: [ Select ]
<div>
<div id="right_column">
<h3>Welcome</h3>
</div>

<div id="footer">
<p>Latest News</p>
</div>
</div>
  1. <div>
  2. <div id="right_column">
  3. <h3>Welcome</h3>
  4. </div>
  5. <div id="footer">
  6. <p>Latest News</p>
  7. </div>
  8. </div>


set your new div width, and then try to add in the id "right_column" and "footer" key : float:left;
try for this and then confirm if you have any trouble with that
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8677
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post January 26th, 2010, 7:08 am

Sorry for the very very late reply to this thread.

I actually read your replies at the time and did do the adjustments you suggested but for some reason at the time they didn't work and my mind sort of drifted away from the web design (see my recent topic in GD forum for a great idea of why).

I'm glued to my seat and working my ass off to get back into web design now and having re-read the replies and focusing clearly on what you have just said i now seem to be making progress.

I cannot thank you enough digitalMedia and everyone else who replied.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 146 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.