Jump to content

How to put a gap between image( float:left) and text(right)


silversquid

Recommended Posts

HTML CODE:-

<body>
<main>

<article>

<header>
<h1>Azure Kingfisher</h1>
</header><hr>

<p>This stunning little kingfisher is common
on waterways across the <a title="Top End Australia Video"; href="
" target="_blank">Top End</a>, but can be difficult to see well. this is some text about the kingfisher this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdnf iuhrwei hear hoheo eogflkvoiejar glk oisdfj w oaif iasdfi asoif asidfjsaifdj osaijdfiasdf insadfoi</p> <p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> </p> <p id="arc2">this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdfh osadf' sfoi jsdfj sdofj sdfw'ej fsdlkf aslkfl askdfn sadf sadf oifn afoin asdfn saodifnwieafn'o iwnfkanef iewfan</p> </article> </main>

Linked CSS:-

body{
background-color: #1eed8c;
margin-right: 20%;
margin-left: 20%;
border: 2px dotted blue;
font-family: sans-serif;
line-height: 180%;
}

h1{
color: blue;
text-align: center;
}

p#arc2{
	padding-left: 5px 5px 5px 5px;
}

article{ 
color: green;
padding: 5px 5px 5px 5px;
border-bottom: 1px solid rgb(88, 88, 88);
}

img{border: 2px solid black;}

footer{
	margin-left: 74%;
}

a:link {color: blue; background-color: transparent; text-decoration: none;}
a:visited {color: maroon; background-color: transparent; text-decoration: underlined;}
a:hover {color: yellow; background-color: transparent; text-decoration: none;}

The pic of the kingfisher, which is a thumbnail, is right beside the text= arc2. There is no space between the image and the text. I tried padding the #parc2 (second article that was beside the image but still no effect). The image has a black border that I don't want to remove. If I add padding to the image the border sticks to the text(arc2). azurepic.jpg

Link to comment
Share on other sites

Add right margin to figure or image elements

One more question - How to shift the img to the left so that the distance b/w img and left body border is equal to distance b/w img and text? I have added the following code to img:-

img{
 border: 2px solid black; margin-right: 15px; ;
}

I have added margin-left as (minus)20px.

Is it okay to add a negative left margin? It seems to work here.

Edited by silversquid
Link to comment
Share on other sites

Set the margin and padding of the <figure> element to zero.

 

Putting a negative margin on the image would just be compensating for existing padding or margin that shouldn't be there.

Link to comment
Share on other sites

Also

1) Remove paragraph element surrounding figure;

2) When targeting specific padding side you require single value and unit, not including values and unit for ALL four sides.

3) No such styling text-decoration: underlined; should be text-decoration: underline; without 'd';

Link to comment
Share on other sites

Set the margin and padding of the <figure> element to zero.

 

Putting a negative margin on the image would just be compensating for existing padding or margin that shouldn't be there.

the figure element has no margin and padding! but still the image is a little 'inset' from the left border so I am using negative padding to shift the image to the right.

Link to comment
Share on other sites

Also

1) Remove paragraph element surrounding figure;

2) When targeting specific padding side you require single value and unit, not including values and unit for ALL four sides.

3) No such styling text-decoration: underlined; should be text-decoration: underline; without 'd';

1) Removed <p> element.

2) Got it!

3) Thanks for the correction.

Link to comment
Share on other sites

269e506a0a.png

 

Now there is some distance between the image and the left border. I had to use (minus) 20 padding-left for img element.

 

 

HTML -

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Azure Kingfisher</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Someone" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
<main>

<article>

<header>
<h1>Azure Kingfisher</h1>
</header><hr>

<p>This stunning little kingfisher is common
on waterways across the <a title="Top End Australia Video"; href="
" target="_blank">Top End</a>, but can be difficult to see well. It is usually seen streaking past in direct flight, low over the water like a little blue missile. Its passing is often announced by a high-pitched "seep" call which, if learnt, will give you a good clue to the bird's presence. A good strategy for seeing this species is to sit quietly beside a small creek or billabong where they are known to occur.</p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge in new window" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> <p id="arc2">With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill. There is a lot more that can be written kdf knsadfkn df adfn dkfn dfgn odngfo kn. dfn odif dnf df kndfndpifjgrepgmdgwregpoe meggpoer megpjepr mep. pejgpoj egmepog .eg peojgp oeg. egpo pgoergeporg , oegoejrpwg meg.gko ego epogoerg ..g poergpo apergj pav;lmerpjg eg. e.gerg/ ergo perjgop ajepgrj opaejgpoaejgp jepgjpejgeprjgk emgbkmeprgjkdmfgjejgkdlfm jg mggkj ijerkgm ejrgpj preg mapergj ldfg mrjoeg dmfnlheg lng ndgh kgn kdjfg hoeirglk ;eajgoifjg ldmfg joeirjg ld;kfg lkjdfklg joierjo jgkelgm lkjdfgoi jegoijerkg llekjrg oiejrg erglkj ergjirug klerjgiadfogijreuseoiu sidg lkdfjg ljkdfglkj dofiugeoiurg jfdkjgkjfgkjgkjfgk jkjg kjfgkj fkjfkg kjfkgj kfgjkfgj jfkg kfjgk jfkgj kfjgkfj gk fjgkj fkgjfkgj kfjgkfjg kjfkjg kjfkg jfkjg kjfkg jfkg jfkjg kjfkg kfjgkj rirugiurituritapodfkeirjg iejrg ijergje r[gje o[ij. </p> </article> <footer> <p>Posted by:- <strong>Someone</strong></p> <p>Contact Info:- <a href="mailto:someone@gmail.com">Email</a></p> </footer> </main> </body> </html>

CSS :-


body{
background-color: #1eed8c;
margin-right: 20%;
margin-left: 20%;
font-family: sans-serif;
line-height: 180%;
}

main{
	border: 2px dotted blue;
	background-color: powderblue;
	border-radius: 10px;
}

h1{
color: blue;
text-align: center;
}

article{ 
color: blue;
padding: 5px;
border-bottom: 1px solid rgb(88, 88, 88);
}

img{
	border: 2px solid black; 
	margin-right: 15px; 
	;
}

footer{
	margin-left: 74%;
	padding: 10px;
	border-left: 1px solid black;
}

a:link {color: blue; background-color: transparent; text-decoration: none;}
a:visited {color: maroon; background-color: transparent; text-decoration: underline;}
a:hover {color: yellow; background-color: transparent; text-decoration: none;}

As you can see, img margin left is negative to adjust the image. I can't find why the image is inset and why there is space between the image and left border.

Link to comment
Share on other sites

By default all browsers add their own margins and padding, which is different in most browsers, that is why you should add universal selector '*' and zero all margins and padding especially. THEN redefine all margins and padding to elements to your requirement, that way all browser will follow this styling compared to there own.

 

IF you use Firebug for FireFox, then at the top right select 'Layout' tab it will show 40px margin on sides and 16px (1em) top and bottom.

 

There are styles sheet with this already prepared listing all elements with margins/padding and any other styling that needs normalizing, just google 'reset or normalise css'.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

By default all browsers add their own margins and padding, which is different in most browsers, that is why you should add universal selector '*' and zero all margins and padding especially. THEN redefine all margins and padding to elements to your requirement, that way all browser will follow this styling compared to there own.

 

IF you use Firebug for FireFox, then at the top right select 'Layout' tab it will show 40px margin on sides and 16px (1em) top and bottom.

 

There are styles sheet with this already prepared listing all elements with margins/padding and any other styling that needs normalizing, just google 'reset or normalise css'.

Hello, so I used the universal selector to customize my page using CSS. All the defaults have got removed but now the text does not wrap around the image. I have removed all the CSS customization and have only HTML structure left. So how do I get the text to wrap around the image while using the universal selector '*' as well? It's a naive question, maybe. I basically had to start the page from scratch. I will be creating a nav bar for easy access. The code follows:-

<body>

<header>
<h1>Birds of the Wetlands</h1>
</header>

<nav>
<ul>
	<li class="selected"><a href="azure.html">AZURE</a></li>
	<li><a href="little.html">LITTLE</a></li>
	<li><a href="kakadu.html">KAKADU</a></li>
	<li><a href="jacana.html">JACANA</a></li>
</ul>
</nav>

<main>

<h2>Azure Kingfisher</h2>

<article>
<figure>
<a href="azure.html" target="_blank">
<img title="Click to enlarge in new window" src="thumbnails/birdpict.png" alt="thumbnail" style="height:150px; width:110px" /></a>
</figure>

<p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href="
" target="_blank">Top End</a>, but can be difficult to see well. It is usually seen streaking past in direct flight, low over the water like a little blue missile. Its passing is often announced by a high-pitched "seep" call which, if learnt, will give you a good clue to the bird's presence. A good strategy for seeing this species is to sit quietly beside a small creek or billabong where they are known to occur. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill.With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill.With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill.With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill and a long, black bill. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill. </p> </article> </main> </body> </html>

Here is what the page looks like sans customization :-

 

 

aazzure.jpg

 

 

 

 

Any tips and advice are most welcome. :)

Link to comment
Share on other sites

N

 

I have made a navigation bar. How to change code so that all the tabs open in the same page? Is it possible using html and css only?

 

 

No! you require at the very least JavaScript, else more complicated server-side script language such as php.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...