I am writing an HTML file and using a lot this:
<iframe src="blablabla" width=100% height=555 frameBorder=0></iframe>
Is it possible to somehow define myiframe such that I can set this width, height and frame border in the definition and then just do
<myiframe src="blablabla"></myiframe>
?
Yeah, You can. These Custom Components are called Web Components.
For More info, take a look at this. (To make things easy, you can switch to ReactJS).
But, In your case, Adding a CSS will apply the styling to every iframe element.
iframe{ width:100%; height:555px; }
Implementation (Put style tag after head tag) -
<style>
iframe{
width:100%;
height:555px;
}
</style>
<body>
<iframe src="blablabla" frameBorder=0></iframe>
</body>
Is it possible to somehow define myiframe such that I can set this
width, height and frame border in the definition and then just do
<myiframe src="blablabla"></myiframe> ?
Yes, it is.
And though WebComponents are an incredibly powerful tool (and I very much hope they will continue to increase in popularity), in this situation you just need CSS:
Working Example:
.myiframe {
width: 200px;
height: 180px;
border: 3px dashed red;
}
<iframe class="myiframe" srcdoc="blablabla"></iframe>
The simplest way to start with CSS is go to the <head>...</head> of your HTML Document and add the following, somewhere in the document head:
<style>
.myiframe {
width: 200px;
height: 180px;
border: 3px dashed red;
}
</style>
Related
I have a <embed> element inside a div that contains a .txt file and I want to set it to automatically fit the size of the txt files contents.
However none of the tips I found here seem to work.
height: 100% or auto does absolutely nothing.
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<style>
body {
background: #aaa;
}
div {
width: 800px;
background: white;
}
embed {
padding: 25px;
width: 750px;
height: 100%;
}
</style>
</head>
<body>
<div>
<embed src="file.txt">
</div>
</body>
</html>
Also using <object> instead of <embed> as suggested in many questions here doesn't change the behavior at all.
It can't be that hard to do something this basic in CSS?
You maybe can try to use the font-size property of CSS.
An example of usage with it:
embed {
font-size: *what you need here*;
width: 100%;
}
Otherwise you may wanna look into CSS properties in JavaScript, and read lines, length etc. of content and base of it and take the users screen width into fact for the best result!
EDIT:
You could use XMLHttpRequest, AJAX, jQuery aswell in JavaScript.
And then change font size based on length of content.
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
Notice that I need to declare the img source from the html (this will be dynamic), so i dont use background here.
HTML
<div class='some-form'>
<form>
<button>...<button>
<img id="some-img" src="something"/>
<input id="some-input"/>
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
z-index: -1;
//background-size: contain; //this does not work
//background-position: center right 50px; //so this will not work
}
How can I get the image to act like contain so that I can align it the way i want?
Keep your code as-is, but change #some-img from an img to a div (and specify width and height as needed based on the image dimensions). It's not possible (at least not in a simple way) to make an img element behave as if it was using background-size and background-position properties since img elements are not backgrounds. So in order to do so, you instead make the image a div with a background-image.
Since you are dynamically populating the image src, you can instead use inline styles to define a background-image on the div, as this lets you call a PHP or other server-side function to echo the image url (which you can't do in a CSS file).
So for example, keep the CSS you have now (but add height/width or other styles to the #some-img div as needed) but replace <img id="some-img" src="something"/> with something like this:
<div style="background-image: url(<?php theDynamicImageURL(); ?>);"></div>
or equivalent in whatever language or method you are using to populate the image dynamically.
There are better ways to do this as inline CSS is generally something that should be avoided, but the use in this case is not too dangerous but it'll work in a pinch and most other methods would either be equally sloppy or a lot more work.
If you include jquery, you can write a script to cheat this:
<script type="text/javascript">
height = $('#some-img').height();
width = $('#some-img').width();
src = $('#some-img').attr('src');
$('#sime-img').wrap('<div id="contain"></div>');
$('#contain').height(height).width(width);
$('#contain').css('background',"url('" + src + "')");
$('#contain').css('background-sizing','contain');
$('#some-img').css('opacity','0');
</script>
It isn't nice. You can do the same thing w/o JQuery, I just used it for convenience.
If I understand correctly, you're looking to constrain an image to the size of its containing element and center it vertically and horizontally.
This will get you pretty close, but the image will only scale up to its actual size, no bigger.
HTML
<div class='some-form'>
<form>
<button></button>
<img id="some-img" src="http://lorempixel.com/300/200/sports"/>
<input id="some-input" />
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
width:400px;
height:180px;
background: rgba(255,255,0,.1); /* for checking that it fits*/
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
max-width:100%;
max-height:100%;
z-index: -1;
}
fiddle: http://jsfiddle.net/XNR38/
Good luck!
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera