Forum Moderators: not2easy
I am trying to align on the top right side of my website the following newsletter box and can't get it aligned on the right and on the same line/level as the text on the left ?
<link href="NL-style.css" rel="stylesheet" type="text/css">
<form name="form1" method="post" action="NLprocess.php" class="bk">
<fieldset>
<p align="center" class="txt">Subscribe E-mail:<br>
<input name="email" type="text" size="12" class="txtbox">
<input type="submit" name="Submit" value="Go" class="button">
<br>
</fieldset>
</form>
Can you tell me what line of code I am missing to first align right, then on the same line as my text on the left and finally where to put it in this code below ?
Thank you,
I'd float the bk class right, suppose you've done that. I'd put it in front of any content I'd like on the left.
Check margins and padding on the elements you leave left, as well as those in the form. Some reset code like:
* {
margin:0;
padding:0;
}
<div id="wrap">
<br>
<h1><span style="color:#FFFFFF;font-family: Futura bk;font-size:17px;letter-spacing:5px;" href="'. URL_ROOT .'/" onclick="#*$!.Page.Open('. $homepage_oid .'); return false;">MY TEXT</span><br/>
<span style="color:#FFFFFF;font-family: Futura bk;font-size:12px;letter-spacing:2px">MORE TEXT HERE</h1></span>
<div id="lang"><a href="'. ROOT .'/"><img src="'. DIR_PIC .'/flag_en.png" alt="EN" /></a> <a href="'. ROOT .'/fr"><img src="'. DIR_PIC .'/flag_fr.png" alt="FR" /></a></div>
<!-- Main menu -->
your html: it won't validate, cause it's not "well structured". E.g:
<h1>....<span>...</h1></span>isn't allowed and makes the browsers guess what you meant, it's easier to nest them properly yourself. Similarly, a span doesn;t have a "href" attribute as far as I know. And why not use a plain link instead of javascript ?
Font-family: you should quote the fonts containing a space in their name and you should give a list of fonts for thos enot having the firt font (e.g. my mac doesn't have "futura bk", it's got futura and a truckload of other snas serif fonts.
font-family: "futura bk", futura, arial, helvetica, sanswill do much better. You can loose a few in there, but don't take out the generic sans at the end.
I still don't see how you put it together, but perhaps that's the question you're having.
So let's look at this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.bk {
float:right;
}
.bk p {
text-align:center;
}
h1, h2, h3, h4, h5, h6 {
font-family: "futura bk", futura, arial, helvetica, sans;
text-transform:uppercase;
}
h1 {
font-size:17px;
}
h2 {
font-size:12px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="bk">
<form name="form1" method="post" action="NLprocess.php" class="bk">
<fieldset>
<p>
<label>
Subscribe E-mail:<br />
<input name="email" type="text" size="12" />
</label>
<input type="submit" name="Submit" value="Go" />
</p>
</fieldset>
</form>
</div>
<h1>My text</h1>
<h2>more text here</h2>
<p>Ipso Lorem</p>
</div>
</body>
</html>
Is this somewhat more in the direction of what you were seeking to achieve (I've left of white text as I had that as background).
If you want all text to use the futura fontface, you can move the family declaration to the "*" selector. I only looked at it in firefox, safari and opera so far (IE messes with one's head).
After I'd get it right in those 3, I'd move to IE6 and IE7 independently and fix whatever they have as issues in conditional comments.
