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!
Related
I am using WordPress and I want to make the header and the div below it to share the same background image.
I have added the div in the WordPress page using Visual Composer and given it a background image, but the only way I can make it go into the background of the nav is by giving it a negative margin-top value, which of course makes it non responsive. Could anyone give me any pointers?
Since you dont have any code, i cant really SEE what you want to do but, i assume what you need to do is something like this
<div id="mainTOPwrapper">
<div id="header">header content here</div>
<div id= "divBelowIt"> lolz at the div name =) </div>
</div>
And then, you give the background image css to "mainTOPwrapper". Make sure the divs within it dont have any backgrounds, and this will work for you
I made some changes to a website for someone and it works and looks perfectly when I open them in chrome, but as soon as I upload them on to the iPage server and look at them on the actual site everything is broken.
The index page is the only page that looks how it's suppose too. I've exhausted most of my resources and the person is furious. Anyone have any ideas as to what could be causing this?
If you haven't already, wrap all the buttons inside a container. Make the buttons width 25%, float them left and then position the container, as you haven't provided any code i'll provide an example for you. This should solve the problem.
Inside the container where the buttons are, create a new div and call it button container and wrap it around buttons.
<div id ="button_container">
//button tags go here
</div>
For CSS assign the width and height to the button container and for the buttons including the css you have now.
#button_container {width:25%; height:30px;} //example dimensions
#button1, #button2, #button3, #button4 {width:25%; height:100%; float:left;}
make sure the container has a margin so that is above the other content. you can also make the container 100% width to match the width of it's parent.
I'm new to Sharepoint, so I'm having difficulty with some basic stuff. I've already posted this to the SharePoint StackExchange, but I thought I'd try my luck here as well. Let me know if what I'm doing is wrong, and I will remove my post from here!
My end goal is to basically make something that looks like this.
You can see what my current page looks like on the first image of this link. On the second image of that link, you can see how the layout looks in Sharepoint. As you can see, it's just a bunch of content editor web parts with html/css in them. I apologize for making the image pretty zoomed out, but in case you can't see there is a header section, a top-left section, a right section, a center-left section, a center section, and a center-right section.
There are a few things I need to change to my current page to make it look like what I want.
I need to make the paragraph expand the width of the paragraph at the top (I want the width for the header section to reach all the way to the end of the last blue box on the right)
I'm having trouble fixing the Right section of the webpage. I needed to use a lot of margin-top on the first blue box in that section in order to line it up with the rest of the boxes. But, as you can see from the third image of the link, there is an issue when I zoom out, which makes me think that it will not look right on different sized screens.
Last, and the part I'm having most difficulty with, is changing the color of all of these boxes to white and then putting them inside a blue background. I'm trying to make it look that first link, where I have a heading with a paragraph, and then the boxes underneath that paragraph are all inside a blue background. I am not sure how to go about doing this considering that they are all in different web parts so I wouldn't really know how to put them all inside a container.
This is what the code looks like for the boxes if it could be of any help, it basically just looks something like this:
<!-- Large Box -->
<div class="largeBox"></div>
<!-- Small Boxes -->
<div class="box"></div>
<style>
.largeBox {
width: 800px;
height: 250px;
background: rgb(0, 122, 201);
}
.box {
width: 250px;
height: 250px;
background: rgb(0, 122, 201);
}
</style>
And that's pretty much it except for very slight margin-left and margin-right to align some of the boxes.
Sorry again if I'm asking for way too much, I'm just very new to Sharepoint and it's taking me a bit of time to get used to it. Any help would be very much appreciated.
There are several similar questions posted, but none that I found addresses my situation.
I would like to list items for sale, each in their own div. When an item sells, I'd like to place a transparent "sold" banner over any such item without fully obscuring the image. I will need to delegate someone else to add the "sold" banner in the code without the need for me to do this. So the simpler the method, the better.
Most, if not all, solutions on this site recommend creating the overlapping banner image in an absolutely positioned div. That secondary div contains an img src. This is looking like a lot more code to confuse the helper.
I gather it would be semantic and a lot easier if the transparent SOLD banner were a background. If I'm not mistaken, then all that would be needed is a simple class to add to any existing div. For example:
<div><img src="folder/item3.png"></div>
... becomes
<div><img src="folder/item3.png" class="sold"></div>
... thus doing away with a second div to contain the SOLD graphic. I tried this, and it appeared to work, but the banner remained stubbornly behind the item and no amount of Z-indexing and absolute positioning would get it out front where it belongs. (Actually I can't absolutely position this anyway since it interferes with the overall layout.)
I hope that someone can suggest a way to do this that solves the problem.
You cant use a background of the div containing the image because the background would always be under it. Unless you want to set the product image itself to a background and then just put the sold graphic into it as an image.
What I would do is, firstly you need your div containing your image to be position:relative. Then put another div inside it for the sold icon which is positioned absolute. z-index the sold icon above it.
e.g: http://jsfiddle.net/z2V2B/1/
html
<div class="imgholder"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>
<div class="imgholder sold"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>
css
.imgholder {position:relative; z-index:1;}
.soldicon {position:absolute;
z-index:2;
top:0;
left:0;
width:177px;
height:138px;
background:url(http://www.flq.co.nz/images/icon-sold.gif) no-repeat top left;
}
.sold .soldicon {display:block!important;}
.soldicon {display:none;}
-- ADDITIONAL 30/05/14--
If the SOLD label is overlapping the image -- which was originally linked to another page
...dit the code so that the sold div also has a link inside it to the same place as the image. Then add the following css:
.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;}
what this will do is create an invisible link (because the text will be indented off the page that is the full width and height of the sold icon div - it will seemlessly be as if the whole image is clickable again and not obscured by the sold icon
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: