Help - Search - Members - Calendar
Full Version: Change Div Size
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
FrostTaco
Hi guys, I'm new to css, so here we go. smile.gif I need to change the height of a div to about 120px, but well, it does nothing, the input part works, just not the div part:
CODE
<style type="text/css">
    .zoomin input {
        border-radius: 10px;
        border: 2px solid gray;
        height: 100px;
        width: 100px;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
        transition: all 2s ease;
    } .zoomin input:hover { width: 150px; height: 150px; }
    .zoomin div {
        height: 120px;
    }
    </style>
pandy
Should work. How does the HTML look?
FrostTaco
QUOTE(pandy @ Apr 29 2016, 04:50 PM) *

Should work. How does the HTML look?

<div class="zoomin">
<input type="image" src="images/giveaways/main/csgoitem.png" alt="Submit" onClick="parent.location='giveaway.php?id=lA3JC/csgopossibly-and-csgo-skins-giveawayunclaimed'" data-toggle="tooltip" title="CSGO Items(Possibly Game)">
</div>
Christian J
This CSS:

CODE
    .zoomin div {
        height: 120px;
    }

styles a DIV inside .zoomin, not .zoomin itself.
FrostTaco
QUOTE(Christian J @ Apr 29 2016, 05:37 PM) *

This CSS:

CODE
    .zoomin div {
        height: 120px;
    }

styles a DIV inside .zoomin, not .zoomin itself.

how can i fix that without making another div outside it which, well will obviously make another big space, and the div its all in already has a class.
pandy
The HTML isn't the problem. The CSS is. Christian explained what the selector you use matches. To match the DIV itself you just need this.

CODE
.zoomin    { ... }


Read the below page. There are many more selectors than those described there, but the basic ones are there and that's enough to get you going.
http://htmlhelp.com/reference/css/structure.html
FrostTaco
QUOTE(pandy @ Apr 29 2016, 06:07 PM) *

The HTML isn't the problem. The CSS is. Christian explained what the selector you use matches. To match the DIV itself you just need this.

CODE
.zoomin    { ... }


Read the below page. There are many more selectors than those described there, but the basic ones are there and that's enough to get you going.
http://htmlhelp.com/reference/css/structure.html

Sorry if im not understanding correctly, but from what you said, and the link, shouldn't this work(nothing changed in the result)?
CODE
.zoomin input {
        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;
    } .zoomin input:hover { width: 150px; height: 150px; }
    .zoomin {
        height: 120px;
    }
pandy
Yes, and it does. Only as you have it you won't see any difference since the only thing in that DIV is the input. Of if you have something after it in the HTML, that will be pushed down. Give .zoomin a background color and you can see its height.

Or is it some other DIV you are talking about? .zoomin is the only one in the markup you posted.
FrostTaco
QUOTE(pandy @ Apr 30 2016, 10:13 AM) *

Yes, and it does. Only as you have it you won't see any difference since the only thing in that DIV is the input. Of if you have something after it in the HTML, that will be pushed down. Give .zoomin a background color and you can see its height.

Or is it some other DIV you are talking about? .zoomin is the only one in the markup you posted.

I gave it a background color, and it takes up the entire empty space. Also, the only html I use it in right now is the one above.


Thanks alot guys, but i found the problem! I had to add in display: inline; to the css code, again thanks alot smile.gif
pandy
You shouldn't have to do that. The real page much somehow differ from what you've posted here. huh.gif

This is what I see with the stuff you posted, with an added lime background to the DIV.

Click to view attachment
FrostTaco
QUOTE(pandy @ Apr 30 2016, 01:44 PM) *

You shouldn't have to do that. The real page much somehow differ from what you've posted here. huh.gif

This is what I see with the stuff you posted, with an added lime background to the DIV.

Click to view attachment

thats weird, i took that code right from the page itself
pandy
Can you paste the complete document in here just as it is? I'm curious.
FrostTaco
QUOTE(pandy @ May 1 2016, 11:21 AM) *

Can you paste the complete document in here just as it is? I'm curious.

