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
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 7 years ago.
Improve this question
In my code I set the text to be red, but it is not working. Can anybody help me with this? JSFiddle: https://jsfiddle.net/uk1u62vf/2/
Thank you!
Add p into
.list-item > .card {
color:red !important;
}
Should look like this
.list-item > .card p{
color:red;
}
you could also replace it with
.content p{
color:red;
}
EDIT: Explanation
You didn't target paragraph element. You have targeted div element with class card which is parent of div with class content which is again parent of paragraph you are trying to target.
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 7 years ago.
Improve this question
I have a link in a and it isnt lining up. You can view it here http://104.236.190.78/technology/
I added this css to try and shove the links down:
a{
padding-top: 3%;
}
I also tried that used 30px and it also didnt work. Any help is appriceated. Thanks.
Your screen.css (bootstrap) has a line-height:1em for some reason, this css should override it.
Add this to your CSS
body .content a {
line-height: 0;
}
Try this
a{
line-height: 33px;
}
In your html document (line 480) you are globally styling your anchors with the following code a{line-height: 33px;} which is causing your footer link to be misaligned. Take a look at the code and make some adjustments or delete it if it unnecessary.
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 8 years ago.
Improve this question
http://thepositiveclassroom.princetonsquarepress.com/dd-product/the-positive-classroom-method/
On this page the Take A Look button is staying to the bottom of its div, and I can't for the life of me figure out how to fix it.
Floated elements need be first in html markup. Or remove float and add display: inline-block;
Take out the empty <p> tags that are encapsulating the "Not Sure" text.
Remove the float:right; from the button.
Then add display:inline-block; to the button. If you want more space between the top and bottom borders, add padding to .product_sample_download
You got to put the
html .singular-dd-product #primary #content .entry-header p {
padding-bottom: 4px;
float: left;
}
on float:left!
Edit: You have a very wicked responsive-design-rule-set.
I would go for
.p ( before button )
{ display:inline-block; }
a. ( the button )
{ display:inline-block; }
Then you can work with vertical-align.
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a page set up however I am having trouble aligning the news articles to the center of the page.
Here is a link to what I have so far -
http://casb1.cloudapp.net/1016/1be61016ff9a717aa34c2adf7c5aa79e/3D%20Design/news%20articles/news.html
Basically I need the red area to always be the same distance from the edges, even when it expands. Is this possible?
The red container has the css of position:absolute
Any help would be hugely appreciated.
PS. this is only my first week of learning css and html so please forgive me if it is something simple.
Thanks
I think you don't need the position:absolute you can delete this property and add this:
.collection {
display:table;
margin:auto;
}
There's a lot that can be impoved, but going to your question, I'd do something like this:
.collection {
position: static;
display: inline-block;
}
.roundcont {
text-align: center;
}
You basically need to remove the position: absolute; attribute from your .collection element and change its display to inline or inline-block and then set text-align center; to its parent div so now it looks centered.