I've having trouble understanding whats going wrong in the css on this page.
On the left sidebar there a h3 element called testimonials with a 3px green border underneath it.
http://goo.gl/L7Lio
For some reason the border goes right up to the text in the next column next to it.
However on this page which use's exactly the same css it doesn't have that problem everything is aligned in the left sidebar correctly.
http://goo.gl/oL3km
Your CSS class of the content is floatright posts and its width is 500px. The rule is set here:
.single-page-testimonial .posts {
width: 500px;
}
The CSS class of the content of the correct page is post floatright sidebar-exist (with the additional sidebar-exist class) and its width is 490px. The rule is here:
.single-page-no .post.sidebar-exist {
width: 490px;
}
So your main content is wider than the correct one 10px. I think you may miss the class sidebar-exist somewhere.
The content DIV has 490px vs 500px (here it is the space of 10px)
.post h1, .mid-title {
border-bottom: 3px solid #004732;
color: #004732;
font-size: 18px;
line-height: 30px;
margin: 10px 0;
padding: 0;
} this css style is overwriting your h3 style,dude to which your facing that problem.
Solution:
just replace margin: 10px 0; with margin: 10px;. this will solve the problem, i`ve checked in firebug :)
Happy coding :)
Related
I am adding custom CSS to my Wordpress theme to add a border to all images - however I need to figure out how to exclude the logo images in the header and the footer so that they don't have a border around them. Any ideas?
I've tried using the :not command in CSS, however I cannot figure out how to add a class to my header logo and my footer logo.
Here's the simple code I am adding to style the images:
img { border-radius: 4px; border: 1px solid #dddddd; padding: 4px; }
The hard part is now figuring out how to stop that CSS from putting a border around the images in the header and the footer.
Here's the page where I am trying to do this:
http://disaprimary.co.za/silikamva/about/staff-and-teachers/
I suggest to add a class to the images in footer and header like this:
<img src="" class= "noborder">
And in your CSS:
img:not(.noborder){
border-radius: 4px; border: 1px solid #dddddd; padding: 4px;
}
simply add the below given css:
a.brand img {
border: none;
}
div#media_image-4 a img {
border: none;
}
It will exclude the border of header and footer logo images.
I have the following RSS feed:
https://jsfiddle.net/yhtf36a1/
Right now, it gets displayed one below the other.
How do I use CSS to make it display two items per row, so that it looks like the following?
I tried using display:inline-block but that didn't work.
Use the following CSS:
.entry-wrapper {
float:left;
width: 48%;
background: lightblue;
margin: 1%
}
See the example here: jsfiddle.net/GillesCoeman/5e8z00z1
Hope this helps
*{font-family:arial}
.rssRow{display:flex}
.entry-wrapper{display:inline-block; margin:.25em;background:#f3f3f3; border:3px solid #f1f1f1; background:#FFF;padding:10px;border-radius:5px;}
.entry-wrapper:hover{background:#edfdff;border:3px solid #f4f4f4}
.entry-image{float:left;}
.entry-text{float:left;}
.entry-title h4{margin:0; font-size:1.5em;font-weight:bold;}
.entry-title h4 a {color:#333; text-decoration:none;}
.entry-title h4 a:hover{text-decoration:underline;}
.entry-date{color:#999; padding-bottom:.75em;font-size:.75em}
Preview at https://jsfiddle.net/itsselvam/yhtf36a1/3/
Let me know for any query on this
I have these two styles that position my div in the footer of my page. What happens is that when you generate the content of the page for php, these div can override the content.
div.panel-foot {
position: absolute;
z-index: 2;
height: 30px;
width: 100%;
bottom: 0;
color: white;
background-color: #333333;
white-space: nowrap;
padding: 5px 100px;
}
div.panel-foot-information {
background-color: rgb(65, 65, 65);
position: absolute;
bottom: 30px;
max-width: none !important;
z-index: 1;
color: white;
font-size: small;
padding-top: 10px;
padding-bottom: 10px;
}
So what I do is when the content is small they stay on radapé ie with position: absolute, and when the content is longer they stay position: relative.
Anyone know a solution to resize content dynamically?
Unlike the other answers so far, I'm going to assume you have images and other things that a real website has, besides text.
I suggest using Javascript (since you've got a jQuery tag). PHP ultimately has no idea how much space the content will take up in the browser, so JS is your best option.
Have a look at my example here. If you remove some of the div content, you will see the footer color changes (because it changes the classname). all you have to do is plug in your own selectors and classnames and you're good to go.
// check the size of your conent div
// assuming it's got an id of "content"
contentHeight = $("#content").height();
// set the threshold that will determine how big is too big
threshold = 300;
// or if you want to make the threshold as big as the window...
// threshold = $(window).height();
// if the content height is greater than the threshold..
if(contentHeight > threshold){
// remove one class and add another
$("#footer").removeClass('green');
$("#footer").addClass('red');
}
// otherwise, do the opposite
else{
$("#footer").removeClass('red');
$("#footer").addClass('green');
}
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:
I want to be able to write any length of text and rounded button will stretch automatically based on text.
Please help me on how to write CSS for to get this working ?
Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks
Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.
In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.
ul {
list-style-type: none;
}
ul li {
height: 31px; // height of the background image *reused below
margin: 10px; // width of the left image *reused below
float: left;
background: url(left.png) no-repeat top left;
}
ul li div {
height: 31px;
margin-left: 10px;
padding-right: 10px;
background: url(right.png) no-repeat top right;
}
//used with
<ul>
<li><div>text</div></li>
<li><div>texttexttext</div></li>
<li><div>texttexttexttext</div></li>
</ul>
I would probably opt for creating a div which inherits a css class like the following
<div class="button">TEXT HERE</div>
The CSS would be the following:
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }
The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images