yeah, and also, now, I changed one thing in the webpage, and now the pictures are to the left...
CODE
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrostyCSGO</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
    <style type="text/css">
    .zoomin input {
        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;
    } .zoomin input:hover { width: 150px; height: 150px; }
    .zoomin {
        display: inline;
        height: 120px;
    }

    .bhtml {
        border-radius: 10px;
        border: 2px solid gray;
        color: red;
        background-color: orange;
        width: 100%;
    }

    .rpic {
        border-radius: 17px;
        border: 2px solid gray;
    }

    </style>
</head>
<body>
    <div id="page">
        <div id="header">
            <div>
                <a href="index.php" class="logo"><img src="images/frosty/frostycsgo.png" alt=""></a>
                <?php
                    include "apikey.php";
                    include "openId.php";

                    $OpenID = new LightOpenID("corndog.corticalcafe.com");

                    session_start();

                    if(!$OpenID->mode){
                        
                        if(isset($_GET['login'])){
                            $OpenID->identity = "http://steamcommunity.com/openid";
                            header("Location: {$OpenID->authUrl()}");
                        }

                        if(!isset($_SESSION['FrostyTaco'])){
                            $login = "<div id=\"login\">Welcome FrostGuest, Please <a href=\"?login\"><img src=\"https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_large_border.png\"/></a></div>";
                        }

                    } elseif (!$OpenID->mode == "cancel") {
                        
                    } else {

                        if(!isset($_SESSION['FrostyTaco'])){

                            $_SESSION['FrostyTaco'] = $OpenID->validate() ? $OpenID->identity : null;
                            $_SESSION['FrostyID64'] = str_replace("http://steamcommunity.com/openid/id", "", $_SESSION['FrostyTaco']);

                            if($_SESSION['FrostyTaco'] !== null){

                                $steam64 = str_replace("http://steamcommunity.com/openid/id", "", $_SESSION['FrostyTaco']);
                                $profile = file_get_contents("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${api}&steamids={$steam64}");
                                $arr = array('email' => "", 'tradelink' => "", 'refer' => "");
                                if (!file_exists("cache/{$steam64}.json")){
                                    $buffer = fopen("cache/{$steam64}.json", "w+");
                                    $buffercustom = fopen("cache/{$steam64}custom.json", "w+");
                                
                                    fwrite($buffer, $profile);
                                    fwrite($buffercustom, json_encode($arr));
                                    fclose($buffer);
                                    fclose($buffercustom);
                                }

                            }

                            header("Location: index.php");

                        }

                    }

                    if(isset($_SESSION['FrostyTaco'])){

                        $steam64 = str_replace("http://steamcommunity.com/openid/id", "", $_SESSION['FrostyTaco']);
                        $profile = file_get_contents("cache/{$steam64}.json");

                        $content = json_decode($profile, true);
                        $_SESSION['steam_avatarmedium'] = $content['response']['players'][0]['avatarmedium'];
                        $_SESSION['steam_name'] = $content['response']['players'][0]['personaname'];
                        $_SESSION['steam_url'] = $content['response']['players'][0]['profileurl'];
                        $avatar = $_SESSION['steam_avatarmedium'];
                        $name = $_SESSION['steam_name'];
                        $url = $_SESSION['steam_url'];
                        echo "<a href='$url'><img src='$avatar' class='rpic'></a><a href='MyAccount.php' class='bhtml'>$name</a>";
                        
                        $login = "<div id=\"login\"><a href=\"?logout\">Logout</a></div>";

                    }

                    if(isset($_GET['logout'])){

                        unset($_SESSION['FrostyTaco']);
                        unset($_SESSION['FrostyID64']);
                        header("Location: index.php");

                    }

                //    echo $login;

                ?>
                <ul id="navigation">
                    <li class="selected">
                        <a href="index.php">Home</a>
                    </li>
                    <li>
                        <a href="contact.php">Contact</a>
                    </li>
                    <?php echo "$login" ?>
                </ul>
            </div>
        </div>
        <div id="body" class="home">
            <div class="header" align="center">
                <div class="zoomin">
                    <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">
                        </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">
                        </li>
                    </ul>
                </div>
                <?php
                    if(isset($_SESSION['FrostyTaco'])){
                        $steam64 = str_replace("http://steamcommunity.com/openid/id", "", $_SESSION['FrostyTaco']);
                        $profile = file_get_contents("cache/{$steam64}.json");

                        $_SESSION['steam_name'] = $content['response']['players'][0]['personaname'];
                        $name = $_SESSION['steam_name'];

                        echo "<h1><b>Welcome $name</b></h1>";
                    } else {
                        echo "<h1><b>Welcome FrostGuest</b></h1>";
                    }
                ?>
                <h1>Click on a giveaway to be redirected to that giveaway</h1>
                <p>All images above are images of the acctual items being given away!</p>
            </div>
            <div class="body">
                <div align="center"><p>Site owned by FrostTaco3</p></div>
            </div>
            <div class="footer">
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>
        <div id="footer">
            <div align="center">
                <p>FrostyCS:GO</p>
                <a href="http://steampowered.com">Powered by Steam</a>
            </div>
        </div>
    </div>
