Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What is this? Button or Select ? How do like this by HTML and CSS ? Thank
This is most probably a styled select element. Take a look at this tutorial http://css-tricks.com/dropdown-default-styling/
This can be a simple div with 3 elements in it.
1) The image - with the top and the bottom arrow.
2) The ul tag - when clicked on the image, the ul's get displayed.
3) The label - when any of the li's is selected, its value is copied to the label
you can do thing like this with simple div. something like that
<div id="button"><span>Location</span></div>
#button
{
width: 100px;
height: 40px;
background-color: grey;
border-radius:15px;
position:relative;
}
#button>span
{
position:absolute;
top:10px;
left: 10px;
}
I actually made a plugin that lets you do this here is a link; just download the files include the script and css run
$('document').ready(function(){
$('select').niceselect();
})
and you can then style it however you want using css.
http://projects.authenticstyle.co.uk/niceselect/
This is a Select element.
Check this Example : dropdown list
advice how to solve that kind of problems
IF you are using Chrome,Firefox... you can right click on any element on page then inspect element
and see HTML CSS even JS for that element
Read more about Chrome Developer tools
https://developers.google.com/chrome-developer-tools/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I can only change the pictures using HTML and CSS. Clicking on the middle image, I want to see her big form, click the picture on right and see her big picture.
you can use image size:
img.resize {
width:500px; /* you can use % */
height:500px;
}
and for selected image you can use this link:
https://www.w3schools.com/cssref/css_selectors.asp
You can use element.active of Css
img:active {
width:200px;
height:220px;
}
You could use the CheckBox Hack for that.
When the checkbox is clicked, you increase the height and width of the image
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just started to work with HTML and I wanted to make a site which has got a colour on the upper side, an another colour on the lower side. I did some research, and I discovered that you got to work with divs. Can you make a nice div in HTML, or do you got to make a div in css (which does fit correct to my site)?
Create your divs in your body with id's
<div id="upper"></div>
<div id="lower"></div>
and then using css you can change some attributes such as color and size, for example in either an external css file or inside of style tags you can do this.
#upper {
background-color: blue;
width: 100px;
height: 100px;
}
#lower{
}
w3schools.com is a great resource for beginner web development, check it out.
Div is a html element. You can set its properties through css but a div doesn;t exsist in css. It is just a way to divide up section in html. Here is some basic information about divs.Divs Info
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm wondering how sites such as Facebook, and TeamTreehouse make their navigation buttons custom shaped.
Like this:
(From teamtreehouse.com)
https://gyazo.com/47e09a6d70019b5b8d93549af20f1a9c,
and this,
(From facebook.com)
https://gyazo.com/32de164e941c4f80355bd3d0b6045abe .
Can someone please explain to me how you make these custom shaped buttons? :)
Thank you!
Note: Sorry for using links instead of images, don't have enough reputation...
You don't have to use buttons for that.
It can be a simple A tag and give the with, size and background using CSS. You can also give :hover status with this technique.
<style type="text/css">
.icon{
display:block;
width:20px;
height:20px;
background-image:url(your-image.gif) bottom;
}
.icon:hover{
background-position:top;
}
</style>
A simple quick tip is use bootstrap. And then customise.
If you want to create your own button style from scratch use CSS properties like -moz-
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've made this fiddle to demonstrate: http://jsfiddle.net/Trblestrife/9HCCU/1/
Basically I'm applying a black background
#000 to the ID #footer-sec (line 182), however the black background is being applied to the ID #footer-prim.
Confusing!
If someone could give me a hand working out what's happening, if there's something wrong with my semantics or something that'd be great. I'm pretty new to this.
Thanks A
Edit
My styling begins in the CSS column at line 150. Sorry to make it so bulky, but I need a quick fix as this is a pretty simple problem so I just copy & pasted my whole reset sheet rather than adding only relevant styles. Sorry again!
Because you are floating the ul inside #footer-prim and #footer-sec those elements float outside their parent (resp #footer-prim and #footer-sec).
The solution is to let the parent know that there are elements inside it that float, by using the following code:
#footer-prim, #footer-sec {
overflow: auto;
}
Also check the updated Fiddle.
Set float:left. Try this:
#footer-sec {
background-color: #000;
color: #999;
float:left;
}
Demo
You could do it like this:
Adding: display: inline-block;
CSS:
#footer-sec {
background-color: #000;
color: #999;
display: inline-block;
}
DEMO HERE