What I want is a link in my text to a image. When u click on the link the image should open fullscreen on a new tab. I got so far that the image opens on a new tab, but it isn't fullscreen. My code looks like this:
<p>some text website and more text</p>
But if i click on the link it looks like the image get the height of the page, in my case:
img[Attributes Style] {
width: 918px;
height: 979px;
}
I want it to be something like this
img[Attributes Style] {
width: 100%;
height: auto;
}
I've tried
website
but both dont work.
Have u guys any idea how I can do this?
This is the first time i ask something here, if i did something wrong I would like to hear it :)
You have no control over any style attributes, because the new tab is actually not an html page, but only the image by itself. You can on the other hand make a html page that's sole purpose is to show the styled image. Make your link something like website and in bigImg.html you can use javascript or php to get the src of the image you want to load. In the css of bigImg.html style the image anyway you like.
Related
hello I have a little problem after adding a widget script "Recent Post by Label on Static Pages" on the static page my header image has changed slightly but only on this page where I have add the script, for other pages it is good no problem the header image look great can you give me a solution and thank you
the problem page : https://mon-blogger-code.blogspot.com/p/tutoriel-blogger.html
enter image description here
enter image description here
You can remove height: 90 from the #header-blog style rule. It makes the height fixed, and removes part of your header image. If you can't change the style rule, add a new one that says:
#header-blog {
height: auto!important;
}
I would like to replace this image when I scroll down on another image.
Firstly, the menu looks like:
And when I scroll little bit down menu looks like:
Is it possible to replace using custom.css this item in menu? I just want to replace this picture on another picture. Is it possible to do by using only custom.css or do I need to have acces to files and use here java script?
When it's possible can somene just tell how?
Link to my site : http://test.projekt-tenis.pl/wordpress/
Give this a whirl:
.is-sticky img.menu-image-title-hide {
background: url(http://www.spiritvoyage.com/blog/wp-content/uploads/Screen-shot-2011-12-06-at-2.56.08-PM-150x150.png) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
Should do the trick. It moves the original src image out of the way and adds a background image. As far as your user is concerned it'll just look like it flips from one image to the other.
It works because the class .is-sticky is added to the header on scroll by js.
I am working on a website.
Now what I want is to open a small screen with text and images,which pops up when a link is clicked.
I don't want to open small sized webpage..
What I want is similar to this in chrome.. "chrome://settings/startup"
please if someone can tell me what this feature is called and how it is implemented It will be helpful.
It's called a modal window. Not a real pop up.
Create a div with id
<div id="modal">
// your content with images
</div>
CSS
#modal {
position: absolute;
z-index: 99;
top: 25%;
width: 400px;
height: 300px;
margin: auto;
display: none;
}
Now in javascript:
On click of the link, show the modal window
$("#buttonId").click(function() {
$("#modal").show();
})
There already many plugins which does this:
Jquery UI
Bootstrap
But, if you have Chrome or a modern browser, use the <dialog open> tag (like a div) and use id's to edit the dialog via JS, such as:
window.<id>.close(); // closes dialog/hides it
window.<id>.show();
window.<id>.showModal(); // instead of showing it regularly, it puts it to the middle of the screen and greys the background like an alert. (you can edit the background effect with CSS)
If you want to use pure html, probably you can use window object. It has several types of popup window method, like window.alert(), window.comfirm(), etc.
If you want to use with javascript and css, then there are many ways to implement it. Here is a simple example I found:
[1]http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.
Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.
I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?
I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html... you can save the BG image and see its not just the logo...
Please tell me how I can make a link that sits over the logo only on that image.
Is the background image on the <body> element? If so, this should work:
<body>
Example Company
</body>
With this CSS:
a#logo_link {
position: absolute;
display: block;
visibility: hidden;
left: 42px;
top: 42px;
width: 42px;
height: 42px;
}
Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.
I've also placed the company name inside the link, since it's a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.
I provided an example answer. If you're allowed to load a JQuery library and can place the anchor somewhere on the page.
http://jsfiddle.net/XFvQD/
You would be looking for something like this:
<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
</body>
</html>
I want my html link to look like a real submit button. Any good codes with css? I have found some examples, but I want it to be more real than just a grey box.
Make a button image in your favourite image precessing tool and use these codes:
HTML
CSS:
.link_button
{
background-image: url(path/to/button_image.png);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
width: 79px; /*your image width*/
height: 35px: /*your image height*/
}
That should set up your link to look like a nicely styled button, that you created.
If you don't want to use an image, you can use normal CSS borders and baackground colors/gradients as well.
Regarding the this is so no text is shown on the image itself, another way to do this is with css: text-indet: -9999px; or you can use the text as part of the element like normal and just style the background :)
Do you mean you'd like to create links that look like buttons, but a bit nicer than the standard old grey box?
There are tons of tutorials out there for this: just search "css buttons". A good one is this: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
If your widget toolkit's theme does some snazzy theming (most do), you most likely won't be able to reproduce the button's look. Even if you could, it would only emulate your computer's theme.
Of course, if you don't mind your button not being consistent with normal buttons, there are many tutorials that allow you to create nice CSS buttons.
If you could consider actually using a button rather than a link, that'd probably be even better.