I am trying to fix a Facebook Like button to a particular position on top of a header image on WordPress, but am having trouble with the CSS styling (and potentially id's vs classes)
On this website, I want to place a Like button below the 'Join us Now' text in the blue section of the image header image.
I tried to create a seperate div class and position it, but my knowledge of fixed/absolute/relative is pretty shoddy, to say the least. It did an absolute position, but it doesn't stay with the image when I resize the browse window. (We're targeting young students for our campaign, and so a lot will be visiting our sites from small laptop screens and smartphones, so has to be responsive)
Does anyone have any idea how I can do this?
Thanks :)
Edit the layout of your HTML elements so that your like button is positioned below your main image link like this:
<div id="header-banner" style="width:100%;height:300px;">
<a href="http://www.w4u.org.uk/">
<img src="http://www.w4u.org.uk/wp-content/uploads/2013/02/copy-home-banner.jpg" class="header-image" width="960" height="250" alt="">
</a>
<div class="fb-like"></div>
</div>
Once that's in place adjust the CSS for the like button by adding this to your inline style that's already in place:
top: -98px;
Here's an image of what it should look like after you make the changes:
Related
I created a new Blazor server-side project.
So default clean layout.
I wanted to make a card/column layout on my page.
But when the page is getting big, I can scroll the page, so when I scroll down, the "card" will hover ABOVE the top row menu bar. That is the same issue when using "div class col"for example.
Example to make it more clear
It does not happen when I use img tag, so if I would make 10 big images between the img tag to force the website to have a scrollbar, the images are behind the top row menu.
But just between a "div" with no col, that is still fine, but is not, this will hover OVER the top row.
<div class="row">
<div class="col-1">
<img class="card-img-top" src="Images/63.gif" style="max-width:100%;">
</div>
</div>
So how can I make sure that the top row bar is ALWAYS on top and that everything will always be behind it like when using a simple <img> tag?
Thank you!
In Blazor the default template has the top row with a CSS class of top-row, so hop into your site.css file and add at the bottom:
.top-row {
z-index: 100;
}
This should bring the top row forward toward the viewer like you are asking. You might need to play with that z-index value to get it where you want it, but this should help.
(Note, we are still new to web development, and I have only just joined the team to help and therefore don't know the exacts of the html code)
I've attempted to look on stackoverflow for similar questions, but not of the people have the exact same issue. I am attempting to help a team out with their web development. One issue they are having is the the images won't remain within their respective bubbles (see image) when a user zooms in or out. Here is the website: http://2016.igem.org/Team:Rice
Here is an example of some of the markup that is responsible for the images:
<div>
<img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
style="float:center;position:relative;left:50%">
<img id = bubble
src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px
style ="position:absolute;left:64.1%;top:35.3%">
</div>
The first picture is the Purple bubble, and it would be ideal to have the "bubble" images to be within the burble circles; and it would be nice if they would stay in the circles, regardless of zooming or differences in resolution.
What I've tried:
I've tried to change the position attributes but this didn't seem to do much. I've also tried to change the percentages to pixels. While this worked by keeping the images still while I zoomed in and out, the pictures still were screwed when I checked on another computer with a different resolution.
I ended up changing the div element to be position: absolute
<div sytle = "position: absolute">
<img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
style="float:center;position:relative;left:50%">
<img id = bubble
src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px
style ="position:absolute;left:64.1%;top:35.3%">
</div>
So far this seems to do the trick
You need to use position:absolute on the background image.
I'm doing my online portfolio website and I have a responsive problem (i always have responsive problems, hate this thing).
This is what I want my website to look like in all of screens resolutions:
https://s3.amazonaws.com/f.cl.ly/items/0W3k3Y0C3L2O2m2J2P1I/resolution2.jpg
The problem is, as you may know, when I code this in html even with Bootstrap, the the big text (designer, no matter what) covers me in the right, depending on the screen size.
How can I "fix" the text in the image so that no matter the screen size the text always stays in the same place of the image?
<img> tags do not have an option to add text on it.
You can use images as background and add text. You can use <div> tags to server this purpose. Something like below:
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
background-image: url(locationoftheimage);
}
For smaller area's you can just make the image as link, if you want. For example your menu has links such as Home, About etc.
Make a small image like this
Code would be like this:
<img src ="url_of_Image">
I've searched this on here as well as on google and can't seem to make it work. I'm trying to put images directly on top of another. This is for the menu of the site. I've tried using the z-index, which i believe I am using wrong. So I'm trying to simply set the one image as the background of the div.
here is my current code:
first the html:
<center>
<div id="menu1">
<img id="homebutton" src="./images/newmenu/homebutton1.png">
<img id="registerbutton" src="./images/newmenu/registerbutton1.png">
<img id="aboutbutton" src="./images/newmenu/aboutbutton1.png">
now the css:
div#menu1{
background-image: url('./images/newmenu/menubar.png');
}
The background image which is the solid red bar with gradient does not appear. Here is a screen shot of the page.
as you can see the buttons load but the background does not. If someone could please tell me what I'm doing wrong it would be greatly appreciated.
Your links have images in them (with the navigation text I assume). The background of those images is going to appear over your background image, so your background image will not be seen.
Have to change the question entirely upon discovering the cause.
I have searched the forums and cant really find something exactly for what i need, though there are similar things. I am in no way familiar with jquery, so would rather avoid that if at all possible. I can do HTML and CSS though.
I have a webpage i am designing that contains several containers. The overall parent container has an image, and then i will have empty divs within that container.
I want to make each div like a check box, so when it is clicked an image of a checkmark will appear.
how do i get this empty div to display an image only when it is clicked? my site is not launched yet and is still in design so i cant link to it. If any more info is needed please let me know. my html looks like this:
<div id= "parent container">
<img src="background image">
<div id="container1> i want this to be an empty div that when clicked shows an image</div>
<div id="container2> i want this to be an empty div that when clicked shows an image</div>
</div>
css looks something like this:
parent container { width:100%; display:block; margin: 0 auto;}
container1 {width:20%; display:block; top:10%; left:60%; height:20%;}
etc
basically i am trying to design my webpage to look like a cartoonized application (the background image is the application base). i want the user to be able to click the check boxes for whatever applies to him, and when he clicks it a check image appears.
any help would be appreciated!