CSS positioning woes.

Farenvin · Apr 19, 2008

Well, in trying to make my website, I've been having a ton of problems with the CSS.
What I'm trying to do is have my logo picture, 15 down, 10 across, from the upper left hand corner.
Then, under that, I have "tabs," actually picture links. On the far right side on line with the tabs, is the Login link. Under that, "connected" to the tabs is a simple table, rules turned off (it's only a box that contains the actual page, no lines inside) that stretches the entire page, and finally under that is the copy right.

My problem is that no matter what I try, my CSS seems to be ignored. (Yes, I am linking to it in the header.)

The result is the logo smashed up into the corner, tabs underneath it, with the login next to the tabs, and the table is under THAT, not even connected (by about 5-7 pixels) The copyright I can only get to work if I use the depreciated <center></center> tags. I've tried float, position:absolute and relative, doing the whole thing in tables with border-spacing:0px padding:0px margin:0px, nothing works. It just stays like this;
http://www.glasscannon.x10hosting.com/index.php?page=main

What can I do to make it not suck? I've completely ran out of ideas.
(Yes, the coding is messy, I clean it up after I'm done, usually)

EDIT:

Here is what it SHOULD look like. (MS Paint FTW!)

woiwky · Apr 19, 2008

Well first off, you need to make the left parenthesis a left curly brace here: a:hover(color:#ffffff;}. Then you need to move the nav div before the tabs, like this:

Code:

<small>
<div id="nav">
    <a href="index.php?page=signin">Register/Sign In</a>
</div>
</small>
<a href="index.php?page=main"><img src="nav_main.PNG"></a>
<a href="index.php?page=forums"><img src="nav_forums.PNG"></a>

And then get rid of that 100% width in its style, since it can't be floating to the left of something if it's taking up all the space. Also delete the <br> after the closing <small> tag. And lastly, make the width of the top table 100%. And of course you'd have to modify the dimensions of the content area to get it to the size you want, but I didn't make those changes myself.

Those changes make it look almost identical to your screenshot in both IE and FF.

Here's the full html/css code I used just in case I forgot one of the changes I made (I couldn't resist formatting it

):

Code:

<HTML>
    <HEAD>
        <TITLE>
            Glass Cannon- The Mage Resource
        </TITLE>
        <script src="http://www.wowhead.com/widgets/power.js"></script>
        <link rel="stylesheet" type="text/css" href="global.css" />
        <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    </HEAD>
    <BODY bgcolor="black">

    <table width="100%">
        <tr>
            <td>
                <div id="logo">
                    <a href="http://www.glasscannon.x10hosting.com"><img src="http://www.glasscannon.x10hosting.com/logo.png"/></a><br />
                    The Mage Resource<br /><br />
                </div>
                <small>
                <div id="nav">
                    <a href="index.php?page=signin">Register/Sign In</a>
                </div>
                </small>
                <a href="index.php?page=main"><img src="http://www.glasscannon.x10hosting.com/nav_main.PNG"></a>
                <a href="index.php?page=forums"><img src="http://www.glasscannon.x10hosting.com/nav_forums.PNG"></a>
                <table border="1" rules="rows" bgcolor="#121212" width="100%" height="65%">
                    <tr>
                        <td valign="top" align="center" class="content">
                            hai-content 
                        </td>
                    </tr>
                </table>
                <br /><br />
                <center>©2008 <a href="http://www.wowarmory.com/character-sheet.xml?r=Thrall&n=Farenvinvi">Farenvinvi</a><br><br></center>
            </td>
        </tr>
    </table>

    </BODY>
</HTML>

Code:

body{
    background-color:black;
    margin:0px;
    padding:0px;
    font-family:Arial,sans-serif;
    font-size:12px;
    color:white;
}
form {
    padding:0;
    margin:0;
    display:inline;
    background-color:black;
}
img,iframe {
    border:0;
    padding:0;
}
small {
    font-size:10px;
}
a:link {
    color:#CCCCCC;
}
a:visited {
    color:#666666;
}
a:hover {
    color:#ffffff;
}
a:active {
    color:#ffffff;
} 
#nav {
    float:right;
}
#logo {
    padding:15px 10px 0px 10px;
}
.signupinform {
    padding:15px 10px 0px 10px;
    border-spacing:0px 0px 0px 0px;
}
.content {
    padding:15px 10px 0px 10px;
}

Farenvin · Apr 19, 2008

Wow, thanks man

If I may suggest something, I bet you would like Programmer's Notepad, it'll colorcode, auto indent, and you can have multiple codes open at once. Plus. if you don't want to work on a part, you can collapse it. Really helps with the cleaning up part

Anyway, thanks again

MasterMax1313 · Apr 19, 2008

here is how I changed your css/html to make the menu and sign in look closer to what you are looking for (some tweaking necessary)

HTML:

<div style="width: 100%; height: 40px; text-align:right;"><div style="width: 190px; float: left;">
					<a linkindex="208" href="index.php?page=main"><img src="content/images/nav_main.PNG"/></a>
					<a linkindex="209" href="index.php?page=forums"><img src="content/images/nav_forums.PNG"/></a></div>
					<div id="nav" style=""><a href="index.php?page=signin">Register/Sign In</a></div>
<br/></div>

as for the logo, it does seem as though the css is being ignored, so I'm not really sure what to tell you for that.

admittedly my solution is a little messy, and could probably be cleaned up, but it looks OK in ff.

edit:
as for the logo, it seems as though you img css is overriding your div's css.

woiwky · Apr 19, 2008

Farenvin said:
Wow, thanks man

If I may suggest something, I bet you would like Programmer's Notepad, it'll colorcode, auto indent, and you can have multiple codes open at once. Plus. if you don't want to work on a part, you can collapse it. Really helps with the cleaning up part

Anyway, thanks again

Thanks, I'll look into that ;-)

By the way, you've probably noticed by now, but I messed up with the images. I saved them locally, and then updated the src's incorrectly when I pasted the code. I forgot the /content/images/ part.

Farenvin · Apr 19, 2008

Yeah, I already fixed the images. One little thing; I still can't get the images to lie flush on top of the table. Any ideas?

woiwky · Apr 19, 2008

I think you can do that with a little relative positioning and a higher z-index. Try adding this to the css:

Code:

#tabs {
    z-index: 2;
    position: relative;
    top: 7px;
}

And then wrap the tabs in a div with the matching id. I used 7px for the top property just as an example. The greater it is, the further down from its normal top point it will be.

Farenvin · Apr 19, 2008

Worked wonderfully, see for yourself.
http://www.glasscannon.x10hosting.com/index.php?page=main

I'm Okish at HTML/PHP/MySQL, but I suck at CSS, always just used tables

I'm starting to get it now though, thanks a ton Woiwky. +rep

Oor, maybe not. I can only click on the signin link from the very top of it; what did I do this time

I fail >.>

woiwky · Apr 19, 2008

Well to be honest, I can't stand designing. I hate dealing with and coding in html/css, but I studied that stuff anyway since I figured it'd be unhealthy to get into web developing and not know it

***

Ah, right. I forgot about that. Set the position of #nav to relative and the z-index to 3. That should fix it.

Farenvin · Apr 19, 2008

Woo! Everything finally works, I can actually get started on content.

Again, thanks a ton man. I hate CSS.

CSS positioning woes.

Farenvin

New Member

woiwky

New Member

Farenvin

New Member

MasterMax1313

New Member

woiwky

New Member

Farenvin

New Member

woiwky

New Member

Farenvin

New Member

woiwky

New Member

Farenvin

New Member

Free Web Hosting

Our Community

Legal