/    Sign up×
Community /Pin to ProfileBookmark

Aligning div content to the top.

Copy linkTweet thisAlerts:
Jun 10.2005

In opera the div is aligned at the right top where it should but IE and Firefox align it at the bottom.

Here is the css code I use to align the div:

[CODE].navbox { float: right; position: relative; left: 0px; top: 0px; } [/CODE]

but how can I make sure the content is alligned at the top of the div and not at the bottom.:
Div setup:

[code=html]<div id=”top-banner”><a href=”{U_INDEX}”><img src=”templates/subSquare/images/logo.gif” border=”0″ alt=”{L_INDEX}” /></a> <div class=”navbox”><ul><li class=”menulink”><a href=”{U_INDEX}”>{SITENAME}</a> <ul> <li><a href=”{U_FAQ}”>{L_FAQ}</a></li> <li><a href=”{U_SEARCH}”>{L_SEARCH}</a></li> <li><a href=”{U_MEMBERLIST}”>{L_MEMBERLIST}</a></li> <li><a href=”{U_GROUP_CP}”>{L_USERGROUPS}</a></li> <!– BEGIN switch_user_logged_in –> <li><a href=”{U_PROFILE}”>{L_PROFILE}</a></li> <!– END switch_user_logged_in –> <li><a href=”{U_PRIVATEMSGS}”>{L_PRIVATEMSGS}</a></li> <!– BEGIN switch_user_logged_out –> <li><a href=”{U_REGISTER}”>{L_REGISTER}</a></li> <!– END switch_user_logged_out –> <li><a href=”{U_LOGIN_LOGOUT}”>{L_LOGIN_LOGOUT}</a></li> </ul> </li></ul></div></div>[/code]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJun 10.2005 — We need the full HTML and CSS to help you.
Copy linkTweet thisAlerts:
@ffurnaiJun 11.2005 — maybe even a link to the working site to look at too . . .
Copy linkTweet thisAlerts:
@DoubleJauthorJun 11.2005 — [URL]http://dev.doublejweb.net/[/URL]

I want the button with the dropdown menu that you see at the right had side at the top.

In opera it is at the top but in Fire fox and IE it is shown at the bottom of the div it's in.
Copy linkTweet thisAlerts:
@ffurnaiJun 11.2005 — try changing this:
[CODE]<div id="top-banner"><a href="index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7"><img src="templates/subSquare/images/logo.gif" border="0" alt="yourdomain.com Forum Index" /></a>
<div class="navbox"><ul><li class="menulink"><a href="index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">yourdomain.com Forum Index</a>

<ul>
<li><a href="faq.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">FAQ</a></li>
<li><a href="search.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Search</a></li>
<li><a href="memberlist.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Memberlist</a></li>
<li><a href="groupcp.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Usergroups</a></li>
<li><a href="privmsg.php?folder=inbox&amp;sid=ec2be5d34ff286c784cf44cc2b84ffb7">Private Messages</a></li>
<li><a href="profile.php?mode=register&amp;sid=ec2be5d34ff286c784cf44cc2b84ffb7">Register</a></li>

<li><a href="login.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Log in</a></li>
</ul>
</li></ul>
</div></div>[/CODE]
to this:
[CODE]<div id="top-banner">
<div class="navbox"><ul><li class="menulink"><a href="index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">yourdomain.com Forum Index</a>

<ul>
<li><a href="faq.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">FAQ</a></li>
<li><a href="search.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Search</a></li>
<li><a href="memberlist.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Memberlist</a></li>
<li><a href="groupcp.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Usergroups</a></li>
<li><a href="privmsg.php?folder=inbox&amp;sid=ec2be5d34ff286c784cf44cc2b84ffb7">Private Messages</a></li>
<li><a href="profile.php?mode=register&amp;sid=ec2be5d34ff286c784cf44cc2b84ffb7">Register</a></li>

<li><a href="login.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Log in</a></li>
</ul>
</li></ul>
</div><a href="index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7"><img src="templates/subSquare/images/logo.gif" border="0" alt="yourdomain.com Forum Index" /></a></div>[/CODE]

If you position a floated element after another (your banner image in this case) it will appear beneath it in most browsers.

So just do you navbox menu before the banner image href. Hope that makes sense.

I might even change the .navbox to this:[CODE]
.navbox { float: right;}[/CODE]

Ian

P.S. you misspelled design in your credit on the bottom left of the page ?
Copy linkTweet thisAlerts:
@DoubleJauthorJun 11.2005 — Thank you it is now alligned correctly.

(btw that typo was fixed but since the styles is still in development I'm too lazy to upload the graphic.)

But now I still have a little issue with the menu:

On another site this menu works in IE perfectly only my menu only drops down in FireFox and Opera browser, IE does not do the dropdown thingie it is supposed to do.

Anyone know a solution to that?(I dont know where to look for the problem any more if its either in the java script or in the css:

Css code:
[CODE]ul {

padding: 0;

margin: 0;

list-style: none;

}

li {

float: left;

position: relative;
width: 150px;
}

li ul {

display: none;

position: absolute;

left: 0;

}

li > ul {ntop: auto; left: auto; }

li:hover ul, li.over ul{ display: block; }[/code]

the javascript can be found here:

http://dev.doublejweb.net/templates/subSquare/javascript.js

(note that first to functions are not with the dropdown menu)
×

Success!

Help @DoubleJ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...