Hey guys, thepythonguy here. Here is my problem:- My son has made a CSS webpage. It is in the rar file I gave you. It contains a few images on the left(Home, Home, Home, Home). They lead to non-existent files(just for learning purpoe). He has repeated the images there because they are just for learning purpose (again!). On the left side, you will see that below every instance of <<Home>> is a tiny gap. How to remove that gap?

Please download (right click-save image as) all images and please download(right click-save link/target as) the index.html file. This is because the website is not able to find the home image.

try removing the <br/>s from between each link and add display:block to the a style properties.
Also make sure the margin and padding is set to 0px;

Let me also make the suggestion that it is better to use the class attribute to identify groups of controls to apply the same styling to, rather than id

.im {
    ...
.pecor {
    ...

<a class="pecor" href="h.html"><img class="im" src="home.jpg" height="49" width="111" /></a>
                                            also, make sure you close your img tags  -^

i have no idea about display:block. could you show me how to do it?

it just goes into your css definitions like so.

#pecor {
    display:block;
    ...
}

I believe the default for an anchor (a) tag is block, but it doesn't hurt to specify.

This page explains the various value options available for the display property. Most common you will use are block, inline and none.

(also I put more notes in the other post, not sure if you saw those before your reply)

Modifications history:-
1.All ids changed to classes.
2.Img tag closed.

Please explain what are value options. Also, I would recomend the following website to you:-
http://w3fools.com/
Please pass it on to whomever you know.

display:block; given

Please explain what are value options

I just meant the possible values to be assigned to the display property. As that w3school page describes several, but the most common ones (that I use at least) are display:block;, display:inline; and display:none;

nice link btw. :) here is a different resource if you prefer.

now there is a huge gap between each home(enlarge image to see). I have some work to do, I'll be back after a while.:-

hmm... ok. check that the margin and padding for both the a and img tags are set to 0px.

I'll take another look later as well.

.pecor (a) =margin=0px,padding=0px;
.im (img) =margin=0px,padding=0px;
.linkDecor (div) =margin=0px,padding=0px;

Also, if you saw the <<home>> image, it doesn't look very good. Can you tell me about some free but good graphics editing/making software to use other than:-
1.Paint
2.Paint.NET
3.The GIMP

if you still have the spacing issue, try doing it this way instead:

.pecor {
    text-decoration: none;
    display: block;
    background-image: url("home.jpg");
    height: 49px;
    width: 111px;
}

and delete the img tag from inside the links.

------

I generally use photoshop for image editing, but you could try this, its supposed to be good.

I did what you said. Still a gap.

really? can you post your code again now.

here:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>My first CSS page!</title>
    <style type="text/css">

       h1.floating {
        float: left;
        margin-right: 0.2px;
       }
       img.im {

           margin: 0px;
           padding: 0px;
       }
        p.decor {
            position: absolute;
            left: 150px;
            top: 150px;
            font-weight: lighter;
            font-size: 10px;
            font-size: 20px;

            font-variant: normal;
            text-indent: 50px;
            margin-left: 70px;
            margin-right: 70px;
            border: 1px dashed #00FFFB;
            padding: 10px;
            max-width: 700px; 

        }
        .pecor {
            text-decoration: none;
            display: block;
            background-image: url("home.jpg");
            height: 49px;
            width: 111px;

        }
        .linkDecor{

            margin: 0px;
            size: 40px; 
            padding:0px;
            border: 1px dotted #0D06FC;

            position: absolute;
            top: 150px;
            left: 50px;

        }
        .imDecor {
            border: 1px dashed #FC0011;
            padding: 2px;
            margin-right: 70px;

            position: absolute;
            top: 150px;
            left: 1000px;
            font-style: italic;

        }
        h1.decor {


            color: rgb(160, 0,0);
            text-align: center;
            font-variant: small-caps;
            top: 15px;
            left: -10px;
        }
        body.decor {
            background: rgb(123, 234, 12);
        }
    </style>
</head>
<body class="decor">
 <h1 class="decor">First CSS!</h1>
 <div class="linkDecor">
    <a class="pecor" href="h.html"></a><br>
    <a class="pecor" href="i.html"></a><br>
    <a class="pecor" href="i.html"></a><br>
    <a class="pecor" href="i.html"></a>
 </div>
 <div class = "imDecor">
    <img src="bgveyron1.jpg" height=200  width=200><br>
    <p>A photo of the Bugatti Veyron.</p><br>
    <img src="bgveyron2.jpg" height=200  width=200><br>
    <p>Another photo of the Bugatti Veyron.</p><br>
    <img src="bgveyron3.jpg" height=200  width=200><br>
    <p>A photo of the Bugatti Veyron's interior.</p><br>
    <img src="bgveyron4.jpg" height=200  width=200><br>
    <p>Another photo of the Bugatti Veyron's interior.</p>
 </div>
 <p class="decor">Welcome to my website. This made with very little HTML, more of it done only in CSS. Feel free to explore the place. The website was made on May 24th 2012(Thursday). Updates shall be informed of.</p>




</body>
</html>

Theres one big improvement:- after the last <<home>> photo, no gap! yay!!!

ah kk... you need to remove the brs from between the a tags.

THANKS A LOT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Though, what exactly is a <br>? I thought they shift to a new line. When you asked me to remove the <br>s, I thought they would all come on the same line. This did not happen. How? Why?

<BR> is a new line, but it also creates a blank line most of the time, depending on the display characteristics of it and the other elements on the page.

by specifying the display property of the a tags to be block, it tells the browser that each element is to be rendered as a block, on a new line, not next to the previous element. Hence you don't need the br's

But doesn't a block have some whitespace above it?

not if you define the size (height and width) values in its css as well. By default it will be 1 line high based on the current font size. But you can override this, even set height:0px - this is how some menus and collapsing divs work, by adjusting the height value dynamically with javascript.

so you mean if you set the height and width of a certain element whose display property is block, you don't have that whitespace? i can't understand; can you explain it to me in a simple way?

If you don't specify a height and width, then the browser defaults to a single "line" height.

If specified then the block element is rendered precisely to the height and width you specify. In this case there should not be extraneous whitespace.

Of course there are also margin and padding properties, which some browsers have different defaults for.
These should be set to 0px unless you specifically need/want them. And don't forget that these properties are inherited. In other words, consider the following example.

<div id="a" style="margin:5px;">
    <div id="b"></div>
</div>

in this case, both divs a and b would render with a 5px margin. In order for b not to have a margin, it must specify margin:0px.

Further to the above... it is common for web developers to use a 'master reset' at the top of their css definitions. The purpose of this is to set defaults for clearing margin padding and anything else you may need.

There are a few different versions of these available if you google, but this is a good place to start.

Do you think I should get a "css reset?"
Do you think I should buy photoshop?

Do you think I should get a "css reset?"

I would suggest at least starting your CSS definitions off with a global selector, something like this

* {
    margin: 0;
    padding: 0;
}

Think of it like painting your canvas white before painting the picture on it. Have a look at some sample ones online and see what you think is useful. You can also use these to set global default fonts and colour schemes on a per-site basis, if it is useful to you.

Do you think I should buy photoshop?

I can't make that call for you, it is a hefty investment and would depend on your needs and usage. However, I have not come across another editor that does as much as well as PS. But, that may also just be because I'm used to it and know how to do what I need easily.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.