•  19-10-2022
  •  | 
  •  

Question

How to move my footer logo like my header logo? I want to create like this

-------------------------
|       __________      |
|______| HeadLogo |____ |
|      |_________ |     |
|                       |
|                       |
|                       |
|    ______________     |
|---|   FootLogo   |----|
|    ---------------    |
|_______________________|

preview my web https://db.tt/EsMHtRpF

my html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

<div class="all">
<div class="middle">


</div>
<div class="top">
<img src="images/head.png" class="top-img"></img>

</div>

<div class="bottom">
<img src="images/foot.png"></img>
</div>

</div>

</body>
</html>

my css

@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=Varela+Round");

* {
    padding:0px;
    margin:0px;
}

html, body {
    background-color:#b3924a;
    max-height:100%;
    max-width:100%;
}

.all {
    max-height:100%;
    height:auto;
    overflow:hidden;
    display:inline-block;
    media:screen;
}

.top {
    background-color:#d7cc75;
    width:100%;
    height:9%;
    position:absolute;
    top:0px;
    text-align:center;
    z-index:1;
}

.top-img {
    position:relative;
    width:17%;
    height:auto;
    z-index:1;
    top:1em;
}



.bottom {
    background-color:#d7cc75;
    width:100%;
    height:7%;
    position:absolute;
    bottom:0px;
    text-align:center;
    overflow:hidden;
    z-index:1;
}

.bottom img {
    width:25%;
    height:auto;
    z-index:1;
}

thank you :D

Was it helpful?

Solution

http://jsfiddle.net/4vZAB/1/

You set the overflow style to hidden for div.bottom which means it will hide any overflow of the content within it.

so the "footlogo" being inside the div , if you try to change its position to between the body and .bottom elements it will be hidden from view

PS: I commented out the overflow style, you can uncomment it and see how it behaves

OTHER TIPS

Give css as 

Position:relative

to the footer logo and adjust according to u usin top, bottom,left,right

css

.bottom {
background-color:#d7cc75;
width:100%;
height:7%;
position:relative;
bottom:0px;
text-align:center;
overflow:hidden;
z-index:1;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top