Well if you check out the theme I'm making with my own knowledge, (DaniThemes) the entries are way too far from each other. That's because of this part of the css:
margin-top:1050px;
I don't want the posts to be on the top, I want them to be away from the top because there's where the header is. Using 'margin-top', the posts are away from the top BUT they are away from each other too...
What can I do about this?
Adding the following css should fix that problem:
.post:first-child {
margin-top: 1100px;
}
and remove margin-top: 1100px; from .post
The above should only add the 1100px to the first post and not the rest.
Related
I've wanted to replace the letter menu (left hand side) that I have in my personal web site for quite a while. I went looking for a decent accordion style menu and found this one that looked like it would be fairly easy to implement and do what I wanted.
Changed things around a bit so that the menu, by itself, looks like this.
Okay, so far so good. Until I try to drop it into my existing development web pages where it only basically resembles the 'stand alone' menu.
I've looked for conflicts in the CSS - but not being good at it, I found none. Can any of you gurus offer some pointers for me.
My apologies for including the links, but that was the best way, I think, to show what's happening.
I see that others have used the same basic menu but can't find anything resembling what I'm seeing.
//al
(edited this to remove two words - grammar!)
Your menu is embedded within:
<div id="container">
<div class="menu-item" id="menu-item-4">
...
Your #container style creates padding space:
#container {
padding: 0 20px 0 10px;
}
Putting it under the nav style like in your example of the menu by itself should solve the problem:
<nav>
<div class="menu-item" id="menu-item-4">
...
I believe on the first site demo, the author used a reset margin and padding to 0 to all elements, using the * selector, like so: * {margin: 0; padding: 0}, I think you're missing that in your css, for the following:
.menu-item ul, .menu-item h4{
margin: 0;
}
AND also your #container has a padding on the left side, I don't know if its something you wanted, but if you want to make it like in the demo site, you could just remove it:
#container{
padding-left: 0;
}
Im developing a site using Wordpress and id like to move the social network icons to the bottom of the page (icons are over at the top of the left hand panel)
http://www.chessfusco.com/flowers/
Ive dug around on this site and tried some of the things people have suggested in relation to sticking a footer at the bottom of the page etc but i just cant seem to get it to work!
Would anyone mine giving me a hand?
Yous
Chess
Just add this in your markup
<div class="dock-panel-wrap" style="position: fixed; bottom: 0;">
See
Add the following to this class:
.dock-panel-wrap {
padding: 0 20px;
position: absolute;/*Add position absolute*/
bottom: 0;/*Add bottom at 0*/
width: 100%;/*Set width to 100%*/
}
It's hard to know for sure without knowing what theme you use. A good start would be to check 'Appearance' > 'Widgets'. With any luck, the social icons will be a widget, that you can simply move to the footer 'sidebar'
Edit:
I can see that you're using the 'epix' theme. Your first place to ask would be the support forum - http://help.themeva.com/?envato_item_id=5783556. After all you've paid for the theme, you're entitled to some support.
In ul.dock-panel class replace
position:relative;
with
position:absolute;
bottom:0px;
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.
i'm new to html and i'm having problems moving the table down the page. http://tinypic.com/view.php?pic=eqdpjb&s=7 . I tried setting the 'margin-top: 400;' which works however the navigation bar at the top (i created in dreamweaver using the navigation 'wizard') moves as well to the bottom of the page!. How can i fix this? i want to move only the table without affecting the navigation bar been driving me nuts!
css
table{
background: whitesmoke;
border-collapse: collapse;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Your problem is that your navigation is positioned relatively to your table so when you add a margin also the navigation gets the margin.
The solution would be to add a minus margin to your navigation, as shown here:
#navigationId {
margin-top: -400px;
}
If you are adding margin-top: 400px; to table and it also moves the navigation, then that either means the navigation is also a table or the navigation is within the table.
If the navigation is also a table you will have to give the bottom table a unique id and then add the margin to that id only.
If the navigation is within the table, put it in its own div.
If it's none of the above you will have to post some HTML.
Try this:
table {
background: whitesmoke;
border-collapse: collapse;
margin-right: auto;
vertical-align: bottom;
margin-left: auto;
}
Hope it works for you! :)
Longer term, I advise you to learn to hand code using an ide such as netbeans or a simple editor such as notepad++. Using dreamweaver is all very well but unless you understand how the code works you will always encounter similar frustrations. A great resource to learn html and css is w3schools www.w3schools.com
A very good book on css is css the missing manual (o'reilly)
You may find all this slower in the beginning but you will end up writing cleaner and faster code as a result.
Make sure the table and the navigation bar are in two separate tags, which are both in a third div.
By using margin-top on the div with the table, you will force that entire div down from the top of that third container div.
Make sure to get rid of the margin-top stuff in the table css declaration.
Eg.
Navigation code here.
Table here