I have a picture that, when clicked, opens up a css js modal box of another picture. Right now the box is too small. How do I edit the width of the graphic that appears?
http://www.awastudios.net (click one of the comic book covers)
I tried to edit the css code (app.css) but nothing changes.
.creator-modal {
background:#20212a;
border:1px solid #3f4150;
padding:0;
max-width:700px;
}
#media screen and (max-width:63.99875em) {
.creator-modal{
max-width:95%;
min-height:inherit;
height:auto;
margin:auto;
}
}
.reveal-overlay{
background-color:rgba(0,0,0,.45);
}
.regular-modal{
padding:15px;
font-size:14px;
background:#20212a;
border:1px solid #3f4150;
}
I changed max-width from 700px to 1500px and 80%, but nothing changes.
I've done a hard refresh on the browser (ctrlF5) but that doesn't help.
Any help would be appreciated! Thank you.
If i understood u , u want make modal more large thats right , add in ur HTMl div class="reveal creator-modal" width:100%
.creator-modal {
background: #20212a;
border: 1px solid #3f4150;
padding: 0;
max-width: 750px; /* up to 750px */
}
<div class="reveal creator-modal" id="fightgirls" data-reveal="" role="dialog" aria-hidden="false" data-yeti-box="fightgirls" data-resize="fightgirls" data-n="xyhm2h-n" style="display: block; top: 37px; width: 100%;" tabindex="-1">
<img src="assets/img/creators/fightgirls.jpg" alt="Frank Cho">
<button class="close-button" data-close="" aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Related
I can't get my images to align correctly between all browsers:
I'm wondering if it's a border issue?
Question: would the best way to resolve this be to create a media query? Right now I sort of try to find a good middle ground, but when viewed on a safari mobile app, those few pixels make a big difference. Or is there a better way to contain the image between the .mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 divs?
Here is my relevant HTML:
<div id="officials">
<div class='mnhouse'>
<div class="membersublist">
<div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='housemember' class='lcc_gis_member'></div>
<div id='housedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
<div class='mnsenate'>
<div class="membersublist">
<div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='senatemember' class='lcc_gis_member'></div>
<div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
</div>
And here is my relevant CSS:
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: relative;
top: -56px;
border:none;
}
.membersublist{
margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
height:87px;
background-color: #e6e6e6;
border-top: 1px solid #a7a5a6;
border-right: 1px solid #a7a5a6;
border-bottom: 1px solid #a7a5a6;
border-left: 3px solid #a7a5a6;
}
Here is the demo, in case I miss any relevant code (you need to select a point on the map to open the results).
The issue is your use of negative relative positioning to try to line it up.
#officials img {
...
position: relative;
top: -56px;
...
}
Basically you are positioning it relative to the offset created be the text, which can never be counted upon to be 100% consistent across browsers.
Instead, consider adding positioning to .mnhouse wrapper, and then using absolute positioning to position the images.
.mnhouse {
position: relative;
}
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: absolute;
top: 0;
border:none;
}
In my php page dynamically visualize the thumbnails. To make sure that these are all of the same size I do in this way
<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>
CSS
img.centered {
background-repeat: no-repeat;
background-position: center center;
}
/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}
I would like to display a different image on event: hover, but this does not work. How could I do that? thanks
You could always do it like this.
HTML:
<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
<div class="overlay"></div>
</div>
CSS:
.image {
width: 200px;
height: 200px;
border: 1px solid;
}
.overlay {
width: 100%;
height: 100%;
}
.overlay:hover {
background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}
So here we have the image you are getting via PHP on top as a div. And inside we have the overlay, the image you want when a user is hovering. So we set that to 100% width and height so it takes up all of the parent div and set the hover.
DEMO HERE
In your example the <img> always lays over the <a> background-image.
To avoid that, you could hide the image on hover. But that is kinda ugly ;)
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
a.zoom:hover img
{
opacitiy: 0;
}
try this
<img class="centered" src="thumb/default.png"/>
and jquery
$(".centered").attr("src","second.jpg");
I have a web page im designing as a responsive web design.in there i have a div which contains the sign up button of a email sign up form.in IE this and the content after that doesnt show up. following is the problematic html code..
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">
</div>
and when i remove this code the site works fine
the css for the class is like this
.Social_Base .Social_Part .Detail_Box .Sign_Up .bt {
background: url("http://media.expedia.com/media/content/expaus/images/socialbar/Social_main_bg.png") no-repeat scroll -374px -43px transparent;
border: 0 none;
cursor: pointer;
display: block;
height: 33px;
margin-left: 18px;
text-indent: -9999px;
width: 122px;
}
please help me..its ie9..it should be okay..i have used a complete image and positioned it to get the image for the sign up button..if any1 could help..thanks
Try adding a close button tag.
</button>
you must complete this tag :
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">your text</button>
</div>
i have a layout problem.
i have this sample code:
<div class="frame"><div class="holder"><form class="newform">...<div class="button"><input type="submit"></div></form></div></div>
And this stylesheet:
form.newform{border:1px solid orange}
div.button{border:1px solid red;width:100%;position:relative;overflow:hidden;}
Now the submit button (red-box) will be displayed at the bottom of the form (orange-box). But i like to display it AFTER (eg. 10px after bottom line) the orange-box.
Maybe someone can help me to solve this problem.
Best regards
Tim
Edit:
This is the complete css part of form.newform
overflow:hidden;
height:1%;
background:url(../images/contentform.gif) repeat-y;
padding:0 0 2px;
border:1px solid orange;
i tried to add bottom:-10px; to the div.bottom but the submit button will be cut at the bottom line of the form. Adding a z-index:200 wont help.
One option would be to use CSS to specifically shift the position of the submit button. I've made up the below so it will probably look completely wrong, but play around with it.
HTML:
<input type="submit" id="submitbutton">
CSS:
#submitbutton {
position: relative;
bottom: -50px;
}
You cannot have a submit button outside the form element, it needs to be inside.
If you want two boxes, one orange and one red, with the orange one containing the form input fields and the red one containing the submit button, you should do something like this:
<div class="frame">
<form class="newform">
<div class="holder">
...
</div>
<div class="button">
<input type="submit">
</div>
</form>
</div>
And in your css
.holder { border:1px solid orange; }
.button { border:1px solid red; margin-top:10px; }
I am trying to get my searchbox to look like that of facebook, where the button looks like it's inside the textbox. Please see the facebook home page.
I am using jquery ui and the graphics with it, for the button, problem is I think it adds borders to the button is creates, hence there is this separation between the text input and the button, anyway to get around this?
Here is my search form
<div class="div-search-form" style="display: inline; float: right;"><form method="get" id="search_form" class="" action="/searches">
<input type="text" value="Search" name="q" id="q" class="search-term" style="border: medium none;">
<span class="small-button"><a id="search_button" href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Search"><span class="ui-button-icon-primary ui-icon ui-icon-search"></span><span class="ui-button-text">Search</span></a></span>
</form>
</div>
UPDATE
I think I am getting there.
Here is my css
.search-button {
background-position: -160px -112px;
display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
background-image: url(images/ui-icons_ff0084_256x240.png);
float:left;
border-left: 0 !important;
background-color: white;
width:16px;
}
.search-term {
padding:1px 5px 1px 20px;
border: 0 !important;
float:left;
background-image: url(images/ui-bg_flat_0_eeeeee_40x100.png);
}
.search-term:focus{
background-image: none;
}
.div-search-form {
margin-right: 0;
float:right;
margin-top:5px;
}
AND THE markup
<div class="div-search-form"><form method="get" id="search_form" class="" action="/searches">
<input type="text" value="Search" name="q" id="q" class="search-term">
<a class="search-button" id="search-button" href="#"> </a>
</form>
</div>
Notice that unless I put a &nbps; the background image of the anchor tag doesn't show up. wonder why?
Also, Not sure how to make them both the same size and bigger in height. Right now they are both 16px in height, but If I play with the padding the alignment goes out of whack.
Essentially what you need to do is create an image that mirrors the style of the input field on the left.
You will float the input field next to the button.
For the input field on the left control the CSS so there is not a right border, also make sure you add some padding, so that the text doesn't run into the button.
input.search-term { float:left; border:1px solid #CCCCCC; border-right:none; padding:5px; }
On your image do not have a left border
.smallbutton a { float:left; border:1px solid #CCCCCC; border-left:none; background:url(../imagepath); disiplay:block; height:XXpx; width:XXpx; }
The trick isn't as much about a technical way to do it, rather being creative with the images and CSS you use to accomplish the goal.