homepage Welcome to WebmasterWorld Guest from 54.226.235.222
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
&nbsp alignment issues
nbsp html css
ksugam




msg:3566005
 6:10 pm on Feb 4, 2008 (gmt 0)

Hello all,
I am trying to design a header for my webpage, which has image on left side and two text boxes(one below the other) on the right side.
I tried using a table for this....I have used several &nbsp to place the two text boxes on the right side. Here is my code:

<table>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<a href="menu.php"><img src="logo.jpg" border="0"></img></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
</td>
<td class="right">
Year:
<INPUT type="text" name=year size='5'><br>
Month:
<INPUT type="text" name=month size='5'>
</form>
</td>
</tr>
</table>

The problem with &nbsp is, the alignment is not consistent. It totally depends on the screen size, browser...
Is there any way i can replace this nbsp with something more reliable? If anyone suggests me using CSS, can you even show me how to do it as i am new to this

Thanks!

[edited by: tedster at 5:09 am (utc) on Mar. 15, 2008]

 

Trace




msg:3566021
 6:37 pm on Feb 4, 2008 (gmt 0)

I think you're looking for something like this;

<style type="text/css">
.leftSide{
width:80%;
float:left;
padding-left:40px;
}
.rightSide{
width:20%;
float:left;
}
.rightSide label{
width:50px;
}
</style>

<div class="leftSide">
<a href="menu.php"><img src="logo.jpg" border="0"></img></a>
</div>

<div class="rightSide">
<form>
<label>Year:</label> <INPUT type="text" name=year size='5'><br>
<label>Month:</label> <INPUT type="text" name=month size='5'>
</form>
</div>


ksugam




msg:3566049
 7:18 pm on Feb 4, 2008 (gmt 0)

Great man! this is what i was looking for....
Now i have a new issue....

after the div tags for the header, i have a table which displays the links on the center of the page immediately after the div tags. It looks something like this:

Link1 ¦ Link2 ¦ Link3 ¦ Link4

I have this in <tr> tag with &nbsp. After using the div code tht u mentioned, the table alignment is no more in center, it shifts to left....
also, the div code works fine in IE but it doesnt work on firefox. the alignemnt in Firefox is completely messed up...

Trace




msg:3566171
 9:51 pm on Feb 4, 2008 (gmt 0)

I'm sorry, I tend to type without actually thinking it through. Here's an update version and a little more of an explanation;

<style type="text/css">
.clear{
clear: both;
line-height: 0;
height: 0;
font-size: 0;
}
.leftSide{
width:78%;
float:left;
border:1px solid red;
}
.leftSide img{
margin-left:45px;
}
.rightSide{
width:18%;
float:left;
border:1px solid green;
}
.rightSide label{
display:block;
float:left;
width:50px;
}
.links-container{
border:1px solid blue;
width:100%;
text-align:center;
}
.links{
list-style:none;
border:1px solid yellow;
width:510px;
padding:0;
margin:0;
}
.links li{
display:block;
float:left;
padding:0 30px;
border-right:1px solid #aaa;
}
.links .links-last{
border-right:none;
}
</style>

<div class="leftSide">
<a href="menu.php"><img src="logo.jpg" border="0"></img></a>
</div>

<div class="rightSide">
<form>
<label>Year:</label> <INPUT type="text" name=year size='5'><br>
<label>Month:</label> <INPUT type="text" name=month size='5'>
</form>
</div>

<div class="clear"></div>

<div class="links-container">
<ol class="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li class="links-last">Link 5</li>
</ol>
<div class="clear"></div>
</div>

Notice in the first classes, leftSide and rightSide, I reduced the size to accommodate for the borders.

I added the margin to the img instead of the DIV. Should fix the FX issue you were having.

I added some links in a list as an example of what you could do.

This might not be perfect but it should demonstrate what you can do without tables.

