I am preparing now custom home page to my browser. I would like to few divs displays my favorite websites. However, since I do not have lots of space, I would like to display only the small fragments, with major sections. Is there a way to put excerpts with HTML? I mean the display, for example, to google put in a frame displaying only google-doodle and bar display (shift of tens of pixels to the right and down). I using this code, but i can't add right and down shift :
<iframe src="http://www.google.com" style="width: 90%; height: 300px"></iframe>
I will be grateful for any advice.
Warning : Google website it's only examples. I need to put in a few divs completely different pages. I am not concerned here with a static screenshot, but about full-working piece of the pages.
I make a graphic depicting what I mean :
I've created a jsfiddle with - what I believe is - what you're looking for: http://jsfiddle.net/ctwheels/3g47mjtk/
Set the width and height of iframe to the webpage size and then clip it down to the size you want. You can remove scrolling="no" in the iframe tag if you'd like.
HTML
<div id="outerdiv">
<div id="innerdiv">
<iframe width="600" height="660" src="http://www.wikipedia.org" scrolling="no" frameborder="0"></iframe>
</div>
</div>
<p>Set #outerdiv to size of #innerdiv. Blue background is so you can see what has happened to the iframe</p>
CSS
#outerdiv {
position: relative;
width:300px;
height:300px;
background-color:blue;
}
#innerdiv {
position: absolute;
top:-160px;
left:-200px;
clip:rect(160px 400px 360px 200px);
}
If Chrome is your browser, then I believe there's functionality to get screenshots/snapshots of your favorite websites built into its extensions business (which is really just lots of javascript and stuffs). Might want to look into creating an extension for Chrome that becomes your default/new-tab business (there are already a bunch out there in the Chrome Store).
Related
I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
I have been working on my site for my store and have multiple pages with products arranged in a table. First column is a photo of the item followed by columns with item #, description, price, etc.. Currently I am writing code for each image resize "img height:, img width:" Is there code that would automatically do this for each image? I am trying to keep the width the same on all photos to keep the column the same but the height is usually different for each photo. I am just trying to keep them proportional. Just trying to figure out a way of doing this easier. I've tried many design-your-site websites but none offer subpages of subpages. Wesbite is www.fredstrainshop.com. "lionel.html" link gives a good example of what I'm trying to do. Thanks for the help.
You can create a class for each image and specify the width and height. In case you want to change height of some specific elements use id.
HTML-
<body>
<img class="train" src="http://www.fredstrainshop.com/6-39534.jpg">
<img class="train" src="http://www.fredstrainshop.com/6-39563.jpg">
</body>
CSS-
.train
{
border: 1px solid black;
width: 100px;
}
See this for inspiration - https://jsfiddle.net/0w0vkzst/
On another note, I just visited your website, please consider using classes and ids for arriving at a more modular design. You might want to brush your html skills, for that codecademy and w3schools are great sites.
I used this html line
style="width:100%;height:100%;"
The line won't work in my case because the scrollpane works a little bit differently.
But if I add this line:
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
it works
i have a rather strange question:
Is there a possibility to open a only a specific div element of a website in my browser?
The reason why i want to know is, because i want to embed only the stream element of this website:
http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001
The page is rather new, so they dont offer a share embed code function yet, therfore i thought about creating an Iframe which shows the stream, like this:
<iframe height="433" width="770" frameborder="0" src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001"></iframe>
While this iframe shows the whole site, i want only to show the stream element. I checked the code of the side and the div element called "player-wrap" shows pretty much what i need.
Any ideas?
Your best option may be to contact them and request embed functionality. It's maybe not their top priority so if you must, a possible workaround could be this (modified from the SO post found here).
div{
width: 960px;
height: 424px;
overflow: hidden;
}
iframe{
position: relative;
top: -300px;
width:100%;
height:800px;
}
<div>
<iframe src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001" autoscroll="false"></iframe>
</div>
http://jsfiddle.net/daCrosby/5PMyu/
I think the best way to do it is to use jQuery's load function to return the iframe.
For example your code would be this which would return the wrapping div of the video which is called .palyer_wrap and insert it into #target-div.
$('#target-div').load('www.azubu.tv/channel/live_small.do?cn_id=2196420951001 .palyer_wrap');
When i open my site in firefox it shows img alt attribute in a black box(see attached image).
it only shows just for a second and when image starts loading its gone.
i want to remove this.
this is my html code
<img alt="alt text" width="650" height="241" src="src url" />
it only shows in firefox.
i have tried using this css code
a img {
border: 0;
}
but this did not help.
how i can remove this?
The short answer is that you can't. The longer answer is that you shouldn't.
You are approaching this in an entirely wrong manner. Expectedly, I guess - in this day and age not many care to think why tag attributes like ALT exist at all, and why Firefox bothers with borders before it renders images. But you should know these things if you want to be serious about web design. They are there for a reason. It is because people are different and user agents are different - some people cannot even see images that well, while they either may read or are read to the page contents by a screen reader, which cannot discern pixel content all that well. Also, in some scenarios (academic, scientific), user agents are configured to ignore images, only displaying ALT content, focusing on textual content instead.
If you take the above into consideration, you can make decisions based on these facts - what does your image actually do? Is it important for your users to see it at all? If it is indeed a picture that is at the heart of it, then you shouldn't bother with how it will be shown to your users - rest assured, they will see it and hopefully be happy.
The IMG element is for image-based data that is part of the content of the document you serve, not part of its style. This is an absolutely essential knowledge, that many never think about. Separators, hyperlink icons before A elements, huge banners on top of your pages, buttons for forms - all this is not part of content, it seldom carries meaning to the reader. That alone decides if these should be put in there with say, CSS instead. You use IMG element for photos, drawings, logos, illustrations and such.
In other words, if it is a decorative part of your web page design, you should instead think whether a background image will do - it will also eliminate your border and ALT problem entirely.
This is all you can do - no CSS will and should rob the user of your page(s) of accessibility just because you don't like borders. Remember - your webpages are not your webpages, they are viewed by your users. Same goes for user agents - they use theirs, and they prefer to set it up their way. Whether you yourself like borders is of little value or concern to them. Give them possibility to make the best use of them. Graphic design is indirectly about compromise - we want to better convey a message of our choosing using methods we have available, while respecting their choices and preferences. Web-design is much because of this a walk on the edge of a knife.
<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
Tree hugging, anyone?
</div>
I know it's an old question but here is 2017 update with CSS only solution using pseudo elements.
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />
Hopping someone can help with this.
When someone clicks 'Like' on one of our product pages the comment section that drops down goes behind the twitter/google social buttons and I can't seem to pin point exactly where the problem lies. I have tried setting overflow to visible/auto and no luck, yet when I change the height it appears ok (although I don't want to change the height but rather it appear over the top).
The code is below around the facebook button:
<div class="product-link">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://foscam-uk.com/indoor-ip-cameras/foscam-fi8918e-black-wired-ip-camera.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&appId=317980981630590"
scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:auto; width:450px; height:30px">" </iframe>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><g:plusone size="medium"></g:plusone></div>
</div>
Also a link to a product page (probably a bit more useful) : http://foscam-uk.com/foscam-fi8910w.html
Thanks a lot for your help.
Regards
The combination of height and overflow on the iframe does not seem to work as you expected it to.
My suggestion: Embed the iframe into DIV element, and format that DIV element as follows:
<div id="foobar"><iframe …></div>
#foobar {
height: 30px:
overflow: hidden;
position: relative;
z-index: 1;
}
#foobar:hover {
overflow: visible;
}
After that, the comment bar should show up over the twitter/g+ buttons.
But the “faces” of users that have already liked your page will then show up over the twitter/g+ buttons. I’d suggest you remove the parameter &show_faces=true from your iframe’s URL, since showing the faces will not really fit into the page layout you’re going for.