They are using (what I consider to be an unnecessarily complex set of) background images.
They are using this image to make the round corners.
Get yourself Firebug for Firefox and then you can just click on an element and all the styles for that element are revealed.
I have used Firefox and Firebug and I see what you mean now.
Would you recommend I use macromedia Fireworks (the software I use to design images/graphics for the web site) to design the border? I have never designed graphics in parts before. I suppose it is best to design the whole thing then break it into parts and save the bits separately otherwise the border might not fit together afterwards…is this the standard method?
Matt.
Fireworks is fine for web work and some repects better than photoshop for slicing and optimising.
Regarding how to make your round corners then it depends on which method you are going to use as they all have different requirements. This old example of mine uses multiple images whereas [URL=“http://www.cutcodedown.com/tutorials/eightCorners/page1.html”]Jason’s method uses just [URL=“http://www.cutcodedown.com/tutorials/eightCorners/images/eightCorners.png”]one sprite.
I suggest you try a few out on a stand alone page just to see what works best for your layout.
In your example is there a good reason why you do not have 4 individual images for each corner? You only have top-right and bottom-right and include the left corners with the top and bottom image. Is this the recommended method?
Matt.
…and also should the top and bottom images never repeat? Or what your example load quicker with a repeat-x?
It saves having four nested elements if you can amalgamate a couple of corners in one go.
Having 4 images means 4 http calls as well so using a sprite or single image (or less images) is much more efficient and corners get painted in one go because all load at the same time.
If you are repeating images then make sure they aren’t too small. A 1px image will need to be repainted thousands of times to fill the screen and will slow the page to a crawl. Increase the image to 10px and its ten times quicker and probably no bigger in filesize.
The method you use depends on the job in hand and how complicated the design is.
OK - I will try it out today or/and tomorrow.
I have been trying to add columns to the header column in the CSS Layout you suggested but I have run into problems.
I have added these CSS Stylings:
.links-col {
float: right;
width:45%;
}
.nav-col {
float: left;
width:100%;
}
and then between the tags for the header column I am adding these classes I have created. I expect the columns to then appear. One for the navigation bar to go in and another for text links at the top of the page (like text links above search bar at Hotmail, Messenger, Free Online News, Sport, Music, Movies, Money and Cars from MSN UK.)
The problems just keep multiplying:
- The columns do not appear completely inside the Header Column. The height of the header column does not accommodate the newly added columns! It seems to have a maximum height!
- Whilst trying different ideas the left navigation bar (column 1) now appears on the right!
- ALL CONTENT is now centred!
Something is going drastically wrong. If it gets much worse I’ll have to think about recoding the page from scratch. Can you suggest how I can get the header to appear like Hotmail, Messenger, Free Online News, Sport, Music, Movies, Money and Cars from MSN UK with the text links at the top and navigation at the bottom of the header column!? Once I know how it should be done I can see what i need to do with the problems I have.
Matt.
You’ll have to post your full html and css as css on its own means nothing really. I wasn’t sure from the hotmail site what you were trying to do so you may need to clarify. Are you working to a design that we could see or are you just making it up as you go along. If you have a design then it would be worth showing us what you are working towards.
Your rule above doesn’t really make much sense as you have one float set at 45% and one set at 100%. Are they supposed to be next to each other?
There is nothing bigger than 100% so they can’t fit next to each other. If the element is 100% wide then it doesn’t really need to be floated unless there is a special reason.
If your header contains only floats then it contains nothing because floats are removed from the flow you need to contain the floats by placing a clearing element after the floats but before the closing tag of the header as mentioned before.
There are better methods to contain floats though and you can apply overflow:hidden to the parent of the floats which will force it to contain the floats or you can use the clearfix method of placing pseudo content after the float and then setting it to clear:both. Read the css faq on floats and clearing for a full rundown.
Without more information to go on I can’t give specific code.
Paul O’B,
I have tried your way of getting the border done. The top right and bottom left corners fit perfectly. But the top left and bottom right appear to be 1 pixel out - I am not sure if this is my cropping mistake or whether the margin or padding code is doing this?
The main problem I have is the top and bottom length…in your example if the window is widened the length is automatically adjusted. I copied your code and when I widen the window, the length just stays at the width of the image (as you would expect). There must be a trick I am missing; you do not include an image for width, so how is it automatically extending/widening??
Matt.
Which example are you referring to?
If you mean this one then it uses [URL=“http://www.search-this.com/rounded/top.gif”]oversized images for the width (2000px wide). They are still only half a k in size so there’s no real overhead a sit cuts won on two image anyway.
Jason’s example that I linked to above also uses oversize images but he uses one sprite image which is still only half a k for all the corners.
Late to the party (what I get for actually working on a project) but let me just say this:
If you are even THINKING about the appearance while writing your PHP, if you are even THINKING about the appearance when you first write your HTML – you’ve PROBABLY already screwed up!!! When making the CSS and therein the layout you MAY have to go back and add a DIV or two, and sure a couple standard containers may end up needed – but
One of the reasons NOT to use presentational markup (and tables for layout IS presentational markup) is so that you don’t have to worry about all that extra garbage when writing your markup.
Much of your code is “stuck” in 1997… you’ve got 9k of HTML and you don’t even have a complete head or CSS embed… with only 3.5k of actual content on the page, I’d say a good third of your HTML needs to go into the trash.
The non-semantic markup in particular – you’ve got no lists around obvious lists (the breadcrumbs, the bullet points), bolded paragraphs doing heading tag’s job, pointless class attributes (style3) on pretty much every paragraph, (why not just use paragraphs for paragraphs and then style just P?) and then you’re using colspan in a manner that pretty much says “I shouldn’t be in a table in the first place”. title attributes that serve NO purpose whatsoever (if the title is identical to the contents of the anchor, you don’t need title!!! Well, unless you’re using Accesskeys and care about Opera & Blazer)
Or the reliance on javascript ONLY for a bunch of purchase links – using that STUPID MALFING ADOBE mm_ nonsense with no graceful degradation for people who block scripts or don’t have it available. (Have fun with people *****ing that the order links don’t work! Or people like me who have the ability for js to resize a window disabled complain that it opens at an unusable size) Here’s a big tip – the only thing you can learn from Adobe is how not to build a website! Anyone telling you that any of their products other than Photoshop (and even then) should be used in building a page is probably getting a kickback or doesn’t know enough about web development to be opening their mouth on the subject!!!
Even just simple images like this:
<td colspan="2"><img src="satnav/global-positioning-system.gif" width="650" height="1" /></td>
v
A 1px divider? That has no business even being in the html in the first place!
All over the place you’ve got non-semantic markup and multiple TD for NOTHING. Take this:
<tr>
<td colspan="2"><p class="style3"><span class="style9"><b><a title="Home" a href="index.htm">Home</a> > <a title="Speed Camera Detectors" href="speed-camera-detectors.htm">Speed Camera Detectors</a> > Pogo Alert Plus</b></span></p></td>
</tr>
No reason for it to be a separate TD from say… the one that follows if using tables for layout – at that point you are only using the TD to set the total width, so why is it even in the table in the first place when you’ve got a perfectly good wrapping DIV? Title attributes for no reason, paragraphs around non-paragraph elements, unsafe use of greater-than, bold tags for no good reason, span for no good reason… one mess of markup for what should probably just be:
<ul class="breadCrumbs">
<li><a href="index.htm">Home</a> ></li>
<li><a href="speed-camera-detectors.htm">Speed Camera Detectors</a> ></li>
<li>Pogo Alert Plus</li>
</ul>
A semantic list, so things like screen readers and search engines know it’s a list of choices.
Another example is all of these:
<img src="satnav/gps.gif" width="8" height="8" />
That’s OBVIOUSLY a bulleted list, so why isn’t that a list… and if that’s a bulleted list, what are the images even in the markup FOR?!?
You’ve even got elements/attributes in your markup that have no business even being used on a page after 1998 (though admittedly it wasn’t entirely practical to do so if you were still supporting nyetscape 4) like border, align, etc… The HTML 3.2 form is also good for a laugh, especially with the lack of a submit method – again, scripting for nothing but bloat and inaccessibility, which works well with the lack of a fieldset or even a label. (the name on the form for no good reason is a head scratcher too) – Of course that goes with the transitional doctype, which is to say you are coding as if you are still in transition from 1997 to 1998.
Though on the PHP side, lemme guess, still using double quotes on echo? Not even using echo? Opening <?php ?> fifty times per file? Just saying, it has the telltales of that. Single quote + echo… transforms bad code into good! It’s like pepper, makes old meat taste like new.
If I was coding pretty much the same thing as your first post with code, it would look a little something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
$pageTitle - $siteTitle
</title>
</head><body>
<div id="pageWrapper">
/* assuming you have the site logo/name here as a h1 */
<ul class="breadCrumbs">
<li><a href="index.htm">Home</a> ></li>
<li><a href="speed-camera-detectors.htm">Speed Camera Detectors</a> ></li>
<li>Pogo Alert Plus</li>
</ul>
<h2>
<img src="satnav/logos/pogo-alert-plus.gif"
width="200" height="25"
alt="Pogo Alert Plus"
/>
Pogo Alert+<br />
<small>Product Code: POGOAP</small>
</h2>
<img src="pogo-images/pogo-alert-plus/pogo-alert-plus.jpg"
alt="Pogo Alert Plus"
width="290" height="190"
class="leadingPlate"
/>
<div class="leadingPlateOffset">
<p>
Pogo Alert Plus speed camera detector combines GPS and Laser technology with cutting-edge industrial design and a high resolution 1.8-inch colour OLED touch screen, custom designed GPS hardware and an intuitive graphical user interface with custom designed icons. The result is the most sophisticated safety camera locator ever to take to the road.
</p><p>
Pogo Alert+ will warn of ALL fixed speed cameras and in addition, alerts are provided for mobile laser traps via the supplied laser detector module. Included in the Pogo Alert Plus speed camera database are locations in France, Belgium, Holland, Spain, Portugal and United Kingdom which are FREE for the first 6-months.
</p>
</div>
<ul class="purchaseLinks">
<li>
<a href="direct/customer-service.html#secure">
<img src="satnav/100-percent-secure-shop.gif"
alt="100% Secure Shop"
width="46" height="46"
/>
</a>
</li><li>
<a href="direct/customer-service.html#7day">
<img src="satnav/7-day-money-back-guarantee.gif"
alt="7-Day Money Back"
width="46" height="46"
/>
</a>
</li><li>
<a href="direct/customer-service.html#low">
<img src="satnav/low-prices.gif"
alt="Low Prices"
width="46" height="46"
/>
</a>
</li><li>
<a href="direct/customer-service.html#fast">
<img src="satnav/fast-secure-delivery.gif"
alt="Fast, Secure Delivery"
width="46" height="46"
/>
</a>
</li><li>
<a href="direct/customer-service.html#phone">
<img src="satnav/expert-sales-advice.gif"
alt="Expert Sales Advice"
width="46" height="46"
/>
</a>
</li><li>
<a href="direct/customer-service.html#genuine">
<img src="satnav/genuine-product.gif"
alt="Genuine Products"
width="46" height="46"
/>
</a>
</li><li>
<a href="direct/pre-order.html">
<img src="satnav/pre-order.gif"
alt="Pre Order"
width="96" height="18"
/>
</a>
£249.95 including Standard UK Delivery
</li>
<!-- .purchaseLinks --></ul>
<form id="itemsForm" action="submitQuantity.php">
<fieldset>
<div class="preOrder">$249.95 including Standard UK Delivery</div>
<label>Order Quantity:</label>
<input type="text" size="3" name="quantity" id="quantity" value="1" />
<input type="submit" value='Add to Basket" />
<input type="hidden" name="itemId" value="608" />
</fieldset>
</form>
<a href="direct/pogo-approved-reseller.html">
<img src="pogo-images/pogo-alert-plus/pogo-alert-plus-approved-reseller.gif"
alt="Pogo Approved Reseller"
width="160" height="64"
class="trailingPlate"
/>
</a>
<h3>Pogo Alert Plus Summary</h3>
<p>
Pogo Alert+ harnesses the power of orbiting GPS satellites to provide total protection against the threat of fixed safety cameras, mobile laser traps and accident black spots.
</p><p>
Pogo Alert Plus combines cutting-edge industrial design with an intuitive graphical user interface featuring custom designed icons, custom designed GPS hardware and the latest screen technology available - a high resolution OLED (Organic Light Emitting Diode) colour touch screen. The result is the most sophisticated safety camera location system ever to take to the road.
</p><p>
Pogo Alert+ has the award-winning Origin360 safety camera database pre-loaded and provides comprehensive audible and visual alerts including safety camera type, speed limit and proximity to hazard. Pogo Alert+ also includes a highly sensitive infra-red laser detector (removable) to provide the fullest protection against mobile laser based speed traps and ‘safety camera vans’.
</p><p>
Pogo Alert+ utilises the award-winning Origin360 database of safety cameras and accident black spot locations to provide the most accurate and up-to-date information available. This data can be simply downloaded to Pogo Alert+ via PC or Mac with Internet connection.
</p><p>
At each speed camera location the Pogo Alert Plus shows type of speed camera, vehicle speed, speed limit, road number and countdown (metres or seconds) to the speed trap. The Pogo Alert+ can also display distance covered, journey time and average speed.
</p><p>
Pogo Alert+ also includes a highly sensitive infra-red laser detector to provide the fullest protection against laser based speed cameras and 'safety camera vans' via the supplied (removable) laser detector.
</p>
<hr />
<h3>Pogo Alert+ Features:</h3>
<ul class="features gpsgif">
<li>1.8-inch colour OLED with touch screen - latest display technology<br />
<li>Alerts for ALL fixed safety cameras, including: Gatso, Truvelo, SPECS, Monitron, PEEK, Watchman and SpeedCurb</li>
<li>On-board infra-red laser detector (removable) for mobile laser camera sites <br />
<li>8 hour battery</li>
<li>Clear audible and visual alerts</li>
<li>Simple-to-use, custom icon-driven user interface</li>
<li>Unique PogoSoft operating system. Patent protected features</li>
<li>Speed limit advisory</li>
<li>Vehicle average speed displayed through SPECS average speed camera zon</li>
<li>Distance to safety camera</li>
<li>School zone alerts (time sensitive)</li>
<li>Fully portable, plug and play design. Simple to install by the end user</li>
<li>Dashboard and windscreen mounting kits</li>
<li>Journey Tracking, via Google Maps</li>
<li>Updated via Windows or Mac (Mac updates are a new product feature, and an industry first)</li>
<li>Fully legal to own and use in the UK</li>
<li>Database of cameras in France, Belgium, Holland, Spain, Portugal and UK</li>
<li>FREE speed camera subscription for six months, then £50 per year</li>
<li>2 Year manufacturers guarantee</li>
<!-- .features.gps --></ul>
<hr />
<h3>Pogo Alert Plus images</h3>
<!-- #pageWrapper --></div>
</body></html>
Mind you I’m guessing wildly since the page lacks a true H1 candidate, I’d be ripping out the javascript as an inaccessible train wreck (or rewriting it to work both ways), but on the whole that’s +/- 1% of what should be ‘needed’ for markup on such a page. At most it may require one or two extra DIV – though that hinges greatly on what it’s being plugged into for a page – EVERYTHING else in that layout belongs in the CSS.
Which using less markup with meaningful markup in that fashion means it’s simpler when you slice it up into your PHP! Again, HTML is for saying what things ARE, NOT how they are going to appear for 96 dpi full size screen users.
It’s called “semantic markup” with “separation of presentation” from content… and it really is a simpler, faster and all around better way of building pages than the 1997 style presentational markup.
As Ralph.m said
… and I’d go so far as to say two of those aren’t supposed to have ANYTHING to do with HTML either! (depending on how one defines “structure” it could be all three – are you talking typographic structure or document structure?)
Thank you DeathShadow60 - I will try and understand and apply what you suggest.
I am a bit puzzled how to achieve a Top Section of the web site like Hotmail, Messenger, Free Online News, Sport, Music, Movies, Money and Cars from MSN UK
I like 3 aspects of the Top Section of msn.co.uk
-
small text links:
Web | MSN | Images | Videos | Shopping | News | Maps
I would like these positioned at the top right of the page. How Do I position them? Use positioning parameters, another column, something else? -
The Logo positioning to the left but I want to make it clickable with a link to the Homepage. I think I need to use ‘hot spot’ linking. Is this the best method for adding a link to a logo and surrounding area (as the logo background is the same colour as the Top Section background, it makes sense to link more than just the logo).
-
Positioning of Search Bar in the Centre. I plan to add a search bar at a later date to the web site…as this stage I am most interested in how to position it. So I am prepared for where it will be located, when it is coded.
Can anyone help with these 2 positioning questions and the hot-spot linking question?
Matt.
Use an unordered list (<ul>) and float it to the right. Set the little dividers via CSS rather than using a pipe symbol. For example, each link could be set to display: block and have a 1px right margin.
The Logo positioning to the left but I want to make it clickable with a link to the Homepage. I think I need to use ‘hot spot’ linking.
Just use an image, wrapped in a link element, inside a block element like <div> or <p>. E.g.
<div><a href="/"><img src="logo.png" alt="Home" title="Home"></a></div>
You could position this by floating it to the left, and then adding margins to position it from the top and left if needed.
Positioning of Search Bar in the Centre.
Perhaps just float that to the left too, again with margins to suit.
For the links you would just float them to the right and then float the list items left.
The logo would be floated left and if you set the width and height you can apply the image to the background of the anchor. Or better still use an image replacement technique so that you can still have text available for accessibility.
The search would then just be floated left also.
You just have to divide the page into logical sections and work accordingly. The header in the msn site would probably be 3 floated columns.
At the simplest level then something like this should accomplish what you want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#outer {
width:960px;
margin:auto;
padding:10px;
border:1px solid #000;
overflow:hidden;
}
.logo, .logo a, .logo span {
margin:0;
padding:0;
width:100px;/* width of logo */
height:100px;/* height of logo */
overflow:hidden;
float:left;
text-decoration:none;
position:relative;
}
.logo {
margin:0 50px 0 0;
}
.logo span {/* gilder levin image replacemment*/
position:absolute;
left:0;
top:0;
background:red url(logo.jpg) no-repeat 0 0;
}
.smallmenu {
margin:0;
padding:0;
list-style:none;
float:right;
}
.smallmenu li {
float:left;
color:#ccc;
}
.smallmenu li a {
color:#f00;
text-decoration:none;
padding:0 5px;
font-size:85%;
}
fieldset {
border:none;
margin:0
}
legend span {
position:absolute;
left:-999em;
top:-999em;
}
#form1{float:left;margin:30px 0 0;}
</style>
</head>
<body>
<div id="outer">
<h1 class="logo"><a href="#">Site name goes here<span></span></a></h1>
<form id="form1" method="post" action="">
<fieldset>
<legend><span>Search</span></legend>
<label for="Search">Search:</label>
<input type="text" name="Search" id="Search" />
</fieldset>
</form>
<ul class="smallmenu">
<li><a href="#">Link 1</a> | </li>
<li><a href="#">Link 2</a> | </li>
<li><a href="#">Link 3</a> | </li>
<li><a href="#">Link 4</a> | </li>
<li><a href="#">Link 5</a> | </li>
<li><a href="#">Link 6</a> | </li>
<li><a href="#">Link 7</a> </li>
</ul>
</div>
</body>
</html>
Edit:
I see Ralph said much the same thing but quicker 
Yes - this is working well but the search engine/search box will not appear between the text links at the top of the page and the horizontal navigation bar for at least 6 months (I need to read up and build a good search engine and know there a few issues with the web site that will mean needless results so I’ll sort this out after the main site is done).
My problem is entering blank space. What is the best way to add line-spacing between the text links at the top of the page and the horizontal navigation bar? Yes, there will be a logo in the left corner but surely this is a side issue compared with line spacing? I know in Microsoft Frontpage the user just hits the return key but I do not think this is possible now!
Matt.
OK, I’ve lost track of this thread now. Are we talking about an actual example you can show us?
Ditto
Just looked back through some posts but can’t work out where we are now. A current code example would be good.
It was just a basic line-spacing problem. I have
Top Nav: Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | Link 6 |
Horizotnal Nav: Home New products Accessories Contact Us
There is no space between the top and horizontal navigation. I need to know how to add blank lines so that there is a gap between the navigations.
Another problem, separate to this, is I am trying to create a table that displays the order information of the customer.
Like this:
First name: INPUT DATA IN BOX HERE
Surname: INPUT DATA IN BOX HERE
Email: INPUT DATA IN BOX HERE
Telephone: INPUT DATA IN BOX HERE
etc.
The problem is how do I extend the width (input area/length of the box) of the boxes?
And the table has
<table cellspacing="0" border="0" valign="top">
but there is too much white space between one line and another (the boxes need to be closer together).
Maybe you would recommend CSS instead…the table is working fine apart from the boxes are not close enough together. Each line has too much spacing. I have tried reducing the font size but this is not the problem.
Matt.
Just use a margin-bottom on the top element container and that will push the next item down the page.
Another problem, separate to this, is I am trying to create a table that displays the order information of the customer.
Like this:
First name: INPUT DATA IN BOX HERE
Surname: INPUT DATA IN BOX HERE
Email: INPUT DATA IN BOX HERE
Telephone: INPUT DATA IN BOX HERE
etc.
The problem is how do I extend the width (input area/length of the box) of the boxes?
And the table has
<table cellspacing="0" border="0" valign="top">
but there is too much white space between one line and another (the boxes need to be closer together).
Maybe you would recommend CSS instead…the table is working fine apart from the boxes are not close enough together. Each line has too much spacing. I have tried reducing the font size but this is not the problem.
Matt.
If you are doing a form you don’t need a table and you can do something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
width:350px;
margin:auto;
}
.formtest label {
display:inline-block;
vertical-align:middle;
width:90px;
text-align:right;
margin:10px 0;
}
.formtest input {
width:200px;
margin:10px 0;
vertical-align:middle;
}
.gender label{text-align:left;margin:0}
.gender input{width:auto;margin:0 10px 0 90px}
</style>
</head>
<body>
<form class="formtest" id="form1" method="post" action="">
<fieldset>
<legend>Address Details</legend>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />
<br />
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" />
<br />
<label for="address1">Address 1:</label>
<input type="text" name="address1" id="address1" />
<br />
<label for="address2">Address 2:</label>
<input type="text" name="address2" id="address2" />
<br />
<label for="address3">Address 3:</label>
<input type="text" name="address3" id="address3" />
<br />
<label for="address4">Address 4:</label>
<input type="text" name="address4" id="address4" />
<br />
<label for="city">City:</label>
<input type="text" name="City" id="city" />
<br />
<label for="state">State:</label>
<input type="text" name="state" id="state" />
<br />
<label class="zip" for="zip">Zip:</label>
<input type="text" name="zip" id="zip" />
<br />
<label for="tel">Telephone:</label>
<input type="text" name="tel" id="tel" />
<br />
</fieldset>
<fieldset class="gender">
<legend>Enter Gender</legend>
<input type="radio" name="radio" id="rad1" value="rad1" />
<label for="rad1">Male</label>
<br />
<input type="radio" name="radio" id="rad2" value="rad2" />
<label for="rad2">Female</label>
<br />
<input type="radio" name="radio" id="rad3" value="rad3" />
<label for="rad3">Not sure</label>
<br />
</fieldset>
</form>
</body>
</html>
Again the spacing can be controlled my margins and padding where necessary.
It’s hard to give specific advice without seeing your css and html.