CODEWITHSUNDEEP
css
Pascal Kordon
Pascal Kordon

Reputation: 17

Link fills the whole page

I have a button, which is a link, with a background image defined in CSS. The link is invisible, and there is no text as the button has all the graphic. My problem is that the link (not the image, just the invisible link) expands at a 100% width and fills the whole screen, except for the height.

Complete Style Sheet. Dont mind some of the classes and ID's, they are for other pages!

 body {
background-image: url("background.jpg");
font: 0.9em verdana, sans-serif;
}
#Upload {
    width: 30em;
    margin:auto;
    margin-top:10%;
    padding:0 3em 2em 2em ;
    border:1px solid #bbb;
    color: #333;
    background:white;
    font: 0.9em verdana, sans-serif;
    border-radius:10px;
}
#Upload label{
    float: left;
    width: 7em;
}
#Upload  a:link {
text-decoration:none;
font-size: 15px;
color:grey;
}#Upload  a:hover{
text-decoration:none;
font-size: 15px;
}
#Upload a:visited {
text-decoration:none;
color: black;
font-size: 15px;
}

.image{
background-color: white;
margin:auto;
border: 3px solid #bbb;
border-radius:10px;
}
.container{
width:100%;
}
a {
font-weight: bold;
text-decoration: none;
}
.button_skip{
background-image:url('button_upload.jpg');
background-repeat: no-repeat;
border-radius:10px;
border: 1px solid black;
width:190px;
height: 35px;
text-align: center;
line-height: 35px;
color:black;
margin:auto;
position:relative;
}
.button_home{
background-image:url('button_upload.jpg');
background-repeat: no-repeat;
border-radius:10px;
border: 1px solid black;
width:190px;
height: 35px;
text-align: center;
line-height: 35px;
color:black;
margin:auto;
position:relative;
}
.button_upload{
background-image:url('upload.png');
background-repeat: no-repeat;
width:272px;
height:107px;
border: 3px solid black;
border-radius:20px;
overflow:hidden;
}
.box{
width:272px;
display:BLOCK;
}


HTML (includes some php, it might cause the problem, dunnae)
<!DOCTYPE HTML>
<html>
<head>
<title>derp</title>
    <script src="cookie_image.js" type="text/javascript"></script>
    <script type="text/javascript">
    document.onReady=function(){
    setCookie("cookie_image",
    };
    </script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">   
</head>
<body>
<?php
function getImagesFromDir($path) { 
    $images = array(); 
    if ( $img_dir = @opendir($path) ) { 
        while ( false !== ($img_file = readdir($img_dir)) ) { 
            // checks for gif, jpg, png 
            if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) { 
                $images[] = $img_file; 
            } 
        } 
        closedir($img_dir); 
    } 
    return $images; 
} 

function getRandomFromArray($ar) { 
    // Hvis der ikke er vist billeder før er cookien ikke sat, så vi sætter den og returnerer
    if ( ! array_key_exists('cookie_image', $_COOKIE)) {
        $num = array_rand($ar);
        // Husk lige at sætte cookie, ups
        setcookie("cookie_image", $num, time() + 86400);
        return $ar[$num];
    }
    // Hvis cookie er sat har billeder været vist før så vi får ingen fejl
    mt_srand( (double)microtime() * 1000000 ); // php 4.2+ not needed 
    $num = array_rand($ar); 
    $last_image = explode(",", $_COOKIE["cookie_image"]);
    if (is_array($last_image)==false){
        $last_image = array(""); // HER DET ARRAY DER BLIVER GENERATED SOM LAVER EN ERROR HVIS DER IKKE ER NOGET I
    }
    while(sizeof ($last_image)< sizeof ($ar) and in_array($num, $last_image)){
        $num = array_rand($ar);
    } 
    if (sizeof ($last_image)< sizeof ($ar)) {
        array_push($last_image, $num);
    } else {
        $last_image = array();
    }
    setcookie("cookie_image", implode (",", $last_image), time() + 86400);
    //setcookie("cookie_image", "", time()+86400);
    return $ar[$num]; 
} 



///////////////////////////////////////////////////////////////////// 
// This is the only portion of the code you may need to change. 
// Indicate the location of your images  

$root = ''; 
// use if specifying path from root 
//$root = $_SERVER['DOCUMENT_ROOT']; 

$path = 'uploaded_files/'; 

// End of user modified section  
///////////////////////////////////////////////////////////////////// 

// Obtain list of images from directory  
$imgList = getImagesFromDir($root . $path); 
$img = getRandomFromArray($imgList); 
?>
<div class="container">

        <div class="button_upload_box">
<a href="upload.php" target="_self">
<div class="button_upload">
</div>
</a>

<div>
        <center><br><br>
<img style="max-width:600px; max-height:300px; min-width=100px; min-height:10px;" class="image" src="<?php echo $path . $img ?>" alt="Derp">
<br><br><br><br><br><br>
        </center>
        </div>
        <a href="index.php" target="_self">
        <div class="button_skip">
        Skip this image
        </div>
</a>
    </div>
</body>
</html>

Upvotes: 1

Views: 839

Answers (1)

O&#39;Mutt
O&#39;Mutt

Reputation: 1592

Clearly the first two I submitted were not what you were looking for but i think this is what you are trying to do:

http://jsfiddle.net/Mutmatt/dBPnf/31/

Text on top:

http://jsfiddle.net/Mutmatt/dBPnf/46/

Upvotes: 1

Related Questions