PDA

View Full Version : CSS Help

SwampGas
07-08-2004, 09:13 PM
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>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
cipher
07-08-2004, 09:25 PM
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>
SwampGas
07-08-2004, 09:38 PM
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>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
Ugly Joe
07-09-2004, 12:44 AM
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>
SwampGas
07-09-2004, 04:37 PM
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>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
Ugly Joe
07-09-2004, 04:57 PM
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>
SwampGas
07-09-2004, 05:24 PM
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>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
JCJones86
07-09-2004, 05:25 PM
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>
Ugly Joe
07-09-2004, 05:27 PM
> 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>
SwampGas
07-09-2004, 06:43 PM
<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>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
Ugly Joe
07-09-2004, 06:56 PM
Oh, okay. The 'float' attribute will try and position to the left or right, but will jump to the next line if it can't fit. I didn't try my previous chunk of code with lots of content, so it looked right for me. If you define widths for the divs, it should work (unless you have an image or some such that makes one or the other larger than it should be). I also had to change one of the 'clear' attributes (this one says that when it floats, it wants to have no other content to its left and/or right, depending on what it's set to). Try this:

&lt;div style="float: left; width: 40%;"&gt;Upper-Left&lt;/div&gt;
&lt;div style="float: right; width: 60%"&gt;Upper-Right&lt;/div&gt;
&lt;div style="float: left; clear: both; width: 40%"&gt;Lower-Left&lt;/div&gt;
&lt;div style="float: right; width: 60%"&gt;Lower-Right&lt;/div&gt;

<P ID="signature"></P>
SwampGas
07-09-2004, 07:19 PM
Didn't change anything.

<P ID="signature"><marquee direction=right scrollamount=10>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
cipher
07-09-2004, 07:39 PM
Did this really fast, and it looks right in Firefox. Should try IE I guess, but eh.

Yep, looks good in IE too.

I hate your POS boards, btw. Keep fucking up & codes.

Look two posts down for HTML.

<P ID="signature">-----
ciphz0r</p><P ID="edit"><FONT class="small">Edited by cipher on 07/09/04 02:43 PM.</FONT></P>
Ugly Joe
07-09-2004, 07:41 PM
Odd. Ok, floats don't seem to be working for you. Give this a try:

&lt;div style="position: relative; height: 100%;"&gt;
&lt;div style="width: 40%; position: absolute; left: 0px; top:0px;"&gt;top-left&lt;/div&gt;
&lt;div style="width: 60%; position: absolute; right: 0px; top: 0px;"&gt;top-right&lt;/div&gt;
&lt;div style="width: 40%; position: absolute; left: 0px; bottom: 0px;"&gt;bottom-left&lt;/div&gt;
&lt;div style="width: 60%; position: absolute; right: 0px; bottom: 0px;"&gt;bottom-left&lt;/div&gt;
&lt;/div&gt;

<P ID="signature"></P>
cipher
07-09-2004, 07:42 PM
Fuck it, repost.

&lt;html&gt;
&lt;style&gt;

div.top { background: blue; }
div.mid { background: red; text-align: center; }

div.tr { background: grey; float: left; width: 50%; }
div.tl { background: yellow; float: right; width: 50%; }
div.br { background: pink; float: left; width: 50%; }
div.bl { background: purple; float: right; width: 50%; }

span.header { background: green; vertical-align: middle; }

img.header { vertical-align: middle; width: 200px; height: 50px }

&lt;/style&gt;
&lt;body&gt;

&lt;div class="top"&gt;
&lt;img class="header"&gt;
&lt;span class="header"&gt;OMG THIS IS TEXT IN THE HEADER!!! :D&lt;/span&gt;
&lt;/div&gt;

&lt;div class="mid"&gt;
OMG CENTER
&lt;/div&gt;

&lt;div class="tr"&gt;Top Left&lt;/div&gt;
&lt;div class="tl"&gt;Top Right&lt;/div&gt;
&lt;div class="br"&gt;Bottom Left &lt;/div&gt;
&lt;div class="bl"&gt;Bottom Right&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;


<P ID="signature">-----
ciphz0r</P>
SwampGas
07-09-2004, 08:09 PM
Now it's at the top of the page covering the header that we just got working.

<P ID="signature"><marquee direction=right scrollamount=10>http://www.zophar.net/personal/swampgas/hsrun.gif</marquee></P>
Ugly Joe
07-09-2004, 08:17 PM
> Now it's at the top of the page covering the header that we
> just got working.
>
Hmm...this is what I've got:
<a href=http://www.ximwix.net/storage/test1.htm>http://www.ximwix.net/storage/test1.htm</a>

That works for me in FireFox and in IE, except that it forces scrollbars all the time (which i could fix in FireFox, but not IE). If you know the exact dimensions of the header or anything else, this could be a lot easier. If not, I am fresh out of ideas.

<P ID="signature"></P><P ID="edit"><FONT class="small">Edited by Ugly Joe on 07/09/04 03:19 PM.</FONT></P>
Alevice
07-09-2004, 09:51 PM
> Didn't change anything.
>
Not sure if it will work, but try adding 'display: inline;'. There is a chances each is treated like a block (just like a div and paragraph do) rather than an inline element.

Haven't tried the whole code yet.

<P ID="signature">_-|-_</P>