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
Related
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.
In my html document, I am using the table elements to create a sort of photo collage grid. When I change the z-index to -1 for my post it just cuts off the document and you have to scroll to see it, this is very confusing, please help. Thanks
Here is my jsfiddle of it
Have you noticed your ordered list div #posts is the direct child of body? Just remove the style of body like height: 100%; background: #e1e1e1; and it'll work. Hope this works for you.
I have the below page where the column header is fixed and the table body is scrollable. But when i scroll the data, i have the result like the image 2. Please suggest as to what to do to get rid of this. This is the code for my div. The table is sitting inside the below div.
<div style="overflow:auto; height:400px; position: absolute;">
Before scroll
After scroll
You have to declare a background color, like this:
#element {
background: white;
}
Please post a JsFiddle or Codepen of your markup.
The bgcolor attribute is deprecated. Use background-color: #FFF or background: #FFF instead. Also, please terminate your style declarations with a ; you are going to experience strange issues otherwise. It also may be that you are not applying the style to that header row correctly, but it is difficult to say without some example markup.
There's two odd things I'm noticing:
1) You are using a div tag as a table header, which I haven't seen anyone do nor do I see any obvious reason for it.
2) I heard position: absolute can cause some weird issues in IE. http://www.impressivewebs.com/absolute-position-css/ I'm not sure if that's the main issue though.
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}
Here is a demonstration: http://jsbin.com/egezog/edit#html,live
Sorry if this is newby, but I can't figure this out. I have a title, and I need (in decoration purposes) a line going from its edge to the right of the page (not an actual page, but a wrapper, but I have overflow hidden anyway). The wrapper is fixed in width, but the titles vary in length. I can't use absolute position, and I prefer not to use tables. And if we get this sorted out...
Here: http://jsbin.com/ibeciv/edit#html,live. So in the end, I actually prefer this all right aligned. You may ask, why do I need advice if it's there, implemented? Well, as you may see, the title is in two rows, which is unacceptable in my situation, and also, I prefer not to use tables.
I guess I can use float:right, to right align, but well, it depends on the implementation that I hope you'll advise to me. Thanks!
PS: jsfiddle is down for me right now, so here I used jsbin.
http://jsbin.com/ujiquq/edit#html,live
Will work in IE8 and all modern browsers. The background of the parent element can be anything. The line will still be vertically centered no matter what font-size is chosen.
HTML:
<h3><span>The title</span></h3>
CSS:
h3:after {
content: '\00200B';
background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
display: block;
overflow: hidden;
}
h3 > span {
float: right;
padding-left: 5px;
}
Here is a solution without using tables:
http://jsbin.com/ujawej/5/edit
And here is the one with tables (from my comment):
http://jsbin.com/osovev/2
Write like this:
HTML
<div class="title"><span>Title Here</span></div>
CSS
.title {text-align:right;border-bottom:1px solid red;}
span{background:#fff;float:right;margin-top:-9px;}
Check this http://jsbin.com/ibeciv/3/edit
UPDATED
Check this http://jsbin.com/ibeciv/4/edit