CODEWITHSUNDEEP
csshtml
Mordred58
Mordred58

Reputation: 25

Overlapping images in css/html5

I am trying to put together a portfolio web site with four images that will be used as buttons and a center logo. I want four images to serve as links in the corners of the screen (each taking up roughly half the page) with a center logo overlapping them.

I've put together the CSS for the site, and each time I've tried to preview the site, I get the four images in the corner of the screen, with my center logo not overlapping.

here is the code that I'm using for the images:

    div.upperLEFT {
    position: relative;
    float: left;
    left: 0;
    top: 0px;
    right: auto;
    bottom: auto;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;
}

div.upperRIGHT {
    position: relative;
    float: right;
    left: auto;
    top: 0px;
    bottom: auto;
    right: 0;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;
}

div.lowerLEFT {
    position: relative;
    margin-left: 0;
    margin-top: auto;
    margin-bottom: 0;
    margin-right: auto;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;    
}

div.lowerRIGHT {
    position: relative;
    float: right;
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: 0;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;
}

div.centerLOGO {
    position: relative;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
    margin-top:auto;
    margin-bottom: auto;
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
    z-index: 20;
}

here is my html:

    <!DOCTYPE html>

<html lang = "en">

    <head>
      <meta charset = "UTF-8">
      <title> CJ Wormely's Portfolio </title>
      <link href = "cjwstyle.css" rel = "stylesheet" type "text/css">
    </head>

    <body>
      <h1> CJ Wormely Portfolio </h1>
      <div class = "upperLEFT"> <a href = "about_me/cjwPortfolio_about_me.html"> <img src = "aboutmetile.svg" /> </a></div> 
    <div class = "upperRIGHT"> <a href = "id/cjwPortfolio_ID.html"> <img src = "IDTile.svg"/> </a> </div>
    <div class = "centerLOGO"> <img src = "siteLogo.svg"/> </div>
      <div class = "lowerLEFT"><a href = "mailto:[email protected]"> <img src = "eMailTile.svg"/></a> </div> 
    <div class = "lowerRIGHT"><a href = "art/cjwPortfolio_art.html"> <img src = "artTile.svg"/> </a></div>
</body>

</html>

Upvotes: 0

Views: 1885

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8274

Edit: To use z-index properly in your effect, use z-index: 999999;. Your images are spaced like that, undesirably as your .png because you need to define a wrapper.

Below is what I would do. I would nest in a few divs Note: // This isn't the full solution, I hope to point you in the right layout direction before writing this full page for you. You will have to define a few more properties to the CSS even to the ones I started - this is the logic I would suggest and should get you there pretty quick.

#mainwrap { 
width: 100%;
min-height: ; 
}

#coollogo { 
z-index: 999999;
width: ;
height: ;
position: absolute;
margin-top: ;
margin: 0 auto;
}

#top { 
width: 100%;
height: ;
}

.upperLeft { 
min-width: ;
width: 50%;
float: left;
}

.upperRight { 
min-width: ;
width: 50%;
float: right;
}

#bottom { 
margin-top: 200px; // define
width: 100%;
height: ;
}
/// etc, etc

The Mark-Up:

<div id="mainwrap"><!-- main wrapper -->

<div id="coollogo"></div><!-- the cool logo -->

<div id="top"><!-- top half -->
<div class="upperLeft"></div>

<div class="upperRight"></div>
</div>

<div id="bottom"><!-- bottom half -->
<div class="bottomLeft"></div>

<div class="bottomRight"></div>

</div>
</div><!--// end main wrap -->

I would also minimize div.upperLEFT { to just .upperLEFT { as there is no need to type div each time. If you continue to run into coding errors, consult a Validator for more information http://validator.w3.org/

Upvotes: 0

Daniel Rippstein
Daniel Rippstein

Reputation: 567

There are several ways to center your logo on the screen.

Now, as the other poster said, your code is "all over the place". I'm thinking you were experimenting and noticed this combination was close to working, and so stuck with it (we've all been guilty of that at some point). But using the right tool for the right job is important (to avoid unpredictable/hilarious results), so might I suggest this combination instead...

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CJ Wormely's Portfolio</title>
    <link href="cjwstyle.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>CJ Wormely Portfolio</h1>
    <div class="corner upperLEFT"><a href="about_me/cjwPortfolio_about_me.html"><img src="aboutmetile.svg"></a></div> 
    <div class="corner upperRIGHT"><a href="id/cjwPortfolio_ID.html"><img src="IDTile.svg"></a></div>
    <div class="corner lowerLEFT"><a href="mailto:[email protected]"><img src="eMailTile.svg"></a></div> 
    <div class="corner lowerRIGHT"><a href="art/cjwPortfolio_art.html"><img src="artTile.svg"></a></div>
    <div class="centerLOGO"><img src="siteLogo.svg"></div>
</body>

</html>

CSS

.corner {
    position: absolute;
    width: 50%;
    height: 50%;
}
.upperLEFT {
    left: 0;
    top: 0;
}
.upperRIGHT {
    right: 0;
    top: 0;
}
.lowerLEFT {
    left: 0;
    bottom: 0;
}
.lowerRIGHT {
    right: 0;
    bottom: 0;
}
.centerLOGO {
    position: absolute;
    left: 50%;
    top: 50%;
}
.centerLOGO img {
    position: relative;
    top: -15px; /* your logo height divided in half */
    left: -15px; /* your logo width divided in half */
}

There are definitely several different methods of vertically centering an element. Given the provided info, however, this method should work easily for you.

To see how this is expected to work, please see this example: http://jsfiddle.net/D2Mz5/2/

Upvotes: 1

Related Questions