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-
Related
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 1 year ago.
Improve this question
Good day everyone! I am trying apply a background image via an image link but I do not know how to make it work. Does anyone know how to make this code works. Thank you.
background-image: url("https://www.logodesign.net/logo/building-on-crescent-4303ld.png?
size=2&industry=company")
You are not supposed to use HTML for setting a background image. You should learn css.
But here is an example if you want a taste:
<div class="your-class">
<style>
.your-class{
height: 500px;
width: 500px;
background-image:url("https://www.logodesign.net/logo/building-on-crescent-4303ld.png?size=2&industry=company");
background-size:cover;
}
</style>
Instead of exporting via html, you can do it with css operations.
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 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/
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 8 years ago.
Improve this question
I have yet another alignment issue that needs to be solved. I'm no CSS expert, so I need the experts' help. I have tried playing around in Firebug but I couldn't figure it out.
Site where this issue is present: http://bit.ly/13KG6dz
(Using bit.ly because IP addresses are not allowed - don't worry its not a virus)
Note that I CAN change any CSS file being called in this page, but I CANNOT change the HTML code of the page itself, because the HTML code is server generated.
The issue is this:
Shown in red in the picture below:
Anyone know how to fix this ?
You should float it like the rest of fields in the group
#option-231{
float:left;
}
label is basically block element.
use any css display property for desired result.
like
.classNameOfLabel {
display: inline
}
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 4 years ago.
Improve this question
I'm currently building a signup form and I find myself resorting to tables in order to align things properly e.g. the MySpace equivalent where I would use a colspan to achieve the even spacing between the three birthday text areas and the other text inputs. Is this going against conventions and should I be looking into more advanced CSS?
I think you should drop the table all together and use more CSS.
You could look into this: http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
I prefer using Divs, floats and margins and not tables
It is generally against conventions. You should be using CSS to position your elements here. The CSS needn't be advanced though. E.g.
<div class="field-name"><label for="birthday">Birthday</label></div>
<div class="field"><input class="text-field" name="birthday" type="text" /></div>
CSS can be added to these elements.
.field-name{ float:left; width:100px; }
.field{float:left; width:150px;}
This should then position your fields next to each other. I'm not sure of your layout, but this is a simple example really. You can remove the divs as well if needed and change the CSS accordingly. I hope this helps.