CSS question - why is this happening on my site?

  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

Hi

Id like to know why the following problem is happening on my site. Take a look at this page - http://cms-stu-iis.gre.ac.uk/db810/gsradio/test.htm

I want the bit that says 'listen live' to go OVER the 'adverts' section., so that its part of the title bar. Why is it pushing the adverts towards the left and coming down?

The CSS for this can be found here - http://cms-stu-iis.gre.ac.uk/db810/gsradio/css/layout.css

Thanks :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Floated boxes float right, but they do not float up. You placed the div itself after the title_middle div in the code, so it appeared below that. Then you have two divs floated right, which go next to each other unless you use the clear property.

Move your adverts and title_listen divs inside the title_middle div, like so:
Code: [ Select ]
<div id="title_middle">
<div id="title_listen">
  listen live
</div>
<div id="adverts">
  <p>
    Adverts go here
  </p>

</div>

  middle area

</div>
  1. <div id="title_middle">
  2. <div id="title_listen">
  3.   listen live
  4. </div>
  5. <div id="adverts">
  6.   <p>
  7.     Adverts go here
  8.   </p>
  9. </div>
  10.   middle area
  11. </div>


Then alter the #adverts CSS definition by adding this property:
Code: [ Select ]
clear: right;


Then play with margins etc to get things looking right.
  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

Thanks I have altered it but this is not the result that I wanted. Im sorry, I should have been more specific - I want a three column layout, with the adverts being the third column in line with the navigation and the content. The 'listen live' goes above the 'adverts', in line with the logo and the 'Now on air'section.

http://cms-stu-iis.gre.ac.uk/db810/gsradio/test.htm
http://cms-stu-iis.gre.ac.uk/db810/gsra ... layout.css

Thanks.
  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

Also, when i add a picture logo (http://cms-stu-iis.gre.ac.uk/db810/gsradio/test2.htm), it moves my navigation bar. How can i prevent this from happening.

Is it better for me to just use one title bar and arrange the data in there as I want it? I know I can use the left and right float property but what about the middle content? I want the final result on the title bar to appear as something like this: Image

Thanks.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Put clear:left in the CSS for the nav bar and it will be below the logo. And, instead of doing the changes in the HTML that I mentioned earlier, put the two divs _above_ the title_middle (rather than inside) and just have clear:right in the CSS for the advert box.
  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

Perfect :D

Do you know why my links are acting funny and spacing out?

I want them to be held together.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

You have
Code: [ Select ]
#navigation li {
margin: 0 0 .2em 0;
}
  1. #navigation li {
  2. margin: 0 0 .2em 0;
  3. }

Which sets the bottom margin of each list item to .2em. Change it to margin: 0;.

Then Geckos will act funny and have thin lines between the links, but you can improve that by adding background: #036; to #navigation ul {}.

Alternatively, you could change the background of #navigation itself from #EEE to #036, but that will disrupt the appearance of the dashed border in some environments.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 73 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.