The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Change Div Size
FrostTaco
post Apr 29 2016, 03:27 PM
Post #1


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2016, 03:50 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Should work. How does the HTML look?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post Apr 29 2016, 03:53 PM
Post #3


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 29 2016, 04:37 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
This CSS:

CODE
    .zoomin div {
        height: 120px;
    }

styles a DIV inside .zoomin, not .zoomin itself.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post Apr 29 2016, 04:49 PM
Post #5


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2016, 05:07 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post Apr 29 2016, 05:25 PM
Post #7


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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;
    }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 30 2016, 09:13 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post Apr 30 2016, 11:36 AM
Post #9


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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

This post has been edited by FrostTaco: Apr 30 2016, 11:55 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 30 2016, 12:44 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post Apr 30 2016, 02:45 PM
Post #11


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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.

Attached Image

thats weird, i took that code right from the page itself
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 1 2016, 10:21 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Can you paste the complete document in here just as it is? I'm curious.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 3 2016, 05:17 PM
Post #13


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 3 2016, 07:08 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Oh. Seems the parts we are interested in are included, so that idea didn't work out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 3 2016, 07:16 PM
Post #15


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 3 2016, 07:24 PM
Post #16


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
View the page source from a browser and copy that into a forum post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 3 2016, 07:39 PM
Post #17


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 3 2016, 09:25 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
.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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 4 2016, 03:15 PM
Post #19


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2016, 05:25 PM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 08:29 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC