19 replies [Last post]
le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

How to align text to the right of other text? EG 1 part of the text is aligned to the left, the other to the right?

Or to the top middle or bottom of an image?
Thanks,
Leo

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

for the left and right thing

for the left and right thing you'd need to put the text in their own elements (divs, maybe spans. depends on how it handles multilined pieces of text) and float them left and right with their own text-align values.

If the image is inline I believe it's automatically aligned to the bottom of the image. If the image is floated, text is probably aligned to the top. A bit dependent on what kind of markup you use.

As a rule, I never touch anything more sophisticated and delicate than myself

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Thanks for the reply

Thanks for the reply Desdinova!

How do I float an image? I'm not sure if my image is inlined or not! Wud u able to take a look at the site or css plz?
http://homepage.eircom.net/~egoman/leocss1.html

The css file is called leocss1.css

Thanks!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

First of all get yourself

First of all get yourself Firefox and design in this browser. Choose the developer package when asked, then look at your site in firefox (the browser that renders the way it should, Internet Explorer is making things up and is not behaving the way it's supposed to).

Now that you've seen this, you'll understand the site isn't working the way it should. This is where you learn why to validate your HTML (http://validator.w3.org). Validated HTML usually works the way it should, if you encounter any errors or problems with validated HTML, it's a problem you've created yourself, which means it can be fixed.

Afterwards, you validate your CSS. Theres a link on the html validator to the Stylesheet validator.

I suggest you take a look at this first.

Floating elements can be done with
float: left;
or
float: right;

there's no float: center;, keep that in mind.

Floats create their own nifty problems which you'll find sooner or later. But like I said, validate the html and css first Smile and try fixing the page after that. It'll be good for your learning too.

As a rule, I never touch anything more sophisticated and delicate than myself

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Thanks for that man - I'm

Thanks for that man - I'm learning more about css each day!
I'll validate it now and see whats what.
Ppl have told me that it doesnt look right in firefox but I don't know cos I'm using IE!
Can I install firefox and have IE running too? I would have thought 95% of browsers were still IE anyway?

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

I did the validation thing...

Sorry, I am unable to validate this document because on line 17 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication

What does that mean? All thats in line 17 is

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

allright so lets try setting

allright so lets try setting up the header shall we?

Your doctype is ok. I'd recommend setting it to loose for the ease of it, but strict will do for now.

After the doctype, open your HTML followed by your head

within the head we need a title and content-type/charset.

your site title

within the head you can also put the link to your css file like you've done right now. By setting a charset we dont have to let the validator decide which one to use, which means it can't make that mistake. It's required for valid HTML as well.

Use this code I gave and try revalidating Smile
you should come some further

As a rule, I never touch anything more sophisticated and delicate than myself

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

and yes, you can run FF

and yes, you can run FF right next to IE. you could even leave IE as the default browser so you can check things in firefox when you'd desire without even being aware of it being installed.

However, since I've been using it, I've grown attached to it. It really really kicks ass. I disliked it at first, but as I began to realise IE is screwing things up, I got more attached to firefox.

Mozilla should create a light version of firefox, comparable to IE but without the problems. No tabbed browsing, no unexpected interfaces, maybe even a blue icon. It would give them a bigger marketshare because of the ease to switch programs. Nothing to get used to and such. Smile

As a rule, I never touch anything more sophisticated and delicate than myself

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

I'm downloading firefox as I

I'm downloading firefox as I type!
I really do appreciate the help!
would you agree heaps of sites nowadays design the site to suit 800x600 display so they can expand for bigger resolutions?
Such as www.sky.com/news

I want my site to look the same width in all resolutions yet resize appropriately?

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

AHHHHHHHHHHH!!!! My site

AHHHHHHHHHHH!!!!
My site doesn't work AT ALL in firefox... EEK!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You'd best read up on some

You'd best read up on some basic HTML tutorials next Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

I don't see what's wrong

I don't see what's wrong with my HTML?

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

My point exactly as soon

My point exactly Smile

as soon as you start working with the validator you'll learn a lot about the way HTML is constructed. As you begin to recognize your flaws you'll be able to prevent them next time, meaning you'll start coding valid html right from the start, making it more reliable in different browsers.

Good thing about the firefox thing Smile a designer can't live without a decent browser.

As a rule, I never touch anything more sophisticated and delicate than myself

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Thanks for the advice - I

Thanks for the advice - I now have FF.

However, the site doesn't work at all in it! Works more or less fine in IE?

Any suggestions plz?

OH and I validated both html & css pages!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Like I said before, you need

Like I said before, you need to learn HTML properly, from the ground up.

Your code is valid, but that doesn't make it good, or for that matter semantic.

WELCOME TO MY WEB PORTAL

Right Align this text?

A h6 then a h4?

What's wrong with the h1 followed by a h2 tags?

You're also not clearing your floats.

Verschwindende wrote:
  • CSS doesn't make pies

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

ok ok I get ya, I appreciate

ok ok I get ya, I appreciate the help too!

So change stuff to h1 upwards etc as regards the floats? I haven't a clue Smile I really don't!

All I wanted to do was align text to both the left and right of the same line! Oh and align text to an image!

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

ok ok I get ya, I appreciate

ok ok I get ya, I appreciate the help too!

So change stuff to h1 upwards etc as regards the floats? I haven't a clue Smile I really don't!

All I wanted to do was align text to both the left and right of the same line! Oh and align text to an image!

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Ok I get ya -> but not about

Ok I get ya -> but not about the floats! I'll change all the stuff but don't really understand the floats!

I'm seriously considering just nipping together the site using tables in literally 10 minutes - I know ppl constantly say CSS is the way forward but I'm finding it very tricky to grasp!

Thanks again.

le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

Ok I get ya -> but not about

Ok I get ya -> but not about the floats! I'll change all the stuff but don't really understand the floats!

I'm seriously considering just nipping together the site using tables in literally 10 minutes - I know ppl constantly say CSS is the way forward but I'm finding it very tricky to grasp!
Thanks again!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

le007 wrote:Ok I get ya ->

le007 wrote:
Ok I get ya -> but not about the floats! I'll change all the stuff but don't really understand the floats!

Google is your friend and if you'd done a google search on "css floats" you'd have been pointed to
this page
as the top link. My advice is first to go through this tutorial so you do understand how floats work - they are a powerful tool when you understand them.

Quote:

I'm seriously considering just nipping together the site using tables in literally 10 minutes - I know ppl constantly say CSS is the way forward but I'm finding it very tricky to grasp!

CSS is hard to learn if you are unwilling to unlearn what you already think you "know". But then, if you are unwilling to change, you will leave old fashioned, clunky, and inaccessible web sites as your legacy.

You have to learn how to separate markup from layout. HTML or xhtml is for markng up the meaning or organization of the page, not for describing how it should be laid out on tbe browser's window.

CSS is for that. To work it needs valid html or xhtml because it's rules are defined only for valid markup. So you need to learn to write semantic, valid html or xhtml to succeed with CSS.

Yes it takes time to understand how this all fits together, but eventually you are probably going to find that you'll have to take that time if you want to remain in the design business. If so the earlier you start the better.

There is an excellent forum on this site, namely the "How to" forum. Start there - there's some great writing there, none of it by me.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.