1 reply [Last post]
julienbarrat
julienbarrat's picture
Offline
newbie
Berlin
Last seen: 7 years 8 weeks ago
Berlin
Timezone: GMT+2
Joined: 2013-06-14
Posts: 2
Points: 3

HI! I am very unexperienced in css, and am currently trying a few things for my website to understand its concept. The website is pretty simple, and the layout works fine, but I have one problem.

I have a

with a class named Container, and 5 images inside that are respecting the settings of .Container img {}. I have one other image I would like to put inside that
, but with other settings (centered in the
, 5% far from its bottom) than the other images. Is that possible? I tried a lot of different things but could not get it to have its own settings without *beep*ing up the rest of the page. Here is my actual code with a (unsuccessful) attempt to place the image:

.Container {
position: absolute;
border: 0px;
height: 80%;
width: 70%;
background-color: transparent;
background-image: url('Photoshop/Container.png');
background-repeat: no-repeat;
background-position: left top;
background-size: 100% 100%;
}
 
.Container img {
position: relative;
top:5%;
float:left;
}

<div class="Container">
    	<img name="TheMischievousThoughts" src="Photoshop/TheMischievousThoughts_Icon_Inactive.png" style="top:5%;left:5%;width:18%">
    	<img name="Concerts" src="Photoshop/Concerts_Icon_Inactive.png" style="top:5%;left:5%;width:18%">
    	<img name="Portraits" src="Photoshop/Portraits_Icon_Inactive.png" style="top:5%;left:5%;width:18%">
    	<img name="Misc" src="Photoshop/Misc_Icon_Inactive.png" style="top:5%;left:5%;width:18%">
    	<img name="3D" src="Photoshop/3D_Icon_Inactive.png" style="top:5%;left:5%;width:18%">
<br>
        <img name="CategoryTitle" src="Photoshop/Blank_Title.png" style="bottom:5%;margin-left:auto;margin-right:auto;width:20%">
    </div>

Thank you in advance for your help. I have been searching for a few hours online but could not find a solution...I attached an image of what I am trying to do (the text "The Mischievous Thoughts" is what I am trying to place where it is on the image).

And sorry for the code, I am sure it should be more simple in general! I am just a beginner.

julienbarrat
julienbarrat's picture
Offline
newbie
Berlin
Last seen: 7 years 8 weeks ago
Berlin
Timezone: GMT+2
Joined: 2013-06-14
Posts: 2
Points: 3

Sorry, i did write div

Sorry, i did write div between brackets... Here is the text again:

"I have a div with a class named Container, and 5 images inside that are respecting the settings of .Container img {}. I have one other image I would like to put inside that div, but with other settings (centered in the div, 5% far from its bottom) than the other images. Is that possible? I tried a lot of different things but could not get it to have its own settings without ruining the rest of the page."

And here is the image.

AttachmentSize
Homepage.jpg 295.02 KB