basically, what i am trying to achieve is the following layout;
http://farm9.staticflickr.com/8256/8746793625_d3fed90c54_b.jpg
I have tried using tables, but could not get the images to 100% of the page height.
I have tried crating an unordered list with display:inline and the images resized correctly, but I could not 'centre' on the "main" or second item in my list.
I am limited by the fact that I can't specify the dimension's of the images.
I would like to stick to CSS of possible, unless maybe there is a way of testing the window size with Jquery and feeding that in somehow? (im pretty new to this)
I'm all out of ideas, can anyone help?!?!
Cheers!
This is as close as I got;
<body>
<div class="wrapper" style="position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0;">
<table style="position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0; text-align:center; white-space: nowrap; overflow:hidden;">
<td style="width:20%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td>
<td style="width:60%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td>
<td style="width:20%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td>
</tr></table></div></body>
The problem should be in your arrangement of tables
will you please check out the table and where you sending your upload file . weather is calling the jQuery or not your jquery function is called or not and put the image width and height to 100% and if you give me your site link I will do for you.
Related
I'm not sure how to do this. II'm currently using Bootstrap's textarea, along with its container. I don't know how to make it so that the textarea extends to the bottom of the screen, which automatically increase/decrease depending on the window height. I've tried:
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
But nothing seems to change. Does anyone know how I can get this done?
Edit:
This is my html file:
<body>
<div class="container">
<div class="form-group">
<textarea class="form-control" rows="15" id="note"></textarea>
</div>
</div>
</body>
You have to put height property on the element like the code below.
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:50px;
}
If it doesn't work, try !important. If it doesn't work either, try setting rows in markup and set line-height on CSS.
<textarea rows="4">
.form-control should be a CSS class for bootstrap.
Are you using <textarea class="form-control"></textarea>? If so, your css rule is using #, which corresponds to an element ID, not a class. Change your CSS to this:
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
Try this code.
Actually you have used (id) #form-control, which should be (class) .form-control
I've used your code, just added width 100%
Now it'll take height and width of screen.
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
<div class="form-group">
<textarea class="form-control" placeholder="textarea"></textarea>
</div>
You can use the height property to set it to a certain height.
You can do something like this:
#form-control {
position:fixed;
height: 200px;
}
or
#form-control {
position:fixed;
height: 50%;
}
Just as a few examples.
I would suggest that you check out this W3 Schools page on the height css property... If you read the page you can see how else you can size it.
On that page there is also a link to this demo which I suggest you try to see what the different "settings" for lack of better word do.
Also make sure that the opening <textarea> tag calls the selector... so it should look something like this <textarea id="form-control">.
Good Luck
Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>
I want to make a scrolling menu with my menu on my free hosted site.
What I mean by a scrolling menu is like at the bottom of the screen # CNET.com & ThePheed.net, my site is currently at Trigoblocks.comuf.com.
Does anybody know how to do this and could teach me or lead me in the right direction? (:
You div css should be something like the follwing:
position:fixed;
bottom:0;
left:0px;
width:100%;
As far as the wrap around effect in cnet is concerned, its probably a transparent .png positioned at the top of the div.
Example
<div style="height:200%;">Make scroll bar appear</div>
<div style="position:fixed; bottom:0; left:0px; height:25px; width:100%; background-color:#3c3c3c; border:solid 1px gray; padding:2px;">
<div style="color:gray;">Stuff</div>
</div>
Heh, and I thought you wanted something like this: http://jsbin.com/irovo/2
Guess I should visit cnet some day..
I have a "div" with style: overflow-y: scroll; overflow-x: auto;
I try to dynamicaly add image inside this "div" with absolute or relative position. Everything seems ok until user tries to scroll the "div" content: image stays in fixed position relative to browser window. This problem seems to be only in IE(7), in firefox everything is fine.
Is there any solutions for this?
EDIT (in response to questions raised below): I'm positioning the element because I need it to show in front of another element.
I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the <div> that has scrollable contents.
Wrap everything in a containing div that is positioned relatively on the page:
<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
<br />
<img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
<br />
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
<br />[scrolling content]<br />
</div>
<br />
</div>
Is there a particular reason you need to set a position for the image? It works fine in IE7 without setting a position.
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
Try float:left or float:right with margin
I got the same issue in chrome with position:absolute in a overflow-y: auto;. The divs were getting fixed in there positions- while scrolling.
And a simple solution is using float.
my old code was-
position:absolute; right:10px;
and I replaced with the following and it worked-
float:right; margin-right:10px;
You know what, it might just be easier to wrap the absolute positioned elements in a relatively positioned container element, I think that should be able to scroll...
Things I learned the hard way: For IE6/IE7 it may need to have the image as the last DOM element in the containing DIV to get it to appear on over the scrolling DIV.
You need to use relative positioning if you want it to be able to scroll. The trick is to use negative positioning on the second element.
Let's say you have two elements A and B, and you want to position B in front of A. It would look something like this:
<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>
<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>
Depending on the content, you might have to add additional styles such as "display:block;" etc. A good resource for these is w3schools.com
For a good tutorial on DIV positioning with CSS go to:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Cheers
The declaration position: absolute; means that the element will be displayed relative to the view-port's upper left corner. Using relative instead means that the values you use for left and top will be added to wherever the img would have been normally.
want to know Simply the javascript to overlay a div on centre of the page.
Just want to use plain java script to show and hide a div on the center of the page with "Please wait..." message and disable the background. Also this div shoud show on top of the other content of the page.
My div looks like this
<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div>
On click of a button , I want to show the div content center aligned on the page.
I do not want to use jquery,extjs,,etc to achieve this.
I have seen a few examples on the web with lot of other features added to a modal popup, just looking for something simple and clean.The bare minimum JS required to do this.
The div you want to display needs to have an ID:
<div id="loaderdiv">
Then in your javascript, you display this div with the following code:
document.getElementById("loaderdiv").style.display = '';
Thats the bare minimum you'll need.
Centering the image can be done using CSS:
<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px">
<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;">
example.com<br />
</div><!--overlay_msg-->
<div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()">
</div><!--my_overlay-->
<script type="text/javascript">
function showMyOverlay()
{
document.getElementById('my_overlay').style.visibility='visible';
document.getElementById('overlay_msg').style.visibility='visible';
}
function hideMyOverlay()
{
document.getElementById('my_overlay').style.visibility='hidden';
document.getElementById('overlay_msg').style.visibility='hidden';
}
</script>