I'm not able to align some images to the center using css.
Here's the overall content of my page:
<body>
<header>...</header>
<div id="topBar">...</div>
<div class="freeSpace">...</div>
</body>
inside "freeSpace" I just have an unordered list with the following content (written in php):
echo('<li><div class="container">');
echo('<div class="text-block">');
echo("<p>Name: $name</p>");
echo("<p>Cost: $nightCost € per night</p>");
echo("<p>Address: $address</p>");
echo("<p>Brief Description: $brief</p>");
echo('</div>');
echo("<a href=\"https://www.facebook.com/blah\">");
echo "<img class=\"houseImg\" src='data:$imgID;base64, $imgData' />";
echo("</a>");
echo('</div> </li>');
This is the current look of my page (ignore the placeholder 'booking.com' icon)
I want each container to be centered and I've used 'text-align: center' in various places, but it's just not working.
Here's the current CSS that is being applied to everything, but that isn't the header and 'topBar':
.freeSpace
{
text-align: center;
}
.container {
text-align: center;
padding-left: 7em;
padding-bottom: 4em;
position: relative;
width: 58em;
}
.container>*>img:hover
{
width: calc(100% + 3em);
}
.container>a , .container>*>img {
transition: width 1s;
width:inherit;
}
.text-block {
text-align: center;
transition: width 1s, top 1s;
position: absolute;
width: 89.4%;
height: 22.1%;
margin: 4em;
top: 25.2em;
left: 3em;
bottom: 0;
right: 0;
z-index: 51;
}
ul {
text-align: center;
}
You've got some wild stuff going on with your CSS, especially the text-block class.
Ignoring that, your main problem is the width on your container class.
Remove width: 58em; from .container
.freeSpace
{
text-align: center;
}
.container {
text-align: center;
padding-left: 7em;
padding-bottom: 4em;
position: relative;
}
.container>*>img:hover
{
width: calc(100% + 3em);
}
.container>a , .container>*>img {
transition: width 1s;
width:inherit;
}
.text-block {
text-align: center;
transition: width 1s, top 1s;
position: absolute;
width: 89.4%;
height: 22.1%;
margin: 4em;
top: 25.2em;
left: 3em;
bottom: 0;
right: 0;
z-index: 51;
}
ul {
text-align: center;
}
<header>...</header>
<div id="topBar">...</div>
<div class="freeSpace">
<li>
<div class="container">
<div class="text-block">
<p>Name: $name</p>
<p>Cost: $nightCost € per night</p>
<p>Address: $address</p>
<p>Brief Description: $brief</p>
</div>
<a href="https://www.facebook.com/blah">
<img class="houseImg" src="data:$imgID;base64, $imgData" />
</a>
</div>
</li>
</div>
Related
basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..
Html:
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
<div class="center">Some text</div>
</div>
Css:
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}
container{
position: relative;
text-align: center;
}
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;
}
So basically, what i seek to be done is .atp:hover{opacity:0;} and what I also want is on atp's hover the .center{opacity:1;] So is there a way to put the opacity of center's to 1 when I am in the atp:hover{} code block?
Hope everything looks fine, thanks in advance!
Here is the code. Hope it will help you. if any changes please let me know.
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
/********* Background and text only overlay on hover *******/
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
<a href="LINK_URL">
<div class="normal">
<div class="text">Image + text ORIGINAL</div>
</div>
<div class="hover">
<img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
</div>
</a>
</div>
#atp {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 27%;
height: 50%;
z-index: 50;
}
.container {
position: relative;
text-align: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
}
#atp:hover {
opacity: 0;
}
try this, using z-index. It worked with me :)
I am trying to make a simple portfolio website and I want two tags at the bottom of the screen whenever I navigate down or up the page. So for example, if I am at the top of the page it says my name with three links, "About Me", "My Work", and "Contact". If I click on "About Me" it will navigate me down the page to where I have that section. Then this is where I need help, I want "My Work" and "Contact" at the bottom for easy navigation. I have been trying to figure this out for hours now which is why I am now asking a question on here. I am new to web programming so excuse me. Here is some of my code that is relevant.
#container {
padding-top: 100vh;
width: 100%;
height: 100vh;
color: white;
}
#container div {
position: relative;
width: 100%;
height: 100%;
}
/* Styling for each indivual link (About Me, My Work, Contact) */
#container div#AboutMe {
background: white;
color: black;
font-family: Helvetica;
font-weight: lighter;
text-align: center;
font-size: 21px;
}
#AboutMe p {
padding-right: 60%;
padding-left: 10%;
padding-top: 5%;
}
.animatedButtonBody span {
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody:hover span {
padding-right: 25px;
}
.animatedButtonBody:hover span:after {
opacity: 1;
right: 0;
}
<div id="container">
<div id="AboutMe">
<h1>About Me</h1>
<p>
This is where some text will go.
</p>
<span>My Work</span>
<span>Contact</span>
</div>
</div>
You can try position:fixed. Also you should tidy up your html elements (wrap things in div, etc.)
Example:
.nav {
height: 60px;
background-color: grey;
}
.content{
height: 500px;
background-color: lightgreen;
}
.footer{
height: 60px;
width: 100%;
background-color: black;
position: fixed;
bottom: 0px;
}
<div class = "container">
<div class = "nav">
</div>
<div class="content">
</div>
<div class = "footer">
</div>
</div>
Hope it helps
I figured out the answer to my problem. Here is what I added to my tags.
#pinButton1 {
position: absolute;
bottom: 0;
transform:translateX(-100%)
}
#pinButton2 {
position: absolute;
bottom: 0;
transform:translateX(0%)
}
<span>About Me</span>
<span>Contact</span>
Not tested, but you can try it. You need an element with "position:fixed", this way it stays on the screen when scrolling.
<style>
.float-container {
position: absolute;
bottom: 0;
}
.about-me {
position:fixed;
}
</style>
<div class="float-container>
<div class="about-me">
<p>Some Content</p>
</div>
</div>
You should check out position:fixed and position:absolute.
Link to W3Schools: HERE
You didn't clarify what does "at the bottom" mean, therefore I give 2 examples. This is how I understood your question.
If you need buttons to be always in viewport at the bottom of the screen use this example with custom values. Here you have an example how to center an item at the bottom center of the viewport.
#example{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%)
}
If you need an item to be at the bottom of the page use
#example{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%)
}
I'm sure this is an easy fix but I am new to HTML/CSS - I want a piece of text in a div to slide over another div which contains an image as well as text. Currently the slider div is not covering the entire div as the background text is preventing it from doing that. How do I make it completely overlap?
Here is my code:
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br> I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider"> Sliding info. </div>
</div>
Add this to your .items-tall-slider:
position:absolute;
top:0;
and this for positioning:
.row {
position:relative;
}
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
position:absolute;
top:0;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
.row {
position:relative;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br>
I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider">
Sliding info.
</div>
</div>
</div>
You also missed one </div> closing tag. I've added that in this example.
In your example the easiest solution would be to add position: absolute; top: 0 to the .items-tall-slider. This has the potential undesired side effect though, that the slider doesn't take any space anymore. Therefore any other elements in your page could be overlapped by your slider as well.
If you don't want this side effect, you could add a negative margin to your slider like this (or in the example below) and therfore overlap your text:
.items-tall-slider {
margin-top: -40px;
}
.items-tall-slider {
margin-top: -40px;
}
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br> I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider"> Sliding info. </div>
</div>
I have a small bug that I can't seem to locate. In my snippet you can see how whenever you hover over the image, opactiy and an image scale takes place, as well as a box comes over the image. That is perfect, but my issue is whenever you hover over the text below it, the hover effect takes place over the image.
I can't seem to figure out how for the hover effect to only take place when the mouse is hovering over the image.
Any suggestions would be appreciated.
$('.home-img-block img').addClass(function() {
return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 750px;
}
.home-img-block {
width: 33.33%;
float: left;
display: block;
overflow: hidden;
position: relative;
}
.home-img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-container:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-container:hover:after {
opacity: 1;
}
.home-img-block img {
display: block;
transition: all 1s ease;
}
.home-img-block:hover img {
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
overflow: hidden;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
#home-img-block-wording-container {
width: 100%;
height: 300px;
}
.home-img-wording-blocks {
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 30px;
font-size: 1.7em;
}
.home-img-wording-block-description {
padding: 25px 50px 0 50px;
font-size: 1.1em;
color: #5d5d5d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
</div>
.home-img-block:hover .overlay
and
.home-img-block:hover img
replace them with
.home-img-container:hover .overlay
.home-img-container:hover img
otherwise you're triggering when you hover over the whole container instead of only wheen hovering the img one.
I'm writing an online chatting widget and I plan to design it as Facebook's.
In my page, a bar is fixed on the bottom, and every chat rooms are contained in that bar.
While the bar's height is fixed, the chat rooms cannot extend its height outside the bar.
Is there any method to achieve this? I have used z-index, !important, and overflow, but all failed.
CSS:
#SNbar {
background-color: rgba(203, 203, 203, 0.80);
position: fixed;
bottom: 0;
width: 100%;
height: 25px;
z-index: 900;
overflow: visible;
}
#chatSessions {
position: relative;
bottom: 0;
float:right;
z-index: 901;
}
.chatSession {
/*
position: fixed;
bottom: 0;
*/
padding: 0 10px 0 0;
width: 260px;
float: right;
z-index: 999;
}
.CStitle {
height: 25px;
background-color:#3B5998;
cursor: pointer;
}
.CStitle .titleText{
text-decoration: none;
font-weight:bold;
color: #FFFFFF;
text-decoration: none;
line-height:2em;
}
.CSbody {
background-color: #FFFFFF;
opacity: 1.0;
display: none;
height: 0 !important;
}
.opened{
min-height: 260px !important;
display: block;
}
.CSMsgContainer {
overflow-y: scroll;
height: 210px;
}
HTML:
<div id="SNbar">
<div id="chatSessions">
<div class="chatSession" id="Div4">
<div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span> </div>
<div class="CSbody">
<div class="CSMsgContainer">
<div class="message">b: test1</div>
<div class="message">b: this is used to test css</div>
<div class="message">a: This may be help</div>
</div>
</div>
</div>
<div class="chatSession" id="Div8">
<div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span></div>
<div class="CSbody">
<div class="CSMsgContainer">
<div id="Div9" class="message">d: hi C!!</div>
<div id="Div10" class="message">c: Hello D~~</div>
<div id="Div11" class="message">
c: We are the second chat session
</div>
</div>
</div>
</div>
</div>
</div>
position:absolute for the inner container is what you want. Then you can put it anywhere you want. Best is probably to set position:relative to the parent container, so that the position of the inner containers will using the parent as "base".
If I am not wrong, from this when you click on .CStitle, you are toggling the CSbody. So for this, you can set position relative to chatSession class and to the CSbody, give position absolute.
.chatSession {
position: relative;
padding: 0 10px 0 0;
width: 260px;
float: right;
z-index: 999;
}
.CStitle {
height: 25px;
background-color:#3B5998;
cursor: pointer;
}
.CSbody {
position:absolute;
background-color: #FFFFFF;
opacity: 1.0;
display: none;
height: 0;
bottom:25px;
}
.opened{
min-height: 260px;
display: block;
}
.CSMsgContainer {
overflow-y: scroll;
height: 210px;
}
Hope this helps.
try adding this
#SNbar {
height: 25px;
max-height: 25px;
}