Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > aligning with CSS

Reply
Thread Tools

aligning with CSS

 
 
Gernot Frisch
Guest
Posts: n/a
 
      03-16-2006



No clue.
- I want to align the red, green, blue boxes in one line
- red,green,blue must be 45px high
- red (center) must be as wide as possible
- yellow must start exactly below the line
- yellow must be left aligned with red one.


Please, please help!


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<html>
<head>
<style>

/* MAIN AREA*/
.X1{
display:inline;
background-color: green;
margin-left: 32px;
width: 12px;
height: 45px;
}

.X2{
display:inline;
background-color: red;
width: 90%;
height: 45px;
}

.X3{
display:inline;
background-color: blue;
width: 12px;
height: 45px;
}
.Y2{
width:90%;
background-color: yellow;
margin-top: 45px;
margin-left: 44px;
}

</style>
</head>
<body>

<div class="X1">&nbsp;</div>
<div class="X2">Header</div>
<div class="X3">&nbsp;</div>
<div class="Y2">Her is some long text</div>

</body></html>


 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      03-16-2006
With neither quill nor qualm, Gernot Frisch quothed:

>
>
>
> No clue.
> - I want to align the red, green, blue boxes in one line
> - red,green,blue must be 45px high
> - red (center) must be as wide as possible
> - yellow must start exactly below the line
> - yellow must be left aligned with red one.
>
>
> Please, please help!


Use a div, background:red; float inner sized red div left, blue right.

Another div below, yellow background, body-background inner divs similar
to above.

In some browsers divs may not show unless they have content.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
 
 
 
Gernot Frisch
Guest
Posts: n/a
 
      03-16-2006

>> No clue.
>> - I want to align the red, green, blue boxes in one line
>> - red,green,blue must be 45px high
>> - red (center) must be as wide as possible
>> - yellow must start exactly below the line
>> - yellow must be left aligned with red one.
>>
>>
>> Please, please help!

>
> Use a div, background:red; float inner sized red div left, blue
> right.
>
> Another div below, yellow background, body-background inner divs
> similar
> to above.


I'm totally new to css/html and I don't understand everything you
said. Can you give an example?


 
Reply With Quote
 
Good Man
Guest
Posts: n/a
 
      03-16-2006
"Gernot Frisch" <(E-Mail Removed)> wrote in news:47ti6eFh8kptU1
@individual.net:

>
>>> No clue.
>>> - I want to align the red, green, blue boxes in one line
>>> - red,green,blue must be 45px high
>>> - red (center) must be as wide as possible
>>> - yellow must start exactly below the line
>>> - yellow must be left aligned with red one.
>>>
>>>
>>> Please, please help!

>>
>> Use a div, background:red; float inner sized red div left, blue
>> right.
>>
>> Another div below, yellow background, body-background inner divs
>> similar
>> to above.

>
> I'm totally new to css/html and I don't understand everything you
> said. Can you give an example?


i hate to come in sounding snarky, but have you considered buying a book or
doing some online tutorials? The best way to learn is by figuring things
out. Nobody is going to do your work for you.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-17-2006
In article <Xns9788ABF29B742sonicyouth@216.196.97.131>,
Good Man <(E-Mail Removed)> wrote:

> i hate to come in sounding snarky, but have you considered buying a book or
> doing some online tutorials? The best way to learn is by figuring things
> out. Nobody is going to do your work for you.


Well, I dunno, you could say something like this to be nicer:

> Please, please help!
>


> /* MAIN AREA*/
> .X1{
> display:inline;
> background-color: green;
> margin-left: 32px;
> width: 12px;
> height: 45px;
> }
>
> .X2{
> display:inline;
> background-color: red;
> width: 90%;
> height: 45px;
> }
>
> .X3{
> display:inline;


You can't do it this way. Ask yourself what the 90% width of the
X2 class could be a percentage of?

Look at a series of blocks and css to get as close to what you
want as possible: here is a little rough unfinished start, ask
about how to improve it or revise it so it actually does what you
want as long as it is a sensible thing to want... I give a simple
fixed width container example, that looks closest to what you
want. Fluid layouts are trickier but much more worthwhile in the
end. Have a go with different widths, auto or percentages.

http://dorayme.150m.com/test/alignWithCss.html

Post the results of your efforts in a URL and try not to use a
miserable lowdown cheapskate free host like me...

Mr. Flavell is going to help you, but he needs to see you try
harder. He is like that. Stern and Scottish, you see...

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Please help, CSS aligning, image thumbnail index ... TheStonge HTML 9 05-24-2004 07:08 PM
CSS aligning two things on one line with one left and one right news.frontiernet.net HTML 6 04-16-2004 02:44 AM
aligning bg images in css - opera and ie issue badstyle HTML 4 12-18-2003 11:11 AM
Re: (CSS) Aligning signed numbers in cells Jukka K. Korpela HTML 0 08-10-2003 06:24 AM
big CSS-trouble! aligning in listitem! Sebastian Fey HTML 6 07-17-2003 12:44 PM



Advertisments