CODEWITHSUNDEEP
css
Eggybread
Eggybread

Reputation: 359

Floating image with text - CSS text alignment

I run a buying and selling site. On the following page when you click the sellers items, it opens a floating enlargement (Nyromodal) and displays the items description upon it. Can anyone please tell me how to change the code below to seat the item description neatly in the bottom of the floating enlargement window, without overlapping the window as it does on some items. The web page it's on is: www.onlinecarbooty.com/go-booting.aspx

The following is the CSS.. It's .nyroModalTitle which controls the text display. 

.nyroModalBg {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
opacity: 0.7;
}

.nmReposition {
position: absolute;
}

.nyroModalCloseButton {
top: -30px;
right: -30px;
width: 32px;
height: 32px;
text-indent: -9999em;
background: url(img/close.gif);
}

.nyroModalTitle {
right: 10%; margin: 0;
margin-bottom:-10%;
word-wrap:break-word; font-size: 2.3em;
background-color: #000000; color: #ffffff; 
}

.nyroModalCont {
overflow: hidden;   position: absolute;
border: 4px solid #777;
margin: 25px;
background: #fff;
}

.nyroModalCont iframe {
width: 480px;
height: 400px; overflow: hidden;
}

.nyroModalError {
border: 4px solid red;
color: red;
width: 250px;
height: 250px;
}

.nyroModalError div {
min-width: 0;
min-height: 0;
padding: 10px;
}

.nyroModalLink, 
.nyroModalDom, 
.nyroModalForm, 
.nyroModalFormFile {
position: relative;
padding: 10px;
min-height: 250px;
min-width: 250px;
max-width: 1000px;
}

.nyroModalImage, 
.nyroModalSwf, 
.nyroModalIframe, 
.nyroModalIframeForm {
position: relative;
overflow: hidden;
}

.nyroModalImage img {
overflow: hidden;   vertical-align: top;
}

.nyroModalHidden {
left: -9999em;
top: -9999em;
}

.nyroModalLoad {
position: absolute;
width: 100px;
height: 100px;
background: #fff url(img/ajaxLoader.gif) no-repeat center;
padding: 0;
}

.nyroModalPrev, 
.nyroModalNext {
outline: none;
position: absolute;
top: 0;
height: 60%;
width: 150px;
min-height: 50px;
max-height: 300px;
cursor: pointer;
text-indent: -9999em;
background: transparent url('data:image/gif;base64,AAAA') left 50% no-
repeat;
}

.nyroModalImage 
.nyroModalPrev, 
.nyroModalImage 
.nyroModalNext {
height: 100%;
width: 40%;
max-height: none;
}

.nyroModalPrev {
left: 0; background-image: url(img/prevmob.png);
}

.nyroModalPrev:hover{}
.nyroModalNext {
right: 0;
background-position: right 50%; background-image: url(img/nextmob.png);
}

.nyroModalNext:hover{}

Upvotes: 0

Views: 54

Answers (1)

user1641831
user1641831

Reputation:

While I may be wrong, I don't think there is a CSS-only way to solve the issue without changing the HTML. The problem here is that you have two unrelated elements (.nyroModalImg and .nyroModalTitle) which are both fixed in position (that is to say, they are placed exactly in one position, and they do not affect the position of other elements). Additionally, one of them is of variable size. Since you want their position to be related (the top of .nyroModalTitle should be exactly at the bottom of .nyroModalImg), you would have to perform come changes to the DOM.

There is a fairly easy workaround that - while not exactly a solution to your issue - would help. Changing a few properties of .nyroModalTitle would allow you to display it as a black bar at the very top of the screen, in centered position. Unless the image is larger than the window, the two elements will not overlap:

.nyroModalTitle {
    position: fixed;
    text-align: center;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    margin: 0;
    word-wrap: break-word;
    font-size: 4em;
    background-color: #000000;
    color: #ffffff;
}

Additionally, I would advise you to remove the border property from .nyroModalCont, as it makes it flow over its boundaries and displays scrollbars as a consequence:

.nyroModalCont {
    overflow: hidden;
    position: absolute;
    // border: 4px solid #777; <- Remove this
    margin: 25px;
    background: #fff;
}

Upvotes: 1

Related Questions