margin-right to a paragraph

coco243 · December 18, 2010

I can't give right margin to a paragraph. I use this sintax <p style=" margin-right: 0% "> text </p> and has no effect, but if I replace with margin-left it works. What is the problem and how I fix that. Thanks.

Morgan · December 18, 2010

I can't give right margin to a paragraph. I use this sintax <p style=" margin-right: 0% "> text </p> and has no effect, but if I replace with margin-left it works. What is the problem and how I fix that. Thanks.

HiI'm not really sure what you are trying to accomplish here, could you please be a bit more specific or post some actual code from your project?Are you trying to Right-Align the text within the paragraph? or remove spacing between 2 paragraphs by removing the margin?If you are removing a margin to get rid of the spacing between two elements, you may need to apply the same to the reverse margin of the second element as well.However, also, paragraphs always start on their own line, so we need to know WHAT you are trying to margin it next to, a div, an image, what?Try applying a reverse margin to whatever may be next to the paragraph.Example:if the paragraph is margin-right:0px, but it isn't lining up directly next to the element to its right, you may need to apply margin-left:0px to that other element as well, to remove its margins.

coco243 · December 18, 2010

It is a paragraph, on its own line, into a div, I want to specify its right margin, to a concrete value but it isn't work. If I want to put to it a 20% left margin with this code: <p style="margin-left:20%"> Some text </p> I succed. If I want to put a 20% right margin with this code: <p style="margin-right:20%"> Some text </p> it doesn't work, why? In fact what I want to do is to fix a paragraph situated into a div, on the right side inside the div but at a specific value (pixel, percent), and I can't do that.

jeffman · December 18, 2010

Remember that a paragraph is a block-level element. It is as wide as the container that holds it. You will only notice the right margin if the text in the paragraph is longer than 1 line. If it is shorter, the margin will exist, but you will not see it, because the text ends before the margin.It is easy to visualize this if you temporarily give the <p> element a background color. Then you can see where the margins are and how they change when you change the values.Maybe you want a margin-right and also text-align:right or even text-align:justify ???

coco243 · December 19, 2010

yes, I have observed that. The div that includes the paragraph, I'm using it as a menu in my site, it is a column positioned on the left of the page, and I have some links to another pages included in paragraph lines, now I want to make submenus. When I press a link I want to be expanded a submenu maded by another links whitin paragraphs that are moved a little bit in right in comparison with the parent link. I want to do something like that: parent link ______child link ______child link parent link ______child link ______child linlk And the child links to apear after the parent links is clicked.

dsonesuk · December 19, 2010

a menu like that, usually uses an unorderlist tag, as an unordered list can be made up to show main list text, with subtext lists that give us the exact layout we require for parent menu and a submenus.<ul><li><a>Parent Link</a> <ul> <li><a>Child link</a></li> <li><a>Child link</a></li> </ul></li><li><a>Parent Link</a> <ul> <li><a>Child link</a></li> <li><a>Child link</a></li> </ul> </li></ul>

coco243 · December 19, 2010

Yes something like that, but I don't want the circles before the text, and I want like the child links to be colapsed and when I click the parent link them to be extended.

Synook · December 19, 2010

You can do that all with lists - to remove the bullet points use list-style-type:none in CSS, and for the show/hide behaviour you can use JavaScript - just modify the display property of the first unordered list child of the outer list indices.

coco243 · December 19, 2010

I tried with list-style-type:none; in the .css file with no result.

dsonesuk · December 19, 2010

a typical vertical menu setup using hover to show submenu would be

<!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=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0; padding:0;}body{margin:10px;}p{ margin-bottom:0.9em;}#left_nav {width:200px; min-height: 400px; background-color:#99FF00;}#left_nav ul, #left_nav li{list-style:none;}#left_nav ul { padding-bottom:1px; background-color:#99FF00;}#left_nav li{height:25px; text-align:center; line-height: 25px; position:relative; background-color:#99CC99; border-bottom:1px solid #99FF00; width:100%; float:left;}#left_nav ul ul{position:absolute; left:-9999em; top:8px; width:100%; margin:0;}#left_nav li a {display:block; width:100%; height:100%; text-decoration:none; color:#fff;}#left_nav li:hover ul {left:200px;}#left_nav li a:hover {background-color:#3366FF;}</style></head><body><div id="left_nav"><ul><li class="parent"><a href="#">Parent Link</a><ul><li><a href="#">Child link1</a></li><li><a href="#">Child link1</a></li></ul></li><li class="parent"><a href="#">Parent Link</a><ul><li><a href="#">Child link2</a></li><li><a href="#">Child link2</a></li></ul></li></ul></div></body></html>

coco243 · December 19, 2010

You use parent class, but I don't see the parent class definition. I am new in css but isn't necesary a .parent{ } declaration before using class="parent"?

dsonesuk · December 19, 2010

ignore that, that was used in another project, actually #left_nav li{height:25px; text-align:center; line-height: 25px; position:relative; background-color:#99CC99; border-bottom:1px solid #99FF00; width:100%; float:left;}would cover that element, as well the submenu li's.EDIT: actually you may want to keep that in as it could be used as a reference in onclick javascript function, which you will be needing.

coco243 · December 19, 2010

I don't have knoledges in javascript and I see#left_nav ul#left_nav-lideclared, but I don't see this ids used

Morgan · December 19, 2010

I may be approaching this incorrectly, but I am wondering why nobody has told him to try putting his secondary links within their own containing div INSIDE the links div, then floating that secondary div to the right, applying an overflow:hidden; to the container, and viola, right aligned links.Example:

<!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=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#links {overflow:hidden;position:relative;width:160px;border:1px solid #000;background-color:#c1c1c1;}div.parentlink {position:relative;background-color:#666666;}div.sublinks {float:right;}a {color: #FFFFFF;text-decoration:none;}</style></head><body><div id="links">	<div class="parentlink"><a href="#">PARENT LINK</a></div>	<div class="sublinks">		<a href="#">Link 1</a><br />		<a href="#">Link 2</a><br />		<a href="#">Link 3</a><br />		<a href="#">Link 4</a><br />	</div></div></body></html>

(The position:relative; tags were because I first tried to do a position:absolute; on the secondary div, then add a right:0px; to force it to the right of its container, however even with overflow:hidden set on the main containing div, it didn't overflow, so I decided float:right for a secondary option.)You can use the above ^ in combination with JQuery, to cause a RollOut effect when clicking the parent link that forces visibility of the secondary div.

dsonesuk · December 19, 2010

#left_nav refers to this element<div id="left_nav">#left_nav ul refers to all child ul elements within that outer parent elementas will#left_nav li refer to all child li elements within that outer parent elementmay seem a bit confusing, but here goes#left_nav ul ul{position:absolute; left:-9999em; top:8px; width:100%; margin:0;}will target the all first ul tag IN submenu<ul> /* this is first*/<li class="parent"><a href="#">Parent Link</a><ul> /* this is second (first in submenu), the one which is targeted*/<li><a href="#">Child link1</a></li><li><a href="#">Child link1</a></li></ul></li>

Morgan · December 19, 2010

You use parent class, but I don't see the parent class definition. I am new in css but isn't necesary a .parent{ } declaration before using class="parent"?

For the record:You don't NEED to define a class in CSS for you to apply a class="" to an element. Sometimes in designs, id= or class= are used on an element as a reminder to the DESIGNER, rather than a call to the CSS.So, even though <div class="class1"> will look for either div.class1 or .class1 in your CSS file, it doesn't NEED to exist in order for you to use class= on the DIV

thescientist · December 20, 2010

also, for Javascript, you might want to assign an ID to something without needing to style it.

coco243 · December 20, 2010

a typical vertical menu setup using hover to show submenu would be
<script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script>Has this javascript any effect? and it has effect, what is that effect?

ShadowMage · December 20, 2010

Has this javascript any effect? and it has effect, what is that effect?

Nope. It's just an empty script tag. I believe dsonesuk said once that he's configured dreamweaver to insert this into all of his pages automatically, but this:/*<![CDATA[*//*---->*//*--*//*]]>*/Is just plain nuts. It's meant as a way to hide the javascript from HTML validators, but there's no need for all those goofy comment tags. A single one line comment prefix is enough://<![CDATA[//]]>

dsonesuk · December 20, 2010

coco243 · January 5, 2011

Hellow and hapy new year! @dsonesuk I have added your code to my page, the parents links appear, but the child links don't overflow, I don't fiugre why.

dsonesuk · January 5, 2011

Hellow and hapy new year! @dsonesuk I have added your code to my page, the parents links appear, but the child links don't overflow, I don't fiugre why.

I don't exactly know what you mean by 'child links don't overflow' as i said this is a typical menu for the hover over effect (USING CSS ONLY) using :hover pseudo class, where the submenus only appear at the far right and 8px from the top, from the parent link when hovered over. If you require the submenus to appear underneath using 'onclick' you would have to use javascript/jquery to show and hide the submenu items, when the parent is clicked.

hellodipak · January 6, 2011

It works perfectly - <p style="border: 1px solid #f00; margin: 0 20% 0 0;">p tag marging right</p>ORIf you want to have another element after this p you can make it 'float:left; display:inline-block;'

I can't give right margin to a paragraph. I use this sintax <p style=" margin-right: 0% "> text </p> and has no effect, but if I replace with margin-left it works. What is the problem and how I fix that. Thanks.

coco243 · January 6, 2011

I don't exactly know what you mean by 'child links don't overflow' as i said this is a typical menu for the hover over effect (USING CSS ONLY) using :hover pseudo class, where the submenus only appear at the far right and 8px from the top, from the parent link when hovered over. If you require the submenus to appear underneath using 'onclick' you would have to use javascript/jquery to show and hide the submenu items, when the parent is clicked.

I have integrated your code in my site:html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>   <link rel="stylesheet" type="text/css" href="ind.css"/>    <title> Electronica practica </title> </head> <body>   <div id="top"><div>	   <script language="JavaScript" src="http://www.counter160.com/js.js?img=15"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/15/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/15/right.png" border="0" align="texttop"></a>  </div>   <div id="topx"><!-- Code 2.0 Romanian Top 66 START (damyg.webuda.com) --><script src="http://script.top66.ro/id-463224/7/1/Bine%20ati%20venit!%20Apasati%20OK%20pentru%20a%20vota%20pentru%20acest%20site%20in%20Romanian%20Top%2066/code2.js" type="text/javascript"></script><a href="http://www.top66.ro" title="Promovare gratuita"><img src="http://images.top66.ro/vote/7.gif" alt="Invata electronica practica Top66 Statistici" usemap="#Top66Vote" border="0"></a><!-- Code 2.0 Romanian Top 66 STOP (damyg.webuda.com) --></div>  <!-- END TOPx -->     </div> <!-- END TOP -->   <div id="menu">	<br/>	<p align="center">  <a href="acasa.html"> Acasa  </a> </p>	<br/>	<p align="center">  <a href="bazamateriala.html"> Baza materiala </a> </p>	<br/>	<p align="center"> <a href="aplicatii.html"> Aplicatii </a></p>		   <div id="left_nav">	<ul>	   <li> <a href="#"> Parent Link </a>		  <ul>			<li><a href="#"> Child link </a> </li>			<li><a href="#"> Child link </a> </li>		  </ul>	   </li>   	   <li> <a href="#"> Parent link </a> 		  <ul>			 <li> <a href="#"> Child link </a> </li>			 <li> <a href="#"> Child link </a> </li>		  </ul>		</li>	  </ul>   </div>		    <p style="border: 1px solid #f00; margin: 0 20% 0 0;">p tag marging right</p>	    </div> <!-- END MENU -->     <div id="advertising">	 <p align="center"> Spatiu Publicitar </p>   </div> <!--END ADVERTISING -->   <div id="content">	 <div class="title"> <p>Sa invatam electronica de la 0 </p></div> 	  <div class="textcontent">   		<p> Acest site este destinat celor care vor sa invete cu adevarat electronica practica, incepand de la 0. Sa incercam		 impreuna sa patrundem tainele acestei stiinte care ne inconjoara la tot pasul fiind cheia dezvoltarii civilizatiei noaste.  		</p>  		<br/>		<p> V-ati intrebat vreodata ###### functioneaza un calculator? V-ati intrebat vreodata ce inseamna 0 si 1 in electronica? Ati vrut sa nu fiti ignoranti  		si v-ati pus aceste intrebari? Unii si le-au pus si au inceput sa-si dezvolte aceasta pasiune. </p> 		<br/>		<p>Vreti sa priviti anumite echipamente si sa nu le vedeti doar ca pe o cutie? Sunteti unde trebuie. </p>		<br/>		<p> Haideti sa ne castigam painea invatand electronica, hai sa fim profesionisti. <p>		<br/><br/><br/><br/><br/><br/><br/><br/> 	  </div> <! END TEXTCONTENT -->   </div> <!-- END CONTENT -->   <div id="down"><div id="trafic"><center><!--/Start trafic.ro/--><script type="text/javascript">t_rid="damygwebudacom";</script><script type="text/javascript" src="http://storage.trafic.ro/js/trafic.js"></script><noscript><p><a href="http://www.trafic.ro/?rid=damygwebudacom"><img alt="trafic ranking" src="http://log.trafic.ro/cgi-bin/pl.dll?rid=damygwebudacom" /></a></p><a href="http://www.trafic.ro">Statistici web</a> </noscript></center><!--/End trafic.ro/--></div>   </div> <!-- END DOWN -->  </body></html>

css code:

*{ margin: 0px; padding: 0px;}html,body { height: 100%; background-color:rgb(131,131,131);}#top { width: 100%; height: 20%; background-color:rgb(75,81,101);}#menu { float: left; width:20%; min-width: 100px; min-height: 65%; height:auto; background-color:red;<!--rgb(131,131,131);-->}#content { margin: 0% 10% 0% 20%; /* IMPORTANT -margin: 0 10% 0 20%; means that the content div has top margin 0%, right margin 10%(advertising), bottom margin 0% and left margin(menu) 20%*/ min-height:65%; min-width: 69%%; height:auto; background-color:yellow;<!--rgb(185,194,177);-->}#advertising { float: right; width: 10%; min-height: 65%; background-color:green; <!--rgb(131,131,131);--> height: auto;}#down { width: 100%; height:15%; background-color:rgb(75,81,101); clear:both; margin: 0 auto 0 auto;}.title {padding-top: 10%;text-indent: 4em;font-size: 20px;text-align: center;}#topx { position: absolute; top: 0px; right: 0px;}#trafic { padding-top: 3%; margin-right: auto; margin-left:auto;}.textcontent{ padding-top: 4%; padding-left: 15%; padding-right: 15%; padding-bottom: 5%; text-indent: 20px;}  #picture {background-color:rgb(185,194,177);;min-width:100%;float:right;}#left_nav {   width: 200px;   min-height: 400px;  background-color: blue;}#left_nav ul, #left_nav li { list-style:none; }/*lu - unordered list, li - list item */ #left_nav ul { padding-bottom: 1px; background-color: blue;}#left_nav li { height: 25px; text-align:center; line-height: 25px; position: relative; background-color: green; border-bottom: 1px solid blue; width: 100%; float:left; }#left_nav ul ul { position:absolute; left: -9999em;top:8px; width:100%; margin:0;}#left nav li a { display: block; width: 100%; height: 100%; text-decoration: none; color: #fff;}#left_nav li: hover ul {left:200px;}#left_nav li a:hover {background-color: #3366FF;}

And the child links, don't hover over, they don't apear at all, and I don't know what the cause is. You can see the effect at: http://damyg.webuda.com/, I hope that is no problem if I put the link here.

dsonesuk · January 6, 2011

The space between li: and hover, is causing the problem#left_nav li: hover ul {left:200px;}it should be#left_nav li:hover ul {left:200px;}Edit: you also are missing an underscore for the the id reference '#left_nav'#left nav ul li a { display: block; width: 100%; height: 100%; text-decoration: none; color: #fff;}should be#left_nav ul li a { display: block; width: 100%; height: 100%; text-decoration: none; color: #fff;}Edit #2: you never use  comment tags within css styling, you should use only /* */ for adding comments.

margin-right to a paragraph

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived