I have to use an inline-block span as that is the only way that I can format text for an older version of Telerik RadTreeView.Net2 and I need to use an iframe as there is quite a bit of underlying logic and formatting in my subpage snippet. I cannot get the scrolling to work no matter what I seem to do. I have tried all variations on overflow combinations for both parent SPAN and child iframe. I am not sure if there is another path to take but any suggestions would be appreciated. In the html below I only have control over the SPAN and the iframe and not the parent div, corresponding img or the span where class="TreeNode".
<div id="cRadTree_t1_t0"><img src="javascript:false" alt="" style="display:none;" class="4" /><img src="javascript:false" id="cRadTree_t1_t0c" alt="" style="display:none;cursor:pointer;" class="2" />
<span class="TreeNode">
<SPAN style="display:inline-block;
text-align:center;
vertical-align:middle;
width:400px;height:100px;
padding:0px;
border:0px;
overflow-y:scroll"
>
<iframe style="height:100px;width:100%;padding:0px;overflow-y:hidden;"
src="../../Folder/Page.aspx?Ref=00000000-0000-0000-0000-000000000000">
</iframe>
</SPAN>
</span></div>
Related
I have an image which needs to be in a particular location, so I made a div in the place where I need it to be and added an img tag inside it, however although the img tag is inside the div tag the image goes into the bottom right corner of the page. This does not happen when the browser window is small.
CSS:
#teamimg {
width:10%;
height:50px;
background-color:blue;
overflow: auto;
float:left;
}
HTML:
<div id="teamimg">
<img src="Images/picture.png" alt="Image" height="18" width="20" class="itemImg" style="float:left">
</div>
Set overflow:hidden on the #teamimg rule, then you can put the image as a background-image with background-size:cover;. :)
Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp
I am having trouble getting something working in IE 7, works fine in all other browsers, but if you take a look at http://jamessuske.com/thornwood2/ in IE 7 you will notice two gaps inbetween the topCotent and the contentArea and the other gap between contentArea and contentBottom.
No idea on how to fix this.
HTML CODE
<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->
<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->
<div class="contentArea">
</div><!--contentArea-->
<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->
<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->
CSS CODE
.topContent{
width:1009px;
}
.leftContent{
float:left;
}
.contentArea{
background:#FFF;
width:912px;
min-height:494px;
float:left;
}
.rightContent{
float:right;
}
.bottomContent{
width:1009px;
}
Add height to the classes as shown below which will fix ur issue for IE7
.topContent{
width:1009px;
*height:37px;
}
.leftContent{
float:left;
*height:494px;
}
.rightContent{
float:right;
*height:494px;
}
The <img> element is an inline element. That means that it has a vertical-align property that, by default, is set to bottom. For some reason, this causes problems when you just have an <img> contained by a block-level element (like a <div>).
That's where your gaps are coming from: For some reason, IE adds a little bit of space to the bottom of the <div> elements that contain those images. (It's also doing this to your .bottomContent element; that's just harder to notice/not as big a deal.)
The fix is as simple as this:
.topContent img, .leftContent img, .contentArea img, .rightContent img {
display:block
}
(If, for whatever reason, you don't like/can't declare display:block, you could go with vertical-align:top instead.)
I always thought that replacing the <center> tag with <div style="text-align:center;"> will get me the same results. Apparently I was wrong.
This is a portion of my HTML:
(you can also see it in action in the page I created for this question :
http://www.catmoviez.com/ErrorPageSO.aspx
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;float:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>
I want to do 2 things:
Get Rid of the <center> tag while keeping the div in the center of the page.
Make sure the outer DIVs background color and border affect the inner spans.
UPDATE:
Objective 1 is completed.
Time for objective #2.
Use margin: 0 auto; on your enclosing <div>
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>
See it in action.
Reference: CSS: centering things
If you want to simply center the text, you this css style:
text-align:center;
However, if you are looking to center the element or div itself, there are quite
some solutions for that, one being below:
.mydiv
{
margin:0 auto;
}
Or even with something like this:
.mydiv
{
width:300px; // the width can sometimes be ignored based on inherent size of element.
margin-left:auto;
margin-right:auto;
}
Or even with something like this:
.mydiv
{
margin-left:50%;
margin-right:50%;
}
So you see, there can be more possibilities.
Inline content is aligned with text-align, block content is aligned with margins (set to auto for the case of centring). See Centring Using CSS.
if you are trying to center the div on the page, I usually use this method for my main wrapping div to center the page.
making the left positioning at 50% and then margining back left half of the width of the div.
example below.
#mainspace {
position:absolute;
left:50%;
margin-left:-450px;
height:auto;
width:900px;
border:none;
}
Try this, it has worked for me when I wish I still had that
<center>
tag
< p style="text:align-center" > example image or text < / p >