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.
Related
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
I'm creating my first website and I cannot get around this problem, my H3 link keep hovering below my third content list, does anybody know how to get around this problem, I'll be really glad If anyone can help me out
body {
width:98.8%;
position:absolute;
background-color:#e5e5e5;
text-align : left;
}
Demo
If I'm interpreting the comments correctly, I think you want what's happening in this fiddle.
The issue was that the parent anchor tags of the h3 didn't have any positioning, so I removed the top and left position on the h3 and put that styling on the a tag. This is all on lines 27-37 of the CSS in the fiddle.
I think the bigger issue is that the position property is being used in a lot of places and ways that are not ideal.
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.
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