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 am trying to code a design into HTML and CSS. It is a small snippet. I am having issues with the positioning and cant seem to put elements in their correct places.
My webpage can be found at http://www.sarahjanetrading.com/js/j/index.html
The design that I want to copy can be found here: http://www.sarahjanetrading.com/js/j/people-list.png
I also want the checkbox input to look like the one in the design. Can checkboxes be styled?
Change Your CSS like this :
#people-list #content h2 {
font-size: 16px;
float: left;
margin-left: 10px;
margin-top: 5px;
width: 355px;
}
#people-list #content small {
font-size: 12px;
color: #8F9092;
margin: 5px 0 8px;
display: block;
float: left;
width: 355px;
display: block;
margin-left: 9px;
}
#people-list #content .tags {
border-radius: 7px;
box-shadow: inset 0px 6px 2px 8px #f5f5f5;
border: 1px solid #E3E3E3;
padding: 2px;
font-size: 9px;
margin-right: 3px;
margin-left: 10px;
}
and Check this link for styling checkbox
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
yes ,checkbox can be styled, try to put the buttons in a div and change the display attribute to inline
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 6 years ago.
Improve this question
I have a little CSS issue right here. I'm creating a simple button and I have the desired effect and all; but the button doesn't stop and acts like width:100% while I have width set to auto. I have put my code below and the effect is currently has.
>> CURRENT OUTCOME
a.abutton {
display:block;
background-color: #49b4df;
background-image: -webkit-linear-gradient(#49b4df, #2497c5);
background-image: -moz-linear-gradient(#49b4df, #2497c5);
background-image: -o-linear-gradient(#49b4df, #2497c5);
background-image: linear-gradient(#49b4df, #2497c5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#49B4DF', EndColorStr='#2497C5');
width: auto;
height: 31px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 2px 5px 5px 5px;
border: 0px none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-moz-box-shadow: 1px 1px 2px #919191;
-webkit-box-shadow: 1px 1px 2px #919191;
box-shadow: 1px 1px 2px #919191;
}
Question: How do I stop the button from expanding and stop where the text also stops?
Try to change
display: block;
by
display: inline-block;
"width:auto" inherit the parent "width" with a "display: block."
You need to change the display to inline-block
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 7 years ago.
Improve this question
I'm trying to tighten the border under the navigation menu. This is the CSS code I have:
CSS:
li.current_page_item a {
border-top: 0;
border-bottom: 3px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
}
My website http://www.verbatimagency.com
Try this:
li.current_page_item a {
border-top: 0;
border-bottom: 2px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
line-height: 0px;
height: 0px;
padding-bottom: 10px;
}
li.current_page_item {
line-height: 0px;
padding-bottom: 0;
height: 0;
}
It was the padding-bottom on the <a> tag. See the corrected preview:
You may need to adjust it accordingly.
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 the list items as follows. I'm using an Angular JS application. I need to represent them as drop down menu simply by using CSS. I should not include any JQuery js file
English
Español
Française
Italian
Here is my fiddle.. http://jsfiddle.net/CDrLV/
Can any one look into the following code?
You will want to hide the list with display: none; then show it again on hover.
See this jsFiddle for an example
with this you can http://jsfiddle.net/RdNw4/3/
But I don't know if it's work fine in IE. (probably not)
Help yourself with layout.
HTML
<div class="nav">
<div>Select Language</div>
<ul>
<li>English</li>
<li>Español</li>
<li>Française</li>
<li>Italian</li>
</ul>
</div>
CSS
* {
padding: 0;
margin: 0;
}
body {
padding: 50px;
background: #f3f3f3;
}
.nav {
padding: 10px;
border: 1px solid #ccc;
display: inline-block;
background: #fff;
position: relative;
}
.nav ul {
padding: 5px;
border: 1px solid #ccc;
display: none;
background: #fff;
list-style: none;
position: absolute;
top: 100%;
left: 0;
}
.nav:hover ul {
display: inline-block;
}
ps: I saw it here http://jsfiddle.net/UR4Up/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Can I ask how to change the css of my theme to make the page looks like this http://katiefreiling.com/ this site has its navigation which is purple not extended until the left and right corner. My navigition seems to be extended from left and right corner and my content and footer too. Is it possible to have a style or format similar to the link above? Thanks in advance this is my website http://michelebrunello.com/.
It is better to learn the concepts first and then ask questions. I don't know what picture is in your mid exactly but as per your demo website given i have added few css rules in your css please see the below css rules and try to add in your css.
line 35 white.css
#topmenu {
background: none repeat scroll 0 0 #212983;
border-color: #FFFFFF;
border-style: solid;
border-width: 1px 0;
margin-left: auto;
margin-right: auto;
width: 940px; }
line 11 white.css
#footer-widgets {
background-color: #FAFAFA;
border-top: 1px solid #E6E6E6;
margin-left: auto;
margin-right: auto;
width: 960px; }
line 901 style.css
#footer {
background: url("images/bgr-box-trans.png") repeat-x scroll 0 0 #E4E2DB;
border-top: 1px solid #EEECE6;
font-size: 11px;
height: 32px;
line-height: 22px;
margin-left: auto;
margin-right: auto;
padding: 20px 0; }
Try to implement the css first.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
There has been some controversy regarding the practice of doing the following:
a, input, textarea, button {
outline: none;
}
Accessibility issues are a common concern.
It is not my intention to remove this feature altogether (as the code above does); however, this feature greatly messes with my original design by adding unintended borders (erm, outlines?) in unwelcome areas.
The main problem is that these outlines actually follow the rectangular area around the element, not its contour (i.e. it ignores border radius, etc.).
Example:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
The only solution of which I am aware is to have the above code running and employ my own system.
What are the best practices when taking this approach?
Indeed. An outline is around the rectangular area on the outside of the border. It doesn't take rounded corners into account.
There's nothing wrong with disabling the outline, just make sure you add some other accessibility feature for people using the keyboard, for instance, change the color of your background on focus:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
outline: 0;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
input:focus {
border-color: #999;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
As many form elements, the button element has different renderings in browsers, and as many fixes are needed...
http://fvsch.com/code/button-css/ from F. Verschelde should let you outline buttons around the whole element and not around its content.