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?
jackbauer24 0 Junior Poster
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.
|-|x 126 Junior Poster in Training
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 -^
jackbauer24 0 Junior Poster
i have no idea about display:block. could you show me how to do it?
|-|x 126 Junior Poster in Training
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)
jackbauer24 0 Junior Poster
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.
jackbauer24 0 Junior Poster
display:block; given
|-|x 126 Junior Poster in Training
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.
jackbauer24 0 Junior Poster
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.:-
|-|x 126 Junior Poster in Training
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.
jackbauer24 0 Junior Poster
.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
|-|x 126 Junior Poster in Training
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.
jackbauer24 0 Junior Poster
I did what you said. Still a gap.
|-|x 126 Junior Poster in Training
really? can you post your code again now.
jackbauer24 0 Junior Poster
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>
jackbauer24 0 Junior Poster
Theres one big improvement:- after the last <<home>> photo, no gap! yay!!!
|-|x 126 Junior Poster in Training
ah kk... you need to remove the brs from between the a tags.
jackbauer24 0 Junior Poster
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?
|-|x 126 Junior Poster in Training
<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
jackbauer24 0 Junior Poster
But doesn't a block have some whitespace above it?
|-|x 126 Junior Poster in Training
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.
jackbauer24 0 Junior Poster
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?
|-|x 126 Junior Poster in Training
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.
|-|x 126 Junior Poster in Training
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.
jackbauer24 0 Junior Poster
Do you think I should get a "css reset?"
Do you think I should buy photoshop?
|-|x 126 Junior Poster in Training
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.