We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
2 days, 12 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Space - Needs decreasing
Posted on 2012-12-24
As per attached screenshot, I cant find where in my CSS this space is being set (the red arrow) I want to drop that distance so it matches the distance shown at the blue arrow?
here's a live example http://www.petenetlive.com/KB/Article/0000738.htm
Pete
SPACE.jpg
here's a live example http://www.petenetlive.com/KB/Article/0000738.htm
Pete
SPACE.jpg
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
5
3
2- +2
13 Comments
There are many ways the spacing can be set. The spacing is most likely set in the in the border or padding for the div containing the red arrow. It is most likely a combination of the div showing the menu above and the image below. Use relative positioning to override the position. Try the example, http://www.barelyfitz.com/screencast/html-training/css/positioning/
In PNL-CSS-2-Column.css change:
.PNLBody #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #993300; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
}
to reduce the top padding. that is where the extra height is coming from.
Cd&
.PNLBody #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #993300; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
}
to reduce the top padding. that is where the extra height is coming from.
Cd&
you have a container div thats meant to go around the whole screen
you need to start using divs if you want instead of tables
<div id=container>
<div id=menu>
..buttons
</div> 'end menu
</div> 'end container
you need to start using divs if you want instead of tables
<div id=container>
<div id=menu>
..buttons
</div> 'end menu
</div> 'end container
Active today
Cd&
Thanks that raises the Sidebar and makes things neater but, there is no padding on the #AdSpaceTOP (apart for the px on the inside of it) How do I do the same with that?
IanTh
>>you have a container div thats meant to go around the whole screen
>>you need to start using divs if you want instead of tables
Agreed I'm getting there slowly :)
Thanks that raises the Sidebar and makes things neater but, there is no padding on the #AdSpaceTOP (apart for the px on the inside of it) How do I do the same with that?
IanTh
>>you have a container div thats meant to go around the whole screen
>>you need to start using divs if you want instead of tables
Agreed I'm getting there slowly :)
Pete,
You can try a negative margin, but be careful with that because it might create issues for old IE versions.
I didn't even realize there was an ad there. My adblocker is very effective.
Cd&
You can try a negative margin, but be careful with that because it might create issues for old IE versions.
I didn't even realize there was an ad there. My adblocker is very effective.
Cd&
Active today
>> My adblocker is very effective.
Ah I See
I've looked at both those elements see att screenshots - There seems to be no reason for that spacing at all between the headerDiv and the AdSpaceTOP Div - the problem repeats itself below, with the same amount of space above the mainContent Div and below the AdSpaceTOP Div.
(I'm very weak on this subject - so its probably something obvious).
Pete
Ad-Div.jpg
Header-Div.jpg
Ah I See
I've looked at both those elements see att screenshots - There seems to be no reason for that spacing at all between the headerDiv and the AdSpaceTOP Div - the problem repeats itself below, with the same amount of space above the mainContent Div and below the AdSpaceTOP Div.
(I'm very weak on this subject - so its probably something obvious).
Pete
Ad-Div.jpg
Header-Div.jpg
I am not seeing anything out of order with your CSS coding here. Your margins and padding attributes are properly set for what you are attempting to do. However, while examining your live code I noticed that the #header section is also entirely enclosed within an <h1> tag with no related textual content. This could be causing a spacing issue due to a default linespace attribute.
The code looks like this when collapsed:
<div id="header">
<h1>
..... <!-- Header content -->
</h1>
</div>
The code looks like this when collapsed:
<div id="header">
<h1>
..... <!-- Header content -->
</h1>
</div>
Active today
wadehults
Hi Thanks, that's because the CSS was originally fromone of Dreamweaver's built in templates, I'm guessing it assumes that content in that div would be <h1>
Anyway, I agree its not needed and I've removed it, and still the gap remains!
Hi Thanks, that's because the CSS was originally fromone of Dreamweaver's built in templates, I'm guessing it assumes that content in that div would be <h1>
Anyway, I agree its not needed and I've removed it, and still the gap remains!
Since that wasn't the source of the problem, perhaps you could try moving your menus into a <div> of their own and further defining margin and padding. I have had a similar problem using Dreamweaver Spry navigation.
While it would take a lot more work, you could also remove the #content <div> entirely and use absolute positioning of your other <div>'s. This could be problematic if you have dynamic content of varying sizes however. You would have to ensure that your <div>'s were large enough to contain all possible content.
While it would take a lot more work, you could also remove the #content <div> entirely and use absolute positioning of your other <div>'s. This could be problematic if you have dynamic content of varying sizes however. You would have to ensure that your <div>'s were large enough to contain all possible content.
The add has an extra linefeed being applied. it is inside a paragraph which generates a line feed, and then the paragraph is inside a div which generates another one. Try display:inline on the p tag.
Dreamweaver dynamic code can overwrite styling and puts it in line. At that point the code in the stylesheet no long applies, and with spry I have seen pages where you practically have to re-write the scripting to eliminate some thematic bit it has applied.
Cd&
Dreamweaver dynamic code can overwrite styling and puts it in line. At that point the code in the stylesheet no long applies, and with spry I have seen pages where you practically have to re-write the scripting to eliminate some thematic bit it has applied.
Cd&
Active today
Hi CD&
Sorry Dropped of the net for a couple of days, I wasn't sure what you meant, but did some searching and came to the conclusion that you meant add...
p.inline
{
display:inline;
}
to my CSS? (please confirm). I've done so, nothing has moved, so I've probably not understood?
Pete
Sorry Dropped of the net for a couple of days, I wasn't sure what you meant, but did some searching and came to the conclusion that you meant add...
p.inline
{
display:inline;
}
to my CSS? (please confirm). I've done so, nothing has moved, so I've probably not understood?
Pete
Active today
-----Ah, I removed the <p> Tag completely form the AdspaceTOP div, (It was only there to center the ad in the Div), I added the allign="center" to the Div instead. And everything jumped to where it should be! ( I need to add a few padding pixels to line things up but that wont take me long).
Thanks to everyone who helped me out, especially Cd&, who hit the nail on the head!
Pete
Thanks to everyone who helped me out, especially Cd&, who hit the nail on the head!
Pete
Featured Post
Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
CSS3 Custom checkboxes
This article shows how to style the checkbox form element using only CSS.
Works in: Chrome, FF, Safari, Opera, IE9+
Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property
Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month2 days, 12 hours left to enroll
695 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.