/    Sign up×
Community /Pin to ProfileBookmark

Gap between div boxes…how to remove.

Copy linkTweet thisAlerts:
Jun 18.2005

I am busy with making my layout in css but now I have a problem.
In IE the header of my site design is showing as it is supposed too.
But in Opera and Firefox there is a gab/space between the banner div box and the menu div box which is not supposed to be there.

Here is a link to my work in progress:
[url]http://dev.doublejweb.net/doublejweb/index.html[/url]
The css file:
[url]http://dev.doublejweb.net/doublejweb/doublejweb.css[/url]
Does anyone know how I would be able to remove the gab/space between those div boxes?

Also I have another question about my menu.
I have now a css based rollover but what I would like to have is that the links are in the code like:

[code]<p><a href=”index.php”>Home</a><a href=”downloads.php”>Downloads</a><a href=”forum/”>Forum</a></p>[/code]

Instead of the images and that they appear as images.
How would I do that in css?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@BonRougeJun 18.2005 — For your first question : #navbar p {
[B]margin-top:0;[/B]
height: 34px;
width: 290px;
text-align: right;
position: relative;
top: 0px; right: 74px; left: 386px;
}

The answer to the second question kind of changes the answer to the first question. You shouldn't really have your navigation marked up as a paragraph, because... well, it's not a paragraph. It's actually an unordered list which should be marked up with the appropriate tags.

You can give each li an appropriate width and put the images in the background. I'm talking about something along the lines of this : http://bonrouge.com/br.php?page=rollover2

I say this changes the answer to the first question because if you do this, you won't have any 'p' tags giving you trouble with margins. If you follow my example, your ul won't have any top margin either, so you'll be fine (though you might want to give it a bottom-margin...

You might be able to put your text into the tags and make it invisible by putting it in span tags and coding the CSS appropriately - something like this : #navbar span {
visibility:hidden;
}


I hope this helps.
Copy linkTweet thisAlerts:
@DoubleJauthorJun 18.2005 — Thank you. This is my first serious try at a completely css styled website and all my previous tries resulted in the same error over and over again.

But what I want is that I do not have any <IMG> tags within my html.

I have my menu now like this:

<div id="navbar">

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="downloads.php">Downloads</a></li>

<li><a href="forum/">Forum</a></li>

</ul>

</div>

and now what I want is a rollover effect in them.

I already got the background I got it aligned right but now I somehow need to have that text visibility: hidden and then replaced with a foreground image that is hidden on rollover so you see the background.

I was wondering if this was possible.

if so I can still put in <span><div> tags and classes to get this but I do not want any images in it so I if I make a new design that will have just text buttons I can use a nice css switcher so you can switch site style.
Copy linkTweet thisAlerts:
@DoubleJauthorJun 19.2005 — that is not what I was looking for at all.

what I want is that the text is replaced via css with an images since I use buttons.
Copy linkTweet thisAlerts:
@DoubleJauthorJun 19.2005 — nevermind.

I have the effect that I wanted using background images over background images and making the text hidden.

ANd again thank you bon for helping me out with that issue.
×

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.20,
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,
)...