Change Div Size Options

[FrostTaco]

I see them now but they are itsy bitsy. The size doesn't take for some reason. But as sais, that DIV is the height you want it to be in the browsers I've checked in.

Have you tried taking out the display: inline; Also, the pictures are staying to the left, when their supposed to be centered, and when i try(with display:inline; in it), its 130 pixels no matter what i change the height to.

This post has been edited by FrostTaco: May 4 2016, 05:53 PM

[FrostTaco]

Any help?

EDIT: I just changed the code alot so my css looks like this:

CODE

input.zoomin {
        border-radius: 10px;
        border: 2px solid gray;
        height: 100px;
        width: 100px;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
    } input.zoomin:hover { width: 150px; height: 150px; }

And i removed the entire div, all I need now is the images(inputs) centered.

CODE

<div class="header" align="center">
                    <ul>
                        <li>
                            <input type="image" src="images/giveaways/main/MirrorMoonEP.jpg" alt="Submit" onClick="parent.location='giveaway.php?id=MGEw0/'" data-toggle="tooltip" title="Mirror Moon EP And Starwars" class="zoomin">
                        </li>
                        <li>
                            <input type="image" src="images/giveaways/main/AvoidSensoryOverload.jpg" alt="Submit" onClick="parent.location='giveaway.php?id=UTkmH/'" data-toggle="tooltip" title="MirrorMoon EP, OutCast 1.1, Avoid Sensory Overload" class="zoomin">
                        </li>
                    </ul>

Dont know why they arent centered?

This post has been edited by FrostTaco: May 8 2016, 06:54 PM

[pandy]

I don't know what I should paste together with what anymore.

[FrostTaco]

I don't know what I should paste together with what anymore.

Do you know how to center a list(<ul>) with image inputs inside?

[Frederiek]

Centering can be done with margin: 0 auto;

[pandy]

Can't you just link to the page?

[FrostTaco]

Can't you just link to the page?

http://corndog.corticalcafe.com/index.php I apologize if the page is different at all from what I posted, just been trying to fix it(I don't think I've changed it since i last posted).

[FrostTaco]

Any help?

[Frederiek]

The UL doesn't have a width specified, so is 100% of the window.

Instead of using the attribute align="center" on the .header div, set a width to the CSS of that div. You already set the margin to "0 auto" to center it.

Only then, your donate button will decrease in size.

I'm not sure if you still have this problem with the div height size? I don't see any reference to a height of a div in the page. I think it is no longer relevant. Or is it?

[FrostTaco]

The UL doesn't have a width specified, so is 100% of the window.

Instead of using the attribute align="center" on the .header div, set a width to the CSS of that div. You already set the margin to "0 auto" to center it.

Only then, your donate button will decrease in size.

I'm not sure if you still have this problem with the div height size? I don't see any reference to a height of a div in the page. I think it is no longer relevant. Or is it?

Sorry if I didnt post this already, but I took out the div that made it way to tall, and now its right sized. Also, what you said made everything move to the left...

[Frederiek]

All CSS declarations for #body div.header (line 342) are crossed out when inspecting the element. The declarations for #body.home div.header (line 155) are taken in account instead.

Seems like a specificity issue to me.
https://css-tricks.com/specifics-on-css-specificity/
https://www.smashingmagazine.com/2007/07/cs...ou-should-know/
https://stuffandnonsense.co.uk/archives/css...icity_wars.html (seems like an archived page, no styling, but still accurate in content)

But you still need to set a width other than 100% to div.header for the margin centering to work.

[FrostTaco]

All CSS declarations for #body div.header (line 342) are crossed out when inspecting the element. The declarations for #body.home div.header (line 155) are taken in account instead.

Seems like a specificity issue to me.
https://css-tricks.com/specifics-on-css-specificity/
https://www.smashingmagazine.com/2007/07/cs...ou-should-know/
https://stuffandnonsense.co.uk/archives/css...icity_wars.html (seems like an archived page, no styling, but still accurate in content)

But you still need to set a width other than 100% to div.header for the margin centering to work.

Ok thanks, I'm using a template I got which came with its css code, no clue what it was using

EDIT: Changing the width moved everything inwards, but centered nothing. Trying out text align.
Another edit nope, text align wont work.

Also, I just realized that it is using the css its supposed to, the normal header was for something higher in the page.

This post has been edited by FrostTaco: May 12 2016, 06:44 AM

[Frederiek]

text-align: center; does work for the text in .header.

Now there's only one input element left in the UL list, so the float on LI no longer makes sense.
I commented the float on #body div ul li (line 470 of styles.css) and changed the margin from 0 10px; to 0 auto; and that centered that too.

I'm not sure why you use a list for just one LI.
And even less why you use an input element just to show an image.

Besides, the image is distorted at the given size of 100 x 100px (set on input.zoomin), as its original size is 460 x 215px. Are you sure you want it to look like it does?

BTW, what did the template look like? URL?
Did you change much of it?

This post has been edited by Frederiek: May 12 2016, 11:32 AM

[FrostTaco]

text-align: center; does work for the text in .header.

Now there's only one input element left in the UL list, so the float on LI no longer makes sense.
I commented the float on #body div ul li (line 470 of styles.css) and changed the margin from 0 10px; to 0 auto; and that centered that too.

I'm not sure why you use a list for just one LI.
And even less why you use an input element just to show an image.

Besides, the image is distorted at the given size of 100 x 100px (set on input.zoomin), as its original size is 460 x 215px. Are you sure you want it to look like it does?

BTW, what did the template look like? URL?
Did you change much of it?

I use a list as I am constantly adding and taking away inputs.
The original was https://freewebsitetemplates.com/preview/fr...shop/index.html
The image distortion is fine.
I use input as, the images are working as buttons, some of them will go to a link, others will do other things.
I'm so dumb, I took out line 470 and it works. Dang templates.

Thanks alot, problem solved for now!

EDIT: Problem not solved, if I put multiple items in the list, they stack, instead of going next to each other.

This post has been edited by FrostTaco: May 12 2016, 03:12 PM

[Frederiek]

A link around each image, instead of using an input, would have the same effect. But, oh well.

Anyway, set the LI (line 469) to display: inline-block; and there you go. You can now leave out the margin there.

[FrostTaco]

A link around each image, instead of using an input, would have the same effect. But, oh well.

Anyway, set the LI (line 469) to display: inline-block; and there you go. You can now leave out the margin there.

Thanks alot, it now works with alot of inputs, I did have to take out width: 234; something like that, as it was making them far apart. Thanks again!

[Frederiek]

Good. You're welcome.

When you will put in a lot more inputs, you can space them out by using padding, which is currently set to 0 (zero).

I suggest you fix the few HTML errors on that page found by the validator:
https://validator.w3.org/nu/?doc=http%3A//c...e.com/index.php

[FrostTaco]

Good. You're welcome.

When you will put in a lot more inputs, you can space them out by using padding, which is currently set to 0 (zero).

I suggest you fix the few HTML errors on that page found by the validator:
https://validator.w3.org/nu/?doc=http%3A//c...e.com/index.php

Thanks, will try fixing those

[Frederiek]

If you have any question about that, just ask here.