Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Css gradient problem

  1. #1
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default Css gradient problem

    I'm using the css gradient effect. and it seems that if i put h2 tag in the paragraph, it dosent display as its supposed to. can anyone help me? i'm new to css.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    You can't have an h2 tag in a paragraph. This <p><h2></p> is invalid. Put your code up and sure someone can show you how to do what your trying while making it valid.

  3. #3
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    ohh. i get it. ok heres the code:
    Code:
    <html>
    <head>
    <title>Chat</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .shadow{
    border:1px solid silver;
    font:10pt arial;
    position:relative;
    display:inline;
    background:white;
    z-index:100
    }
    
    .shadow_inner{
    overflow:hidden;
    position:absolute;
    top: -1000px;
    filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
    opacity:0.1; /*firefox 1.5 opacity*/
    -moz-opacity:0.1; /*mozilla opacity*/
    -khtml-opacity:0.1; /*opacity*/
    z-index:10
    }
    
    </style>
    
    <script type="text/javascript">
    
    var gradientshadow={}
    gradientshadow.depth=6 //Depth of shadow in pixels
    gradientshadow.containers=[]
    
    gradientshadow.create=function(){
    var a = document.all ? document.all : document.getElementsByTagName('*')
    for (var i = 0;i < a.length;i++) {
    	if (a[i].className == "shadow") {
    		for (var x=0; x<gradientshadow.depth; x++){
    			var newSd = document.createElement("DIV")
    			newSd.className = "shadow_inner"
    			newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) 
    			if (a[i].getAttribute("rel"))
    				newSd.style.background = a[i].getAttribute("rel")
    			else
    				newSd.style.background = "black" //default shadow color if none specified
    			document.body.appendChild(newSd)
    		}
    	gradientshadow.containers[gradientshadow.containers.length]=a[i]
    	}
    }
    gradientshadow.position()
    window.onresize=function(){
    	gradientshadow.position()
    }
    }
    
    gradientshadow.position=function(){
    if (gradientshadow.containers.length>0){
    	for (var i=0; i<gradientshadow.containers.length; i++){
    		for (var x=0; x<gradientshadow.depth; x++){
      		var shadowdiv=document.getElementById("shadow"+i+"_"+x)
    			shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px"
    			shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px"
    			shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px"
    			shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px"
    		}
    	}
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", gradientshadow.create, false)
    else if (window.attachEvent)
    window.attachEvent("onload", gradientshadow.create)
    else if (document.getElementById)
    window.onload=gradientshadow.create
    
    </script>
    </head>
    
    <body background="img/gradient.jpg">
    <p class="shadow" style="display:block;" rel="#80C8FE"><img src="img/user-128x128.png"></p>
    <hr width="100%">
    <p class="shadow" style="display:block;" rel="#80C8FE"><h2>Friends</h2><br>abc<br>kg123<br></p>
    
    </body>
    </html>

    the h2 is in the 4th line from the bottom

  4. #4
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    anyone?

  5. #5
    Join Date
    Jan 2007
    Posts
    82
    Thanks
    30
    Thanked 18 Times in 17 Posts

    Default

    You <h2>tags</h2> Should be before the paragraph (p) tags. Move them outside of the paragraph.

  6. #6
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    i'll try it

  7. #7
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    but i dont want every thing in the paragraph in headers
    still confused

  8. #8
    Join Date
    Jan 2007
    Posts
    82
    Thanks
    30
    Thanked 18 Times in 17 Posts

    Default

    <h2>Text you want in the headers</h2>
    <p>Text you want in the paragraph</p>

  9. #9
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    thats almost what i want but read my code, the text in h2 has to be in the paragraph

  10. #10
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    use a span and give it the style that the h2 has.

    <p>blah<span>bigger blah</span>blah</p>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •