What changes I need in my code?

HTML & CSS
1

Here is what I want in my display . I want to reduce gap between two lines as shown below .

Here is my code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="rightbox">
				<h2 class="darkcolor">sdgdfghdfhdfhfghfh</h2>
				<p class="clear">fghghfhfghfdhhfdhfdhfdhfdhfhhdffhfghgfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhership ghjhgkhgkgkhhjkjhkjhkhkhk</p>
				<p class="clear">dgdfgdgdg - dfgdgdsgfdsssgds</p>
				<p class="clear">dfgdsssssssdgdsgdgfdgdgdfgdgdgdfgdgdgdgdgdg<br />
				  dgfdggggggggggggggggggggggggggggggggggggdgg<br />
				  dfgddddddddddddddddddddddddddddddddddd<br />
				  dfggggggggggggggggggggggggggggggggggggggggg<br />
				  dfgddddddddddddddddddddddddddddddddddd<br />
                </p>
				<div>
</body>
</html>

My Question :

what minimum changes I need for this to get the desired display ?

2

Hi, try to reduce the margin or padding. It would be nice if you posted the css code also. It seems you use the same class for all paragraphs so if you change the top-margin of that class, it will effect all the paragraphs. If we can take a look at the css, there might be a better way to get the effect you want.

3

there is no CSS.

Although you see some CSS stuff in the code …but there is not actually any CSS present.

you just run the code …and you’ll understand the display.

4

Okay. Put a </br> like this:


<p class="clear">dgdfgdgdg - dfgdgdsgfdsssgds<br>
dfgdsssssssdgdsgdgfdgdgdfgdgdgdfgdgdgdgdgdg<br />
				  dgfdggggggggggggggggggggggggggggggggggggdgg<br />
				  dfgddddddddddddddddddddddddddddddddddd<br />
				  dfggggggggggggggggggggggggggggggggggggggggg<br />
				  dfgddddddddddddddddddddddddddddddddddd<br />
                </p>

This will give you one paragraph.

5

there is no CSS.

Then your “p” tags are getting the default margins and paddings from your browser.

Get rid of those <br> break tags and use some real dummy text if you need something to test with.

Then set up some styles for your p tags in the css and test away. :wink:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>margin demo</title>

<style type="text/css">
body {
background: #fff;
font-size:100%;
}
#rightbox {
width:800px;
margin:20px auto;
overflow:hidden;/*contain floats and establish margin clearance*/
background:#EEF;
padding-top:.75em;
}
#rightbox p{
margin:0 .75em .75em;
padding:0;
}
</style>
</head>
<body>

<div id="rightbox">
    <p>Lorem ipsum dolor sit amet consectetuer ante iaculis Aliquam dui egestas. Curabitur pede elit 
    Duis eu cursus eu nec porta gravida at. Orci a vitae et vitae in Vestibulum interdum tincidunt ut 
    eros. Dolor Nulla Duis Nulla condimentum Vestibulum Vestibulum elit molestie tincidunt vitae. Tortor 
    ullamcorper id Aenean dui quis.</p>
    <p>Risus id sollicitudin diam elit Quisque condimentum vitae laoreet a magnis. Augue tellus orci 
    Aliquam vitae Vestibulum est gravida consectetuer et tincidunt. Sed tincidunt sit mattis Vestibulum 
    sed Nam sociis a nibh convallis. Eros auctor tincidunt Quisque wisi felis nibh laoreet orci Sed 
    Curabitur. Non sagittis Curabitur Nullam Morbi elit Aliquam quis metus Sed ligula. </p>
    <p>Phasellus lacinia consequat hendrerit iaculis urna a elit porttitor et tincidunt. Ipsum In at 
    metus semper semper mollis Sed sed laoreet mauris. Tincidunt condimentum senectus vitae et elit 
    condimentum In Vestibulum Vestibulum quis. Vitae amet mauris commodo pretium turpis elit ac vitae 
    lorem dolor. Eget Phasellus Nam justo laoreet lobortis wisi leo non morbi eu. Leo adipiscing 
    Vestibulum adipiscing lacinia eros In egestas Pellentesque laoreet.</p>
</div>

</body>
</html>
6

there were two paragraphs originally…I want to keep them both.

is it not possible to reduce gap between two paragraphs instead of merging into one ? what CSS can be applied here ?

7

Does the OP want to use css or not ? :smiley:

Edit:

Seems i’m to slow reading the answers lol

8

Sure you can keep teh two paragraphs. Rayzur already gave you an example to work with.

9

This is not what I wanted … I am sorry , it just created a confusion . I could not able to make you understand properly.

I am posting a separate topic with the updated code . hopefully , that will be clear enough to understand what I want.

10

First of all. You have to be more descriptive of the problem that your having.

The way you named your markup could get confusing later down the road. Try to think of your markup as a building block. What are you exactly trying to acheive here? Rayzur, gave a pretty good example. Are you trying to close the gap between the paragraphs with a negetive margin?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="rightbox">
                <h2 class="rightbox_section_header"></h2>
                <p class="rightbox_section_1"></p>
                <p class="rightbox_section_2"></p>
                <p class="rightbox_section_3"></p>
        <div>
</body>
</html>


#rightbox {
//styles    
}
.rightbox_section_header {
//styles
}
.rightbox_section_1, .rightbox_section_2, .rightbox_section_3 {
//styles
}
11

Blake, the OP started a new thread

12

Here is your answer
p {margin:0; padding:0;}

Which will dump the default padding and margins.

EDIT actually, margin:0; works by itself. You have to realise that browsers apply a default margin and padding to paragraphs, and that is all you are seeing, and it shouldn’t take two threads to discover this.

13

Have you actually tried that ? Resetting the p only doesn’t do it i’m afraid :slight_smile:

14

Does for me! :slight_smile: You may have set margins and padding elsewhere that get inherited. you may have to use #divname p {} or .divname p{} to be more specific.

I used Web developer toolbar to check it on a couple or five random sites and it worked there.

15

As I have s aid in the other thread (for those who don’t view it) padding isn’t applied to paragraphs by default :).

16

p {margin:0} does in this case not work. Was the first thing i’ve checked. :smiley:

Giving more weight might help tho’