White space

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

White space

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> White space

Page: [1]

Itsme8

Posts: 27
Joined: 7/27/2006
Status: offline

White space - 9/17/2006 14:56:10

Hello,

I have a little problem with the white space on my site.

This is the site code:

quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Validating drop down cross-browser menu</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML, w3c, opacity, box model, mozilla, opera, netscape, internet explorer, techniques, layout, three column, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture, dropdown, pull up, fly out" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="dropdown.css">


<base target="main">

</head>

<body>

<p><img border="0" src="images/PTRCommunity.jpg" width="100%" height="150"></p>

<div id="wrapper">
<div id="info">

<div class="menu">

<ul>
<li><a class="hide" href="bottom.htm">HOME</a>



</li>

<li><a class="hide" href="information.asp?Subject=Information">INFORMATION</a>



<ul>
<li><a title="EARNING OPTIONS" href="information.asp?Subject=Information&SubSubject=Earning options">Earning options</a></li>
<li><a title="PAYMENTS" href="information.asp?Subject=Information&SubSubject=Payments">Payments</a></li>
<li><a title="SIGN-UP" href="information.asp?Subject=Information&SubSubject=Sign-up">Sign-up</a></li>
</ul>



</li>

<li><a class="hide" href="information.asp?Subject=Do�s&Subject=Don�ts">DO'S & DON'TS</a>



<ul>
<li><a title="DO`S" href="information.asp?Subject=Do's">Do's</a></li>
<li><a title="DON�TS" href="information.asp?Subject=Don'ts">Don'ts</a></li>
</a></li>
</ul>



</li>

<li><a class="hide" href="PTRs.htm">PTR'S</a>



<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">
Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed
2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed
3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed
4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">
minimum width</a></li>
</ul>



</li>

<li><a class="hide" href="login.asp">MEMBERS</a>



</li>

<li><a class="hide" href="signup.asp">SIGN-UP</a>



</li>

<li><a class="hide" href="forum.htm">FORUM</a>



<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>



</li>

<li><a class="hide" href="search.htm">SEARCH</a>



</li>

<li><a class="hide" href="contact.htm">CONTACT</a>



</li>
</ul>

</div>

</div>

</div>
</body>
</html>

http://ptrcommunity.sohosted.com/top.htm

And this is the is the css for non ie users.

quote:

/* common styling */
.menu {font-family: arial, sans-serif; width:1200px; position:relative; font-size:11px; z-index:100;margin-left:0; margin-right:0; margin-top:2px; margin-bottom:100px; }
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:100px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#40ADE2; line-height:20px; font-size:11px; overflow:hidden; margin-top:0}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:100px}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:100px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-100px;}

How can I remove the white space between the image and menu?


Nicole Posts: 2810 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	RE: White space - 9/17/2006 17:07:23 Hi Renee, Try removing the margin-bottom: 100px from the .menu. If you haven't already got it, download the Firefox web developer toolbar. On that you'll see under the CSS ooption "edit CSS" which is very useful for working out little annoyances like this. Nicole p.s. You may want to change the title of your site? _____________________________ Nambucca Valley & Kempsey Web Design \| NixDesign Get Netscape Navigator 9 (in reply to Itsme8)

caz

Posts: 3486
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline

RE: White space - 9/17/2006 17:40:56

You need to reorder your html like this

<body>


<div id="wrapper">
<div id="info">
<img border="0" src="PTRCommunity.jpg" width="100%" height="150">
</div>

<div class="menu">
...

You also need to attend to your head section,

<title> Stu Nicholls | CSSplay | Validating drop down cross-browser menu</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML, w3c, opacity, box model, mozilla, opera, netscape, internet explorer, techniques, layout, three column, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture, dropdown, pull up, fly out" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />

I am sure that Stu would be delighted that you are learning about CSS by using CSSplay, but using his title etc won't do your site much good.

_____________________________

Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk

I remember when it took less than 4hrs to fly across the Atlantic.

(in reply to Nicole)


jaybee Posts: 14070 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: White space - 9/17/2006 19:09:55 I don't think you're meant to grab the entire page, just the css and code that goes with whatever he's demonstrating. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to caz)