CSS positioning

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

#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. :)
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

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
  • immortality
  • Posts: 8

Post 3+ Months Ago

Actually you should specify your question if you want detailed explanation
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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. ;)
  • bilhasry4you
  • Novice
  • Novice
  • bilhasry4you
  • Posts: 33

Post 3+ Months Ago

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
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

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

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.