</body>
</html>
pandy
Oh. Seems the parts we are interested in are included, so that idea didn't work out.
FrostTaco
QUOTE(pandy @ May 3 2016, 08:08 PM) *

Oh. Seems the parts we are interested in are included, so that idea didn't work out.

do you know what todo to fix it?
Christian J
View the page source from a browser and copy that into a forum post.
FrostTaco
QUOTE(Christian J @ May 3 2016, 08:24 PM) *

View the page source from a browser and copy that into a forum post.

CODE

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrostyCSGO</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
    <style type="text/css">
    .zoomin input {
        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;
    } .zoomin input:hover { width: 150px; height: 150px; }
    .zoomin {
        display: inline;
        height: 120px;
    }

    .bhtml {
        border-radius: 10px;
        border: 2px solid gray;
        color: red;
        background-color: orange;
        width: 100%;
    }

    .rpic {
        border-radius: 17px;
        border: 2px solid gray;
    }

    </style>
</head>
<body>
    <div id="page">
        <div id="header">
            <div>
                <a href="index.php" class="logo"><img src="images/frosty/frostycsgo.png" alt=""></a>
                                <ul id="navigation">
                    <li class="selected">
                        <a href="index.php">Home</a>
                    </li>
                    <li>
                        <a href="contact.php">Contact</a>
                    </li>
                    <div id="login">Welcome FrostGuest, Please <a href="?login"><img src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_large_border.png"/></a></div>                </ul>
            </div>
        </div>
        <div id="body" class="home">
            <div class="header" align="center">
                <div class="zoomin">
                    <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">
                        </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">
                        </li>
                    </ul>
                </div>
                <h1><b>Welcome FrostGuest</b></h1>                <h1>Click on a giveaway to be redirected to that giveaway</h1>
                <p>All images above are images of the acctual items being given away!</p>
            </div>
            <div class="body">
                <div align="center"><p>Site owned by FrostTaco3</p></div>
            </div>
            <div class="footer">
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>
        <div id="footer">
            <div align="center">
                <p>FrostyCS:GO</p>
                <a href="http://steampowered.com">Powered by Steam</a>
            </div>
        </div>
    </div>
</body>
</html>
pandy
.zoomin is still 120px if I take away the display: inline.

This isn't very similar to what you posted. Where did the box with the rounded corners go?
FrostTaco
QUOTE(pandy @ May 3 2016, 10:25 PM) *

.zoomin is still 120px if I take away the display: inline.

This isn't very similar to what you posted. Where did the box with the rounded corners go?

um...
CODE
.zoomin input {
        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;
    } .zoomin input:hover { width: 150px; height: 150px; }
    .zoomin {
        display: inline;
        height: 120px;
    }

border-radius: 10px;
border: 2px solid gray; rounds the corners
pandy
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.
FrostTaco
QUOTE(pandy @ May 4 2016, 06:25 PM) *

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.
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?
pandy
I don't know what I should paste together with what anymore. unsure.gif
FrostTaco
QUOTE(pandy @ May 8 2016, 08:50 PM) *

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

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
QUOTE(pandy @ May 9 2016, 09:29 PM) *

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
QUOTE(Frederiek @ May 11 2016, 05:04 PM) *

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
QUOTE(Frederiek @ May 12 2016, 04:03 AM) *

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 tongue.gif

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.
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?
FrostTaco
QUOTE(Frederiek @ May 12 2016, 12:30 PM) *

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.
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
QUOTE(Frederiek @ May 13 2016, 03:26 AM) *

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
QUOTE(Frederiek @ May 13 2016, 10:03 AM) *

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 smile.gif
Frederiek
If you have any question about that, just ask here.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.