You were all so helpful last time, I'm hoping you can help me with something that has been bugging me for the last 2 days...
I installed a plugin on Wordpress called Snazzy Archives to show my archives in an interesting way. I like it, it's great BUT for some reason, there's a massive space between my H1 tag and my archives.. and the other thing that's annoying me is that I can't seem to get any spacing between the header image and the H1 tag, despite it being there on every other page...
Anyone able to help with this? The problematic page is http://www.electrickiwi.co.uk/blog/archives
Thanks!
Ross
You have the following in your markup:
<p>
<code> </code>
</p>
Right below the Post Archives h1. You should also review the margin and padding on the bottom of the h1; currently, it's adding about 26px total space between.
And then, to fix the spacing of the h1 to the menu above it, add clear: both; to the div id="container4".
Also, your div class="snazzy" has a child code block that doesn't appear to do anything.
Try a combination of removing
<p>
<code> </code>
</p>
and setting a margin:0; padding:0 to your h1.archives
Related
Hi i am new to CSS and i might be asking some school boy questions. I want to but a line break at the top of my post before and after my h1 tags. I might be trying to do this by the wrong method. Maybe i need some padding at the top but defiantly need a line break after each H1.
This is my css for posts
#kopa-post-content p,h1,h2,h3,h4 {text-align:left;margin-right:20px;margin-left:20px}
Example of what i am trying to do.
Any help will be gratefully received
Thanks
Danny
A h1 tag is a block element. It already has a "line break" before and after it. If you wish to increase the space above and below the element, use margin.
eg.
h1 {
margin-top: 10px;
margin-bottom: 10px;
}
You should not use <br> for styling. You should use CSS, and you'll have a lot more control, too.
What you're talking about is referring to HTML not CSS. You can use the tag in HTML to accomplish this.
<body>
some text
<br>
<h1>Some Title</h1>
<br>
some more text
</body>
On Wordpress i'm using youtube channel list plugin.
It works well, but the align of the videos don't looks great. Actually display diagonal list below the BIG video!
Can someone suggest me how to fix this issue with css?
here's the page
http://www.snowypeach.com/home/?page_id=1106
I need the list under the video aligned horizontal, not diagonal!
You have nested a <div /> as a child of the <ul />. This is invalid markup. Move the <li/> elements to be the children of the <ul />, delete the <div /> and it will work
EDIT
Okay I see the problem. You are wrapping all this content within a <pre/> tag. This tag shouldn't be used here but if you are unable to get rid of it add the style white-space: normal;.
I tested the previous answer by moving elements within chrome dev tools which removed the whitespace and therefore the problem.
Hope this helps :)
There is class ytc-columns4 on the below <ul> which is taking control over the alignment of the small video <li> tags
<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">
according to that class the below css is generating by plugin in the css file on line 66
http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1
.ytc-columns4 li {
width: calc(100% / 4 + 10px / 3);
}
i have changed the class ytc-columns3 and ytc-columns2 and result vary every time. I am not exactly getting where is the calculation part of the plugin. Other wise i can tweek the code.
This is the code:
<form id="the_form" action="">ev
</div>
<!-- final pay_block -->
<div class="linea"/>
<div class="spacer"/>
the linea is overlapping the buy button, now is in the middle because there is margin-bottom: 15px aplied.
Edit:
This is the site: http://tinyurl.com/cboyymm
also what I want is to display the pay button in the same position. I left space enough to product description, and I fixed a height to the diferents divs before. Is this the right thing? I want to make it in the most minimalism way. Tips are very welcome, as Im using this project to learn.
Thanks in advance. At first I was afraid of posting things here because I didn´t want to mess, and Im quite ashame Im so nob. But I found a very warm welcome. Dont want to abuse, just know why this little things happen.
Now define min-height
#pay_block {
min-height: 78px; // add this line
height:78px; // remove this line
}
Line No :- 612 in this css file tienda1.css
Result is this
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.
I'm kind of stuck on what seems to be something trivial but I just can’t get my head round it.
Basically I have the address div and then the menu..... Which should go under the address div but it’s seems to be floating next to the address div.
Any help will be much appreciated.
Add a clear directive to your menu:
#contact-menu {
clear: both;
text-align:center;
padding-top:90px;
}
That tells the browser that there are no floating elements allowed on either side of the contact menu.
Add clear:both to #contact-menu.
Frankly, <br /> would probably do the trick. But if you're like me, you think that <br /> is for text only. #address{display: block;}#contact-menu{display: block;} should do the trick, as block elements force a line break before and after the element. Didn't bother editing the CSS; hope it helps.