css quicky

marc2003 · 9 May 2007 at 20:20

all i want to do is position the delete buttons so they'll be at the same level at the bottom of the bordered div regardless of how big the thumbnail is.

the only css i'm using so far is for the div....

Code:

.thumbnail {
float: left;
width: 220px;
height: 375px;
margin: 0 15px 15px 0;
padding: 5px;
background-color: #363636;
border: solid 2px #FFBD32;
color: #FFBD32;
}

thanks for any help.

Jaffa_Cake · 9 May 2007 at 20:37

Code:

vertical-align: bottom;

Conrad11 · 9 May 2007 at 20:47

Jaffa_Cake said:
Code:

vertical-align: bottom;

What he said.

I haven't checked it works myself, but i am 99% sure it will.

Failing that, have a <p> tag for the image and set a height....the button will then appear in the same place.

marc2003 · 9 May 2007 at 21:01

the vertical align didn't work. i don't know why? this is why i hate css. it never does what you expect.

but the <p> height thing worked a treat. thanks both for the replies.

Jaffa_Cake · 9 May 2007 at 22:33

marc2003 said:
the vertical align didn't work. i don't know why? this is why i hate css. it never does what you expect.

but the <p> height thing worked a treat. thanks both for the replies.

It works for me, arrghh! :eek:

marc2003 · 9 May 2007 at 22:54

well i am a complete noob (is that 1 'o' or 2

) and i might have done it wrong? i don't know. this was the code....

Code:

<div class="thumbnail" align="center">
//textarea & thumbnail code. no divs...
<form....>
<input class="delete"  type="submit" name="delete" value="delete" />
</form>
</div>

Code:

.thumbnail {
float: left;
width: 220px;
height: 375px;
margin: 0 15px 15px 0;
padding: 5px;
background-color: #363636;
border: solid 2px #FFBD32;
color: #FFBD32;
}

input.delete {
vertical-align: bottom;
}

that's right isn't it?

Jaffa_Cake · 9 May 2007 at 23:08

Put the delete input inside a span, and give the span the vertical-align property.

marc2003 · 10 May 2007 at 00:09

hehe. still no joy.

whilst on the subject of css, does anybody know any hacks for styling a file upload box. i found this page

http://www.quirksmode.org/dom/inputfile.html

which says it's pretty much impossible. it does contain a workaround though and yet again i can't interpret other people's css to work for me. ideally i'd like to style my browse button if possible.

sugoi · 10 May 2007 at 02:31

this might sound complicated, but you should understand if you know enough CSS. There's probably an easier solution but this is what i might have done if i didn't play around with it long enough.

Put all the content of the right box in a DIV with a fix height - which is in the table/div (depending on what you did - with the border), excluding the delete button, put the delete button in a div and give it a margin-top property. This would work... assuming your form titles, form fields and your maximum thumbnail height is the same.

marc2003 · 10 May 2007 at 09:30

sugoi said:
if you know enough CSS.

i don't know any hence my original post.

i like how easy it is customise the appearance but layout confuses the hell out of me.

There's probably an easier solution

yup, craig posted it above. i've already mentioned it works fine putting the image inside a <p> of a fixed height.

and there is no "right" box. :confused:

i'm using the same code inside a loop to display each one. i only showed 2 in my opening post to illustrate the point about the buttons.

toosepin · 10 May 2007 at 16:03

Or even simpler:

form {
position: relative;
height: 200px;
}

input.delete {
position: absolute;
bottom: 0;
left: 0;
}

marc2003 · 10 May 2007 at 16:40

hehe, we're going round in circles here. how is that simpler than

Code:

<p style="height: 200px"><img src="" /></p>
<input type="submit".....

and nothing in the external css file?

Conrad11 · 10 May 2007 at 17:53

marc2003 said:
hehe, we're going round in circles here. how is that simpler than

Code:

<p style="height: 200px"><img src="" /></p> <input type="submit".....

and nothing in the external css file?

It depends what you are used to. I try to avoid all the positioning properties in CSS, but some people love it use them, so you just have to learn both if you want to be able to read other peoples code.

....oh and my name is not Craig btw

EDIT:

All the technique is doing in the link you gave is putting an overlay over the file input and using javascript to copy over the text from the file input to the overlay box.

To be honest, I wouldn't bother.

toosepin · 10 May 2007 at 18:42

marc2003 said:
hehe, we're going round in circles here. how is that simpler than

Code:

<p style="height: 200px"><img src="" /></p> <input type="submit".....

and nothing in the external css file?

But is that valid?

marc2003 · 10 May 2007 at 19:27

Conrad11 said:
....oh and my name is not Craig btw

oops. sorry. i got you mixed up with craig321...

and i've also given up on the file dialog thing. it doesn't look too bad as it is.

toosepin said:
But is that valid?

and yes it's valid, why wouldn't it be? it's still css, just inline.

Jaffa_Cake · 10 May 2007 at 19:31

marc2003 said:
oops. sorry. i got you mixed up with craig321...

and i've also given up on the file dialog thing. it doesn't look too bad as it is.

and yes it's valid, why wouldn't it be? it's still css, just inline.

Have you tested display on different resolutions inc wide screen? Should always do that when using fixed sizes.

marc2003 · 10 May 2007 at 19:51

Jaffa_Cake said:
Have you tested display on different resolutions inc wide screen? Should always do that when using fixed sizes.

yup.

yes i know it's bland. i haven't a single ounce of creativity.

Jaffa_Cake · 10 May 2007 at 20:50

marc2003 said:
yup.

yes i know it's bland. i haven't a single ounce of creativity.

I think it looks quite good

Would be better if you added a nice header and some outlines with some nice colour contrasts