Zophar's Message Domain

Go Back   Zophar's Message Domain > General Chat > Talk of the Town

Reply
 
Thread Tools Display Modes
Old 07-08-2004, 08:13 PM   #1
SwampGas
Senior Member
 
Join Date: Apr 2000
Posts: 6,915
Default CSS Help

I give up. I need to let go of my 1995 ideals and learn CSS.

I learn best by example...and then applying it to what I'm doing...so here goes.

I have an image, 2 text inputs, and then a bar with links. Normally, I'd create a table with 2 rows. The first row has 2 cells...one aligned left, one aligned right. The image is at the top on the left, there are 2 inputs on the right. The second row has a single cell with a colspan of 2 and the text is aligned in the center. Wham, bam, moneygram...the header of a web page.

With CSS, I don't understand how to align things. I have the image on the page, the inputs, and the link bar...they're all correct....but I can't seem to position them. How do the 'position', 'top', 'bottom', et al work?

<img src=smilies/banghead.gif>

<P ID="signature"><marquee direction=right scrollamount=10></marquee></P>
SwampGas is offline   Reply With Quote
Old 07-08-2004, 08:25 PM   #2
cipher
Senior Member
 
Join Date: May 2001
Posts: 1,034
Default Re: CSS Help


The position attribute tells the browser how to render the element. Absolute places the element at a specified position and leaves it there. Relative designates the position of the element as being relative to where it would normally be rendered on the page. Fixed designates that the element is redered relative to a fixed point on the screen, usualy the top-left corner.

Top and Bottom attributes specify the vertical position of the top and bottom of the element. Generally this is specified in pixels, but any measurement can be used that's available (px, pt, em, etc.)

To take a crack at what you're describing, I'd most likely do something like the following.

Give a link to the page using the method you described, and then a link to the page you're trying with CSS. It'll help visualize better.

<P ID="signature">-----
ciphz0r</P>
cipher is offline   Reply With Quote
Old 07-08-2004, 08:38 PM   #3
SwampGas
Senior Member
 
Join Date: Apr 2000
Posts: 6,915
Default Re: CSS Help

You totally spoke greek to me.

The page is being done as part of my job...I can't hand it out. It's not hard to visualize. To do it with tables, I'd do the following:

<pre>
< table width=100%>
< tr>
< td align=left >< img src='...'>< /td >
< td align=right > ... < /td >
< /tr >
< tr >
< td colspan=2 align=center > ... < /td >
< /tr >
< /table >
</pre>

<P ID="signature"><marquee direction=right scrollamount=10></marquee></P>
SwampGas is offline   Reply With Quote
Old 07-08-2004, 11:44 PM   #4
Ugly Joe
Senior Member
 
Ugly Joe's Avatar
 
Join Date: Dec 2003
Posts: 1,461
Default Re: CSS Help

This is sloppy, but it's kinda what you described. I'm no CSS guru, I usually just hack at it until it looks like what I want.

&lt;div style="width: 100%; height: 200px;"&gt;
&lt;img src="" width=200 height=200 style="position: absolute;" /&gt;
&lt;form style="width: 100%; text-align: right;"&gt;
&lt;input type="text" /&gt;&lt;br /&gt;
&lt;input type="text" /&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;div style="width: 100%; text-align: center;"&gt;one two three&lt;/div&gt;

<P ID="signature"></P>
__________________
Ugly Joe is offline   Reply With Quote
Old 07-09-2004, 03:37 PM   #5
SwampGas
Senior Member
 
Join Date: Apr 2000
Posts: 6,915
Default Re: CSS Help

You the man. The positioning was wrong in mine.

Now...below that...I have to create 4 areas: top right, top left, bottom right, bottom left. How do I position those boxes? Do I set the position as 'relative' and use the top/bottom/right/left directors?

<P ID="signature"><marquee direction=right scrollamount=10></marquee></P>
SwampGas is offline   Reply With Quote
Old 07-09-2004, 03:57 PM   #6
Ugly Joe
Senior Member
 
Ugly Joe's Avatar
 
Join Date: Dec 2003
Posts: 1,461
Default Re: CSS Help

Not entirely sure what you need, but this sounds like it:

&lt;div style="float: left;"&gt;Upper-Left&lt;/div&gt;
&lt;div style="float: right;"&gt;Upper-Right&lt;/div&gt;
&lt;div style="float: left; clear: left;"&gt;Lower-Left&lt;/div&gt;
&lt;div style="float: right; clear: right;"&gt;Lower-Right&lt;/div&gt;

<P ID="signature"></P>
__________________
Ugly Joe is offline   Reply With Quote
Old 07-09-2004, 04:24 PM   #7
SwampGas
Senior Member
 
Join Date: Apr 2000
Posts: 6,915
Default Re: CSS Help

That puts them on the left and right correctly, but they're not side-by-side. They're below each other.


<P ID="signature"><marquee direction=right scrollamount=10></marquee></P>
SwampGas is offline   Reply With Quote
Old 07-09-2004, 04:25 PM   #8
JCJones86
Senior Member
 
Join Date: May 2003
Posts: 599
Default Re: CSS Help

Looks like UglyJoe's got this down for you... But here's a trick I learned on my own a few years back.

If you have a certain layout written with HTML and CSS that you're going to implement into every file, you can do this via JavaScript and save some bandwidth and cut down on the file size for all those documents. Just have a *.js file execute from all your *.html files that inserts your default layout source into the files. Of course, you can always rely on PHP or the sort to do it, but I found that relies heavily on the server running it. If you use a *.js file, then the browser will cache that layout and voila, no more loading every time somebody clicks a link!

<P ID="signature"></P>
JCJones86 is offline   Reply With Quote
Old 07-09-2004, 04:27 PM   #9
Ugly Joe
Senior Member
 
Ugly Joe's Avatar
 
Join Date: Dec 2003
Posts: 1,461
Default Re: CSS Help

> That puts them on the left and right correctly, but they're
> not side-by-side. They're below each other.
>
I'm not sure what you're trying to do then. Can you give an example using tables?

<P ID="signature"></P>
__________________
Ugly Joe is offline   Reply With Quote
Old 07-09-2004, 05:43 PM   #10
SwampGas
Senior Member
 
Join Date: Apr 2000
Posts: 6,915
Default Re: CSS Help

<pre>
< table >
< tr >
< td width=40% > ... < /td >
< td width=60% > ... < /td >
< /tr >
< tr >
< td width=40% > ... < /td >
< td width=60% > ... < /td >
< /table >
</pre>

Obviously the vertical distances will vary depending on content and from DIVs within those containers, which can't happen with tables unless you embed...but it's basically just 4 areas.

<P ID="signature"><marquee direction=right scrollamount=10></marquee></P>
SwampGas is offline   Reply With Quote
Reply

Thread Tools
Display Modes

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

Forum Jump


All times are GMT. The time now is 09:22 AM.

Contact Us - Zophar's Domain - Archive - Top

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.