RESOLVED: Unwanted paddings/margins that just won't go!

HTML & CSS
1

Hi

I’m having problems deciding what to do with the top of the page, which has a lot of wasted space (that I don’t seem to understand why…). I would like the images, at least the first row, to show without having to scroll

If I could put the Search box a bit higher, move the hotel name a bit up too, and put the stars centrally under it, I could bring the first row of images up into place.

I don’t want to get things too close together, but as it is it’s too much empty space without images.

There is a temporary test page here: http://pintotours.net/TEMP1/NEW.html

Any ideas appreciated.

Thank you

PS- I’m using a stylesheet from another page and throwing things into it. It’s very messy and I will clean it up when the page is satisfactory.

2

The title of this thread, and what you’ve written inside it, don’t necessarily seem connected. Are you having an issue with laying things out with CSS, or deciding what the page ought to look like?

3

Both

It’s a subsidiary page of another. It is about one hotel in Punta Cana, but the content is not the issue.

problem No 1 is why all those paddings at the top?

problem no2 is how make the top more intersting and showing the top row of images before scrolling

But I’d like to solve no 1 before embarking on no 2.

4

Hi there qim,

All the attributes that are contributing to your “unwanted space”
are indicated in the code below. :sunglasses:

#header{
    width:100%;
    height:155px;
    background-color:#910000;
    margin-top:-27px;
 }
#clock {
    width: 170px;
    height:140px;
    margin:0 auto;
    background-color:#910000;
    font-size:16px;
    color:#CDCD5C;
    padding-right:15%;
 }
#title h1 {	
    text-align:center;
    font-size: 42px;
    font-family:  'Roboto Slab', 'Times New Roman', Times, Baskerville, Georgia, sans-serif;
    line-height: 30px;
    font-weight: 700;
    color: #E1E19D;
    padding-top:40px;
    padding-bottom:20px;
    margin:0;  /* you have not set this value */
    padding-right:15%;
 }

coothead

5

It’s not about the <header> but the top of the page, under the <nav>

Thanks

6

The top of the page under the <nav>…

Do you remember how to use Firebug?

1 Like
7

Hi there qim,

All the attributes that are contributing to your “unwanted space”
below the menu , about 80px, are indicated in the code below. :sunglasses:

.search{
    margin-top:30px;
    float:right;
    padding:20px;
    padding-top:0;
    text-align:center;
}
#main h2{
    font-family: 'Roboto Slab', serif;
    font-weight:400;
    font-size:30px;
    text-align:center;
    padding-top:0;
    padding-bottom:10px;
    margin:30px auto 20px;
 }

coothead

8

I never mastered that…

9

Thanks

I’ m off to bed now. Will look at it in the morning

10

Firebug doesn’t take a master’s degree. We talked about it quite a bit and about how it can help you solve problems in your code, such as you are asking about now, very easily. Just give it a quick review and use it a time or two. You know what they say about learning to ride a bicycle…

Content does not fit viewport - #25 by ronpat

Content does not fit viewport - #33 by qim

https://www.sitepoint.com/community/t/content-does-not-fit-viewport/201719/35

https://www.sitepoint.com/community/t/content-does-not-fit-viewport/201719/40   <= Follow the Numbers.

2 Likes
11

Hi ronpat

Too old for this…

…but, YES, I see what you mean: a good way to get rid of duplicate code, which I was leaving for the end to be done manually. Of course, it would only create problems meanwhile. Good tool, but I think you do need the masters degree to understand it fully!

I have two new problems: the 5 stars apparently can only go right or left. I am trying to place them in the centre but when I do that instead of 5 stars I get a million…What’s the secret?

And I created a new div “guarantee” and it moved to the left even though I gave it text-align:center. Not even Firebug can help here!

EDIT

This last one does not make sense. It worked fine if the div was .ad. To be able to control it better I copied ALL the .ad code and pasted it below changing it to .guarantee. Exactly the same code, but it does not work!

Why?

ANOTHER EDIT

It turned out that the problem was/is that I added max.width:600px; Cannot see why it sent everything to the left. It is now centred but I want to reduce the width of the text. How do I do it?

The stars are the main problem now.

Thank you

12

That’s not valid CSS, qim. Should be max-width:600px;

13

Sorry! That was a typo writing the message. My sight is not too good, especially with these very small letters in the forum…

I added max-width:600px;

Any ideas on these two problems, please?

14

Okay, one thing, your stars are not going to be centred if you float them left.

I think if I were doing a star rating, I would have 5 images and display the appropriate image rather than use a background image and repeat it 2, 3, 4 or 5 times, but maybe that’s just me…

15

Yes, they are at left now, but if I centre them with text-align:center, I get a million start going all the way from left to right…

I guess I may have to do that.but is there a way of centering what I have now?

Did you have a look at my other problem? I tried also width:60%, but it only works on the bottom part. The .guarantee p{} throws everything to the left if I include max-width or width in either pixels or percentages.

16

I’ve not had time to try it but if you gave your span a different width for one-, two-, etc stars it might (just might) work.

I’m needed elsewhere shortly so I’ve not been able to look at your other problem.

1 Like
17

Hi

I’ve had to create another div .middle{} inside the .guarantee{} and it works now

.middle{
	text-align:center;
	margin:0 auto;
	width:70%;
}

So, I’m still left with the stars. gandalf gave me an idea, but if there is a way of using the current code, I would be grateful for some help.

18

RESOLVED

I decided to do it in another way. So, this thread is closed and the temporary file will be deleted.

Thank you

19

I agree that Firebug is a fairly complex tool with many options - but the only one you really need to look at is the “inspect element” option, the use of which was explained carefully and in detail in the posts @ronpat linked to. That part is very straightforward to use and shouldn’t cause you any difficulties. It’s invaluable for answering questions like this one, or this one. (It’s how I found the solution there in the space of a few seconds.)

You really need to take time to play about with this part of Firebug and see how it works. It will not only show you the CSS rules associated with an element (and mark any which are being over-ridden by other rules), but it will allow you to temporarily change values, delete or add rules, so you can immediately see the effect on your page.

As you know, members here are very willing to help, but we do expect you to try to help yourself, too. You’ve been introduced to a useful tool, and shown how to use it. Now it’s up to you to make use of that information. If you get stuck interpreting results, by all means post here for help, but at least try it for yourself first.

5 Likes
20

Understood!