Going crazy over CSS

[edbarton]

Basically my blog design has just gone kaboom. It was all working, but now it isn't.

The url is http://www.blueuniverse.co.uk/blog/index.php

For starters the buttons are meant to be positioned at the top on the header in line. I don't have a clue why they have done what they have done as they are absolutely positioned.

Also the grey bar is meant to be directly below this, filling in the gap between the header and the menu bar.

I also want the bottom bar to be aligned right at the bottom underneath the menu, instead of it continuing along.

To download the css file go here

Here are some snippets of the index.php code (the main page)

Beginning of page (start wrapping div tags, header, grey bar and nav buttons

[code:1:8e62d60896]
<div id="outsidediv"><div id="container">
<div id="header"><a href="<?php echo $siteurl; ?>" title="<?php bloginfo('name'); ?>">
<img src="<?php echo $siteurl; ?>/wp-images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a></div>
<div id="homeb"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homepage','','<?php echo $siteurl; ?>/wp-images/homer.jpg',1)"><img src="<?php echo $siteurl; ?>/wp-images/home.jpg" alt="Return to the Web Design Blog and Resource Home Page" name="homepage" width="84" height="23" border="0" id="homepage" /></a></div>
<div id="picsb"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pictures','','<?php echo $siteurl; ?>/wp-images/picturesr.jpg',1)"><img src="<?php echo $siteurl; ?>/wp-images/pictures.jpg" alt="Pictures" name="pictures" width="83" height="23" border="0" id="pictures" /></a></div>
<div id="contactb"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactus','','<?php echo $siteurl; ?>/wp-images/contactr.jpg',1)"><img src="<?php echo $siteurl; ?>/wp-images/contact.jpg" alt="Contact Us" name="contactus" width="83" height="23" border="0" id="contactus" /></a></div>
<div id="archivesb"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('archivesbutton','','<?p hp echo $siteurl; ?>/wp-images/archivesr.jpg',1)"><img src="<?php echo $siteurl; ?>/wp-images/archives.jpg" alt="View the Pointless-Existence Archives" name="archivesbutton" width="83" height="23" border="0" id="archivesbutton" /></a></div>
<div id="aboutusb"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutuspage','','<?php echo $siteurl; ?>/wp-images/aboutr.jpg',1)"><img src="<?php echo $siteurl; ?>/wp-images/about.jpg" alt="About Pointless-Existence" name="aboutuspage" width="83" height="23" border="0" id="aboutuspage" /></a></div>
<div id="topbar">.</div>
[/code:1:8e62d60896]

Start of menu

[code:1:8e62d60896]
<div id="menu">

<ul>
<?php get_links_list(); ?>
<li id="categories">Categories:
<ul>
<?php list_cats(0, 'All', 'name'); ?>
</ul>
</li>
[/code:1:8e62d60896]

Footer

[code:1:8e62d60896]
<p class="credit"><!--<?php echo $wpdb->querycount; ?> queries.--> <?php timer_stop(1); ?> || <cite>Powered by <a href="http://wordpress.org" title="Powered by WordPress, state-of-the-art semantic personal publishing platform"><strong>WordPress</strong></a></cite></p>
[/code:1:8e62d60896]


I really hope somebody can help, this really is seriously driving me nuts.[/url]

[SVB]

use frontpage or geocities page maker, its what the pros do.

[Distorted]

Try adding float: right; clear: left; to the css that controls the menu's position.

That's all that I can contribute at this time, as I am about to collapse from sleep deprivation.

[chaka42]

i hope you're joking unreal

[PhilC]

Originally Posted by unrealfragmaster

use frontpage or geocities page maker, its what the pros do.

Now we know how every Tom, Dick and Harry can become pros ...
Ah, God, that was good ... haven't laughed so much for some time now !

[wbstein]

Originally Posted by unrealfragmaster

use frontpage or geocities page maker, its what the pros do.

ha

[SVB]

[edbarton]

Any suggestions, I have added the suggestion from Distorted

[deregular]

For the menu, get rid of the seperate 'div' tags........

That will spread them across rather than down.

[edbarton]

But surely it shouldn't matter as they are absolutely positioned?

[deregular]

is each button separately positioned?

what i did was

i saved your page to my desktop, opened it in dreamweaver, did a backspace on each button (which removed the divs) and it seemed to fix it.
Perhaps the divs were for vertical layout, and removing them were for horizontal........

[edbarton]

Each button is seperately positioned, plus I want the whole nav bar to be positioned on the right side of the top header section.

[deregular]

Doesnt look that way from here as there is no way of adjusting their position on the page, Id get rid of the seperate div tags, and in the div that contains them all, insert [code:1:b5af6ac4b3]align="right"[/code:1:b5af6ac4b3]

It works.

[code:1:b5af6ac4b3]<DIV id=outsidediv>
<DIV id=container>
<DIV id=header><A title="Pointless Existence"
href="http://www.blueuniverse.co.uk/blog"><IMG alt="Pointless Existence"
src="Pointless Existence_files/logo.gif"></A></DIV>
<DIV id=homeb align="right"><A
onmouseover="MM_swapImage('homepage','','http://www.blueuniverse.co.uk/blog/wp-images/homer.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.blueuniverse.co.uk/blog/index.php#"><IMG id=homepage height=23
alt="Return to the Web Design Blog and Resource Home Page"
src="Pointless Existence_files/home.jpg" width=84 border=0
name=homepage></A><A
onmouseover="MM_swapImage('pictures','','http://www.blueuniverse.co.uk/blog/wp-images/picturesr.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.blueuniverse.co.uk/blog/index.php#"><IMG id=pictures height=23
alt=Pictures src="Pointless Existence_files/pictures.jpg" width=83 border=0
name=pictures></A><A
onmouseover="MM_swapImage('contactus','','http://www.blueuniverse.co.uk/blog/wp-images/contactr.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.blueuniverse.co.uk/blog/index.php#"><IMG id=contactus height=23
alt="Contact Us" src="Pointless Existence_files/contact.jpg" width=83 border=0
name=contactus></A><A
onmouseover="MM_swapImage('archivesbutton','','htt p://www.blueuniverse.co.uk/blog/wp-images/archivesr.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.blueuniverse.co.uk/blog/index.php#"><IMG id=archivesbutton
height=23 alt="View the Pointless-Existence Archives"
src="Pointless Existence_files/archives.jpg" width=83 border=0
name=archivesbutton></A><A
onmouseover="MM_swapImage('aboutuspage','','http://www.blueuniverse.co.uk/blog/wp-images/aboutr.jpg',1)"
onmouseout=MM_swapImgRestore()
href="http://www.blueuniverse.co.uk/blog/index.php#"><IMG id=aboutuspage
height=23 alt="About Pointless-Existence"
src="Pointless Existence_files/about.jpg" width=83 border=0
name=aboutuspage></A></DIV>
<DIV id=topbar>.</DIV>[/code:1:b5af6ac4b3]

Now you have to figure out that blue box on the right......

[edbarton]

Originally Posted by deregular

Doesnt look that way from here as there is no way of adjusting their position on the page

It is in the css, do a search for '#whatever the id is' in the css and you will find the absolute positioning tags.

This is the bit that puzzles me, surely if they are absolutely positioned then they should go in that place.

[SVB]

Well looks like they dont

[edbarton]

That is the point of them though. They did it originally as well, and when I was putting it together in html on my pc, just when I started doing work on the actual template they mucked up.

[Distorted]

Looks like the id's in the style sheet dissapeared.

Just try to make sure that the id's are in the style sheet on you pc and re-upload it...I...guess....

[edbarton]

Finally, turns out I had the wrong css file uploaded. Thanks.

Still got the problem of the very bottom bar though and the menu.

I think what I want is for the #content css bit to be the same length as the #menu css bit but how would I define this.

[Distorted]

Try putting them in one div and making their height = 100%...or something.

[SN3]

I think your image is in the way, the logo at the top.