Remove spacing and border

I need to get all the anchors nested within the DIV ThreeDMot aligned horizontally in seven, and remove all the borders to possible be replaced with a background image and remove the spacing, I know I have {margin:80px} which is causing the 80px spacing between each row and column.

I need to get all the anchors nested within the DIV ThreeDMot aligned horizontally in seven
The page is not wide enough to get them all on one line. You will need to make the images smaller or let them wrap to another line.

I know I have {margin:80px} which is causing the 80px spacing between each row and column.
Then why didn’t you remove it since that is the main source of the problem?

The first thing you need to do is remove the default margin/padding from that ul#video. Then start targeting the children (the <li> and <a>) , you need to target the “a img” in order to remove the border. That can actually be done at the top of your css in your global styles so you don’t have to do it for every instance of it.

When viewing your page on my monitor that red position fixed div is hiding the images on the left side. I have to put a 200px left margin on the ul#video in order to see the images. Well, I had firebug open just enough to make some edits and that raised the red div up.

#videos {
margin:0 0 0 220px;
padding:0;
list-style:none;
}
#videos li  {
float:left;
}
#videos a img {
border:none;
vertical-align:bottom;
}

After I make those changes your h1 is completely out of sight.

All that fixed positioning at the bottom of the page not such a good idea anymore is it?

There are fitting on one line, presently :slight_smile: I continue to see the H1 as I want it, my concern is the layout of the videos before I proceed using the same layout in another part of the page. I assume to add a background graphic, if I proceed that direction would be on the global style.

video a img {background-image:<something>}

There are fitting on one line, presently :slight_smile: I continue to see the H1 as I want it
It looks like you resized the images as I mentioned, in that case they would fit on one line.

Well if your just building the page for you to view then all is well. :slight_smile:

However, not everyone’s settings are not going to be the same as yours. You probably have a high resolution set and a monitor with a different native resolution than I do.

Right now I’m using a 20" widescreen with a 1600x900 native res set at 1360x768 on my display settings. The images are all on one line but that red div is on top of the first image. If I reduce my viewport height a little bit the h1 gets lost completely because of the fixed footer. If I were a visitor to your site I would be leaving very quickly.

I assume to add a background graphic, if I proceed that direction would be on the global style.

What you have there is not a global style, it targets just the a img in the ul#videos
If you want a BG image on all images in an anchor then just use a img

Right now I’m using a 20" widescreen with a 1600x900 native res set at 1360x768 on my display settings. The images are all on one line but that red div is on top of the first image. If I reduce my viewport height a little bit the h1 gets lost completely because of the fixed footer. If I were a visitor to your site I would be leaving very quickly.

I follow you, although it would be nice if you could send me a screen shot so I could see, regardless how do I fix !?!?

What you have there is not a global style, it targets just the a img in the ul#videos
If you want a BG image on all images in an anchor then just use a img

What I meant is if I wanted a background image on ul#videos I would add the property {background-image} to the style ul#videos !

Did you fix the dropping issue? It’s not occuring for me no matter what width. Only scrollbars are appearing.
And yes to the background image question.

Did you fix the dropping issue? It’s not occuring for me no matter what width. Only scrollbars are appearing.

I don’t understanding !?!?

http://www.css-lab.com/test/husky/husky.jpg

Put a left margin on that UL like I had already done in the code I posted above.

The h1 is not accessible to me either for that panel. The reason is because it is Absolute Positioned. The title should be at the top of the page, at least set a min-height on the Content div to allow the user to scroll to the hidden page title.

What I meant is if I wanted a background image on ul#videos I would add the property {background-image} to the style ul#videos !

Yes

http://www.css-lab.com/test/husky/husky.jpg

Put a left margin on that UL like I had already done in the code I posted above.

How can this be fixed, hrm!!

The h1 is not accessible to me either for that panel. The reason is because it is Absolute Positioned. The title should be at the top of the page, at least set a min-height on the Content div to allow the user to scroll to the hidden page title.

I prefer to keep it at the bottom, right hand corner is there any work around to guarantee it will work ?

How can this be fixed, hrm!!

[B]#videos[/B] {
    margin:0 0 0 [COLOR=Blue]220px;[/COLOR]
    padding:0;
    list-style:none;
}

is there any work around to guarantee it will work ?

[B]#content[/B] {
    width:100%;
    [COLOR=Blue]min-height:500px;[/COLOR]
    padding-bottom:80px;
    background:#000000;
}

Is it fixed on your end ? There is a slight horizontal scroll it could be one of the properties, I have to change. My goal is;
< seven at the top
< six in the second row
< one in the final row otherwise if I don’t the silhouette div will cut off one of the video images.