I have no way of testing this in Firefox (for reasons I'd rather not get into) so I hope it works for ya.

Again, this really is only an example and can probably be improved upon greatly. I suggest you head over to [w3schools.com...] and start checking out some of the reference materials.

Good luck!

ksugam




msg:3566198
 10:11 pm on Feb 4, 2008 (gmt 0)

Wonderful....Thanks for correctly understanding my problem and making me understand....
Thanks a lot!

sunzon




msg:3600555
 2:22 pm on Mar 14, 2008 (gmt 0)

The easy way is to save a blank image, called say "none.jpg"
You then place this image whereever you want to force height or width space.

In your example:
<table><tr><td>
<img src="none.jpg" border="0" width="20" height="1" alt ="spacer">
<a href="menu.php"><img src="logo.jpg" border="0"></a>
<img src="none.jpg" border="0" width="100" height="1" alt ="spacer">
</td>

You select the width size to whatever space you seek.
You can achieve the same for height space (instead of a bunch of <br> ) like this:
<img src="none.jpg" border="0" width="1" height="100" alt ="spacer">

Trace




msg:3600846
 6:32 pm on Mar 14, 2008 (gmt 0)

That's the way all websites did it 10 years ago. Today we try to keep layout and formatting separate from content.

sunzon




msg:3601258
 4:48 am on Mar 15, 2008 (gmt 0)

Fair point Trace, but maybe a little overkill for the simple situation. Some people (still... or like to...or are more comfortable to) use tables.
I meant to suggest a quick fix easy alternative for a simple situation using tables.
10 years ago is 1998, on that scale using 50 or so &nbsp; to space would be more recent ;)

Trace




msg:3602924
 2:37 pm on Mar 17, 2008 (gmt 0)

Don't want to be too nit-picky, but my 10 year statement is fairly accurate.

1998 is when CSS2 was published - so up until that point we had very little to work with as far as tools for page layouts. I think that was the turning point where more and more people started to separate the content from the structure - so although many websites took a while to catch up, 1998 is when it all started to change.

Yeah, getting a little off topic.

sunzon




msg:3603465
 10:41 pm on Mar 17, 2008 (gmt 0)

Well Trace, why not practice what you preach?
Your own website (mentioned in your profile) is all tables and I noted includes this:
<img src="i/spacer.gif" width="10" height="1">
Your own site is outdated by 10 years?
I don't want to be too nit-picky either, btw.
But I am on topic.
Tables still have their utility, some solutions with CSS create more complexity than needed.

Receptional Andy




msg:3603476
 10:54 pm on Mar 17, 2008 (gmt 0)

Ah, Ad Hominem Tu Quoque...

sunzon: even if Trace was a callous hypocrite who went out of his way to make complex table-based solutions to simple CSS problems, that's no way to judge whether his opinion is any more valid ;)

g1smd




msg:3603482
 10:59 pm on Mar 17, 2008 (gmt 0)

Once you make the transition to CSS you'll never go back to the various ancient &nbsp and spacer.gif kludges from yesteryear.

Mark up all your content as headings, paragraphs, lists, tables, and forms, and then enjoy site-wide style-control from one external CSS file.

sunzon




msg:3603532
 12:02 am on Mar 18, 2008 (gmt 0)

Ad hominem Tu Quoque, a valid point, I have to agree (gee I liked that one.....very highbrow......).

Given the problem posed, I still think a css answer is overkill. Consider the next problem the submitter posed trying to apply the css way (centering some links), an elaborate solution for a simple scenario (but I agree you can't fault effort to respond).

Hey I do believe in CSS, I use it extensively ;) also AP divs, but I juggle between tables and CSS according to need, oversight, and simplicity. If you go all the way with CSS, you can get into difficult situations with varying content size multi columns (like needing Inman) requiring coding for different browsers, where part coding using tables fit the need easily.
It's not because a technique exists that it should be used. The end justifies the means, the techniques don't justify themselves per se.
I argue for using both tables and CSS as appropriate for the scenario, in todays environment (an unideal world of standards). Further, I also argue for simplicity.

g1smd




msg:3603561
 12:57 am on Mar 18, 2008 (gmt 0)

I haven't used <br> or &nbsp; in years.

I find it much easier to just add margin-left:10px or whatever to the stylesheet.

sunzon




msg:3603598
 1:41 am on Mar 18, 2008 (gmt 0)

Hey g1smd, fyg there are some shameless "&nbsp;" and "<br>" on the google.com website, but none on msn.com, so microsoft and some other persons are way ahead it seems ;) .

At the end of the day, people are happy to have an easily understandable workable solution to a simple problem. Even so I agree there is good sense future in separating format and layout from content, and guiding people in that direction is commendable, as indeed <trace> did with excellence.

Trace




msg:3603979
 1:38 pm on Mar 18, 2008 (gmt 0)

Well Trace, why not practice what you preach?
Your own website (mentioned in your profile) is all tables and I noted includes this:
<img src="i/spacer.gif" width="10" height="1">

That site, which in fact has not been touched in many many years, also does not even come close to validating. It doesn't mean that I will give people bad advice and tell them to not worry about having valid code.

With all this non-sense aside, ksugam appears to be fairly new to this game and I believe it's good that he learns the proper way right from the get-go and not pick up any bad habits - the same bad habits a lot of us are now trying desperately to forget.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved