...

View Full Version : H1 not displaying as inline despite the CSS command



learningwebd
07-30-2011, 04:51 PM
MAIN CSS - Instructions

p {margin-top:1px;}
h1,h2 {display:inline-block; float:none; margin-bottom:0px; padding:0;}

TEXT CSS - Instructions

h1 {font-family:Arial;font-size:18px;font-weight:bold;font-style:normal;text-decoration:none;color:#000000;letter-spacing:0.0em;}

h2 {font-family:Arial;font-size:18px;font-weight:bold;font-style:italic;text-decoration:none;color:#000000;letter-spacing:0.0em;}





<!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">

... (straight to H1/H2 Paragraphs examples) ...

<p align="justify"><font face="Arial" size="3">
Welcome to the <a href="http://example.com" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><h1>Example</h1></a> website, <h2>Example</h2> ... </font></p>

<p align="justify"><font face="Arial" size="3"><h1>example</h1></font></p>



I look forward to hearing from you shortly,

LWD

learningwebd
07-30-2011, 04:58 PM
Also, I was wondering if you could verify that the solution to this issue works in IE8/Firefox & Safari (current version)

vikram1vicky
07-30-2011, 08:22 PM
If you want to make <h1> inline and want some content in same line... you have to define it's width because by default all block elements has 100% width of their parent element.

:)

learningwebd
07-30-2011, 10:03 PM
Example of css/html coding please as i have changed the width with no change IN DESIGN.

Sammy12
07-31-2011, 12:47 AM
you cannot define a width or a height once you make an element inline



h1 { display: inline; }


if you want to define a width, you have to float it to the left



h1 { display: inline; float: left; width: 200px; }


though floating defeats the whole purpose of display: inline;, its the only way to set a defined width/height

learningwebd
07-31-2011, 02:32 PM
What is the best practice for displaying H1/H2 inline with my content in the HTML/CSS structure as outlined in my
Code above ?... thanks for the previous info though Sammy, but it doesn't stop the H1 starting on a new line. So I require further knowledge which resolves my issue.

Kind regards

learningwebd
07-31-2011, 02:34 PM
If you want to make <h1> inline and want some content in same line... you have to define it's lenght because by default all block elements has 100% width of their parent element.

:)

What do u mean by "define it's length"?...

vikram1vicky
07-31-2011, 06:29 PM
What do u mean by "define it's length"?...


I meant width :)

Sammy12
07-31-2011, 06:45 PM
1.<p> and <h1> are display: block; by default. which means they take up all the width possible (in this case 100% of the screen)
-------------------------------------------------------------
<p>
-------------------------------------------------------------
-------------------------------------------------------------
<h1>
-------------------------------------------------------------



2. here's what float: left; to the <h1> will do
-------------------------------------------------------------
<p>
-------------------------------------------------------------
-----
<h1> everything underneath it will come up here
-----



3. now what if you floated them both to the left?
---- -----
<p> <h1> everything underneath it will come up here.
---- -----



4. so now all that's left is to "clear" your floats



.clear { clear:both; }



<div class="container">
<p></p>
<h1></h1>
<div class="clear"></div>
</div>
<div class="rest_of_content"></div>


or set a height equal to the greatest height of the <p> or <h1>. if h1 is the greatest height with 22px, set the .container to 22px height. That will push all the "rest of the content" down.

---- ----- -------------------------------------------------
<p> <h1> CLEARED
---- ----- -------------------------------------------------
everything underneath it will stay down

Sammy12
07-31-2011, 06:52 PM
In the <style> I set * { margin: 0; padding: 0; }. By default all tags have margins and paddings even though you don't put them there. This sets all tags to margin: 0; and padding: 0;

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-48.png

learningwebd
08-01-2011, 10:21 AM
In the <style> I set * { margin: 0; padding: 0; }. By default all tags have margins and paddings even though you don't put them there. This sets all tags to margin: 0; and padding: 0;

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-48.png

Thanks Sammy,

Your advice has been helpful...

HOWEVER, I am seeking coding which allows me to place h2 and h2s within my paragraph, not seperately.

Is that possible?

vikram1vicky
08-01-2011, 10:41 AM
If your mean to paragraph is <p> tag, then by W3C standards, you cannot have header tags (<h1>, <h2>,...) within <p> tag or <p> within header tags (<h1>, <h2>,...)

If you want to have heading for each paragraph, try following code:



<div>
<h2>some header text</h2>
<p>some text here.......</p>
</div>
<div>
<h2>some header text</h2>
<p>some text here.......</p>
</div>
Let me know if it is same you are asking or your query is different form this....

learningwebd
08-01-2011, 11:18 AM
If your mean to paragraph is <p> tag, then by W3C standards, you cannot have header tags (<h1>, <h2>,...) within <p> tag or <p> within header tags (<h1>, <h2>,...)

If you want to have heading for each paragraph, try following code:



<div>

<h2>some header text</h2>
<p>some text here.......</p>
</div>
<div>
<h2>some header text</h2>
<p>some text here.......</p>
</div>
Let me know if it is same you are asking or your query is different form this....


Thanks Vik,

I had realized this a while ago, but wondered if there was a hack. O well, I have settlled for making an image a h1 and a title as a h2. Thanks again Sammy and Vikram!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum