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.
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 2 years ago.
Improve this question
Im looking to replicate something like this but as a relatively new guy to CSS, I cannot for the life of me figure out the appropriate CSS to create this shape around the text.
image example
Really appreciate any help you can give. Thanks in advance!
There are multiple ways to do this. But you can split it in 2 separate shapes.
Rectangular shape ( background of the text ) and a triangle using a pseudo element.
See below
Tweak around with the border values of the after element to achieve exactly the shape you want.
span {
position:relative;
color: white;
background: blue;
padding: 10px 0 10px 10px;
margin-top: 10px;
display: inline-block;
}
span:after {
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 20px solid blue;
position: absolute;
right: 0;
transform: translateX(100%);
content: '';
top: 0;
}
<span>
My Text
</span>
There you go
Note that you can play around with the border-left value in #snippet:after to increase or reduce the "arrow section"
#snippet {
width: 200px;
height: 150px;
background-color: red;
position: relative;
}
#snippet:after {
content: '';
position: absolute;
top: 0px;
left: 200px;
border: 75px solid transparent;
border-left: 30px solid red;
}
<div id="snippet">Hello</div>
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 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 want to create a Arrow shape CSS like this one
Screenshot
I want to create a next and previous post button like this... please help
Use pseudo element and CSS triangle :
.arrow-right,
.arrow-left {
position: relative;
display: inline-block;
height: 20px;
padding: 0 6px;
color: white;
background-color: #A5A5A5;
}
.arrow-right::after,
.arrow-left::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
}
.arrow-right::after {
right: -10px;
border-color: transparent transparent transparent #A5A5A5;
border-width: 10px 0 10px 10px;
}
.arrow-left::after {
left: -10px;
border-color: transparent #A5A5A5 transparent transparent;
border-width: 10px 10px 10px 0;
}
<div class="arrow-right">Lorem</div>
<br>
<div class="arrow-left">Lorem</div>
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 want to create a title with a background like this:
But there is a problem, as you can see in the picture, there are 3 different backgrounds:
The first one is for the whole page
second one is just a circle
third is a black line.
I want to create this title but i have problems with backgrounds.
I've tried including Span tag into title h3 ... didn't work.
what should I do?
P.S: I want to make this background for all titles backgrounds, so I don't want to create just one background for one title, I want it to be responsive and look good on any title.
the markup
<h3>Meet the Team</h3>
the style
h3{
width:320px;
height:40px;
text-align:left;
background:black;
color:red;
padding:10px;
line-height:40px;
position:relative;
}
h3:before,h3:after{
position:absolute;
content:'';
}
h3:before{
width: 20px;
height: 20px;
border-radius: 100%;
background: #2C2C2C;
right: 174px;
top: 20px;
box-shadow: inset -2px -1px #3F3D3D;
}
h3:after{
width:160px;
height:4px;
background:red;
background: #2C2C2C;
right: 14px;
top: 28px;
box-shadow: inset -2px -1px #3F3D3D;
}
Demo:http://jsfiddle.net/9U8NQ/
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