Use of css selectors

Under this line of code :
$profile_pic_btn = '<a href="#" >Change Avatar picture</a>';

Open in new window

I have add next:
$changePass_btn = '<a href="change_2.php">Change password</a>';

Open in new window


And here is the css for first "a"line. It positions  the link text "Change Avatar picture" under the  picture. How to change  element selector to so i might the target the second "a" with cass and position the second a link under the first one?
div#profile_pic_box > a {
	display: blok;
	position:absolute; 
	margin:205px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}

Open in new window

Ivan GolubarAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Let's look just at what the rendered  html is and I am going to guess that both links are inside the div?  

Get rid of the abosulute position and change the display:blok to display:block.  With those changes alone, you can see the the links line up under each other.


http://jsbin.com/batukugico/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
  <style>
  div#profile_pic_box > a {
    
	display: block;  /*blok changed to block*/
	/*position:absolute;*/
	margin:205px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}
  </style>
</head>
<body>
  <div id="profile_pic_box">
    <a href="#" >Change Avatar picture</a>
    <a href="change_2.php">Change password</a>
  </div>
</body>
</html>

Open in new window

0
 
Ivan GolubarAuthor Commented:
thank you
I think that there is 205px  betwen "a" in yours example.

And what to do in next case?
(a have attached also a picture of what i get now with /*position:absolute;*/),
(in red rectangle is what i would like to have)

	
$profile_pic_btn = '<a href="#" onclick="return false;" onmousedown="toggleElement(\'avatar_form\')">Change Avatar picture</a>';
$changePass_btn = '<a href="change_pass.php" onclick="return false;" onmousedown="toggleElement(\'avatar_form\')">Change password</a>';

Open in new window


function _(x){
	return document.getElementById(x);
}
function toggleElement(x){
	var x = _(x);
	if(x.style.display == 'block'){
		x.style.display = 'none';
	}else{
		x.style.display = 'block';
	}
}

Open in new window


Next is my css:
<style type="text/css">
div#profile_pic_box{float:right; border:#999 1px solid; width:200px; height:200px; margin:20px 50px 0px 0px; overflow-y:hidden;}
div#profile_pic_box > img{z-index:2000; width:200px;}
div#profile_pic_box > a {
/*display: block;  blok changed to block "this line don't make any difference because of script above"*/
/*position:absolute;*/
	margin:205px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;
}
div#profile_pic_box > form{
	display:none;
	position:absolute; 
	z-index:3000;
	padding:10px;
	opacity:.8;
	background:#F0FEC2;
	width:180px;
	height:180px;
}
div#profile_pic_box:hover a {
    display: block;
}
img.friendpics{border:#000 1px solid; width:40px; height:40px; margin:2px;}


</style>

Open in new window

Untitled.png
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
> I think that there is 205px  betwen "a" in yours example.
That is because it is spec'd in your css
margin:205px 0px 0px 60px;

Open in new window

Change the 205 to whatever you want.


Now you are posting something a little different. At this point, please post your rendered html page, not php.

This is php, not rendered html.
$profile_pic_btn = '<a href="#" onclick="return false;" onmousedown="toggleElement(\'avatar_form\')">Change Avatar picture</a>';

Open in new window

Run your page, view the source, copy and paste here. Better yet, try and recreate that page that generated your image using either http://jsbin.com, https://jsfiddle.net/, or https://codepen.io and that will be the easiest way for us to help you.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Ivan GolubarAuthor Commented:
This is working (check the attached photo):
Can it be done in this way ?
div#profile_pic_box  a:first-child {   
	display: block;  /*blok changed to block*/
	position:absolute;
	margin:205px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}
div#profile_pic_box  a:nth-child(2) {   
	display: block;  /*blok changed to block*/
	position:absolute;
	margin:225px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}

Open in new window



Next is complete css :
<style type="text/css">
div#profile_pic_box{float:right; border:#999 1px solid; width:200px; height:200px; margin:20px 50px 0px 0px; overflow-y:hidden;}
div#profile_pic_box > img{z-index:2000; width:200px;}
div#profile_pic_box  a:first-child {   
	display: block;  /*blok changed to block*/
	position:absolute;
	margin:205px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}
div#profile_pic_box  a:nth-child(2) {   
	display: block;  /*blok changed to block*/
	position:absolute;
	margin:225px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}

  
div#profile_pic_box > form{
	display:none;
	position:absolute;
	z-index:3000;
	padding:10px;
	opacity:.8;
	background:#F0FEC2;
	width:180px;
	height:180px;
}
div#profile_pic_box:hover a {
    display: block;
}
img.friendpics{border:#000 1px solid; width:40px; height:40px; margin:2px;}


</style>
<style type="text/css">
div#project_pic_box{float:right; border:#999 1px solid; width:250px; height:170px; margin:5px 80px 0px 0px; overflow-y:hidden;}
div#project_pic_box > img{z-index:2000; width:200px;}
div#project_pic_box > a {
	display: none;
	/*position:absolute;*/ 

	z-index:4000;
	background:#D8F08E;
	border:#81A332 1px solid;
	border-radius:3px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;
}

</style>

<style type="text/css">
textarea#statustext{width:735px; height:80px; padding:8px; border:#999 1px solid; font-size:16px;}
div.status_boxes{padding:12px; line-height:1.5em;}
div.status_boxes > div{padding:8px; }
div.status_boxes > div > b{font-size:12px;}
div.status_boxes > button{padding:5px; font-size:12px;}
textarea.replytext{width:98%; height:40px; padding:1%;}
div.reply_boxes{padding:12px;  }
div.reply_boxes > div > b{font-size:12px;}
</style>
<style type="text/css">
/* PAGE midlle*/


#pageMiddle{
	width: 750px;
	height:750px;
	 margin:  0px 300px auto;
	/*border-top: solid 1px #cfcfcf;*/
/*
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;*/
}
#pageMiddle > p{
	
font-family: Miriam, Helvetica, sans-serif;
}
#pageMiddle> #projectWindow{
 position:absolute;
    left:10px;
    top:110px; 
    
}
#pageMiddle> #userUserWindow{
    position:absolute;
    left:1100px;
    top:100px;
    font-family: Miriam, Helvetica, sans-serif;
}
.search1
{
  border: 1px solid #000000;
  width: 200px;
}

.search1 input[type="text"]
{
  background: none;
  border: 0 none;
  float: left;
  height: 1em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  width: 178px;
}

.search1 input[type="submit"]
{
  background: #CCCCCC url(http://3.com/wp-content/themes/4/images/searchIcon.jpg);
  border: 0 none;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 0px 0;
  text-indent: 100px;
  width: 22px;
}

#projectWindow  #c7 {
    border: 1px solid #999;
}

Open in new window

Untitled3.png
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You have not posted any html?
0
 
Ivan GolubarAuthor Commented:
Here it is....

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $u; ?></title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
 <script src="/wp-content/themes/net4/js/fabric.min.js"></script>
  <script src="/wp-content/themes/net4/js/jquery-3.2.1.min.js"></script>
  <script src="/wp-content/themes/net4/js/JSproject1.js"></script>
<style type="text/css">
div#profile_pic_box{float:right; border:#999 1px solid; width:200px; height:200px; margin:20px 50px 0px 0px; overflow-y:hidden;}
div#profile_pic_box > img{z-index:2000; width:200px;}
div#profile_pic_box  a:first-child {   
	display: block;  /*blok changed to block*/
	position:absolute;
	margin:205px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}
div#profile_pic_box  a:nth-child(2) {   
	display: block;  /*blok changed to block*/
	position:absolute;
	margin:225px 0px 0px 60px;
	z-index:4000;
	border-radius:1px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;}

  
div#profile_pic_box > form{
	display:none;
	position:absolute;
	z-index:3000;
	padding:10px;
	opacity:.8;
	background:#F0FEC2;
	width:180px;
	height:180px;
}
div#profile_pic_box:hover a {
    display: block;
}
img.friendpics{border:#000 1px solid; width:40px; height:40px; margin:2px;}


</style>
<style type="text/css">
div#project_pic_box{float:right; border:#999 1px solid; width:250px; height:170px; margin:5px 80px 0px 0px; overflow-y:hidden;}
div#project_pic_box > img{z-index:2000; width:200px;}
div#project_pic_box > a {
	display: none;
	/*position:absolute;*/ 

	z-index:4000;
	background:#D8F08E;
	border:#81A332 1px solid;
	border-radius:3px;
	padding:5px;
	font-size:12px;
	text-decoration:none;
	color:#60750B;
}

</style>

<style type="text/css">
textarea#statustext{width:735px; height:80px; padding:8px; border:#999 1px solid; font-size:16px;}
div.status_boxes{padding:12px; line-height:1.5em;}
div.status_boxes > div{padding:8px; }
div.status_boxes > div > b{font-size:12px;}
div.status_boxes > button{padding:5px; font-size:12px;}
textarea.replytext{width:98%; height:40px; padding:1%;}
div.reply_boxes{padding:12px;  }
div.reply_boxes > div > b{font-size:12px;}
</style>
<style type="text/css">
/* PAGE midlle*/


#pageMiddle{
	width: 750px;
	height:750px;
	 margin:  0px 300px auto;
	/*border-top: solid 1px #cfcfcf;*/
/*
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;*/
}
#pageMiddle > p{
	
font-family: Miriam, Helvetica, sans-serif;
}
#pageMiddle> #projectWindow{
 position:absolute;
    left:10px;
    top:110px; 
    
}
#pageMiddle> #userUserWindow{
    position:absolute;
    left:1100px;
    top:100px;
    font-family: Miriam, Helvetica, sans-serif;
}
.search1
{
  border: 1px solid #000000;
  width: 200px;
}

.search1 input[type="text"]
{
  background: none;
  border: 0 none;
  float: left;
  height: 1em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  width: 178px;
}

.search1 input[type="submit"]
{
  background: #CCCCCC url(http://www.com/wp-content/themes/net4/images/searchIcon.jpg);
  border: 0 none;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 0px 0;
  text-indent: 100px;
  width: 22px;
}

#projectWindow  #c7 {
    border: 1px solid #999;
}

</style>

<script type="text/javascript">

function _(x){
	return document.getElementById(x);
}
function toggleElement(x){
	var x = _(x);
	if(x.style.display == 'block'){
		x.style.display = 'none';
	}else{
		x.style.display = 'block';
	}
}
function ajaxObj( meth, url ) {
	var x = new XMLHttpRequest();
	x.open( meth, url, true );
	x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	return x;
}
function ajaxReturn(x){
	if(x.readyState == 4 && x.status == 200){
	    return true;	
	}
}
var scrollY = 0;
var distance = 40;
var speed = 24;
function autoScrollTo(el) {
	var currentY = window.pageYOffset;
	var targetY = document.getElementById(el).offsetTop;
	var bodyHeight = document.body.offsetHeight;
	var yPos = currentY + window.innerHeight;
	var animator = setTimeout('autoScrollTo(\''+el+'\')',24);
	if(yPos > bodyHeight){
		clearTimeout(animator);
	} else {
		if(currentY < targetY-distance){
		    scrollY = currentY+distance;
		    window.scroll(0, scrollY);
	    } else {
		    clearTimeout(animator);
	    }
	}
}
function resetScroller(el){
	var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
	var animator = setTimeout('resetScroller(\''+el+'\')',speed);
	if(currentY > targetY){
		scrollY = currentY-distance;
		window.scroll(0, scrollY);
	} else {
		clearTimeout(animator);
	}
}
////////////////////////////////_______________________________________
function friendToggle(type,user,elem){
	var conf = confirm("Press OK to confirm the '"+type+"' action for user <?php echo $u; ?>.");
	if(conf != true){
		return false;
	}
	_(elem).innerHTML = 'please wait ...';
	var ajax = ajaxObj("POST", "../php_parsers/friend_system.php");
	ajax.onreadystatechange = function() {
		if(ajaxReturn(ajax) == true) {
			if(ajax.responseText == "friend_request_sent"){
				_(elem).innerHTML = 'OK Friend Request Sent';
			} else if(ajax.responseText == "unfriend_ok"){
				_(elem).innerHTML = '<button onclick="friendToggle(\'friend\',\'<?php echo $u; ?>\',\'friendBtn\')">Request As Friend</button>';
			} else {
				alert(ajax.responseText);
				_(elem).innerHTML = 'Try again later';
			}
		}
	}
	ajax.send("type="+type+"&user="+user);
}


function blockToggle(type,blockee,elem){
	var conf = confirm("Press OK to confirm the '"+type+"' action on user <?php echo $u; ?>.");
	if(conf != true){
		return false;
	}
	var elem = document.getElementById(elem);
	elem.innerHTML = 'please wait ...';
	var ajax = ajaxObj("POST", "../php_parsers/block_system.php");
	ajax.onreadystatechange = function() {
		if(ajaxReturn(ajax) == true) {
			if(ajax.responseText == "blocked_ok"){
				elem.innerHTML = '<button onclick="blockToggle(\'unblock\',\'<?php echo $u; ?>\',\'blockBtn\')">Unblock User</button>';
			} else if(ajax.responseText == "unblocked_ok"){
				elem.innerHTML = '<button onclick="blockToggle(\'block\',\'<?php echo $u; ?>\',\'blockBtn\')">Block User</button>';
			} else {
				alert(ajax.responseText);
				elem.innerHTML = 'Try again later';
			}
		}
	}
	ajax.send("type="+type+"&blockee="+blockee);
}

function show_btn(){
   
}
window.onload = function() {
  actualproject2 = "<?php echo $_SESSION["actualproject"]; ?>";
  console.log(whichProjectToSave+"_ for useer window");
$.ajax({
  method:"POST",
  url: '/wp-content/themes/netobjectnote4/PgetJson.php',
  data:  {
    "getCanvas":1,
    "whichProject":actualproject2,
    },
    datatype: "text",
    success: function(strdate){
   canvas.loadFromJSON(strdate, function() {
     canvas.renderAll();
      console.log("load of canvas on user page");
      });
     },
     error: function(error, txtStatus) {
      console.log(txtStatus+" error on load of canvas on user page");
      console.log('error');
    }
 });
};

//"location.href='http://www.com';"
//var canvas = new fabric.Canvas('c7');
$(document).ready(function() {
    canvas = new fabric.Canvas('c7');
}); 
</script>
</script>
</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id="pageMiddle">
  
 <div id="profile_pic_box"><?php echo $changePass_btn; ?><?php echo $profile_pic_btn; ?><?php echo $avatar_form; ?><?php echo $profile_pic; ?></div>
  <h2><?php echo $u; ?> &nbsp; <input type="button" onclick="location.href='http://www.com';" value="Go back to project page " /></h2>
  
  <!--<p>Looking to your own profile (testing purpose)? <b>--><!--<?php echo $isOwner; ?></b></p>-->
  <p>Gender: <?php echo $sex; ?></p>
  <p>Country: <?php echo $country; ?></p>
  <p>User Level: <?php echo $userlevel; ?></p>
  <p>Join Date: <?php echo $joindate; ?></p>
  <p>Last Session: <?php echo $lastsession; ?></p>
 
  <p><span id="friendBtn"><?php echo $friend_button; ?></span></p>
  <p><span id="blockBtn"><?php echo $block_button; ?></span></p>
  
   <div id="projectWindow">
      
     <p><span id="partnerBtn"><?php echo $partner_button; ?></span></p> 
     <a>in actual project running:</a><br>
     <h2><?php echo (isset($_SESSION["actualproject"])) ? $_SESSION["actualproject"] : "Not Set" ?></h2>
    <canvas class="objectcanvas" id="c7" width="250" height="550"><br>
     
   </div>
 <div id="userUserWindow">
  
   <a> <?php echo $u; ?> </a>&nbsp;<a>friends:</a>
   <p><?php echo $friendsHTML; ?></p>
   <p>All members:</p>
   <p><?php echo $allUsersHTML ; ?></p>
  <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
  <form action="search.php" method="post">
    <a>Search for member:</a>
    <div class="search1">
      <input name="searchquery" type="text" size="70" maxlength="88">
     <input name="myBtn" type="submit">
    </div>
   <br>
   
  </form><br>
 
 </div>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That is html mixed with php code.  can you upload this page to your server and provide the link? Or run the page, view source (in the browser) and paste. Or try and recreate in one of the sites I mentioned such as jsbin.
0
 
Ivan GolubarAuthor Commented:
Actually i did paste just Html which is part of an Php page. My code structure is all made in this way (check below).
So i can't upload it to test sites because in Body i have Php echos.
Code is already ruining on my server i can upload Elements part, but the Source part is empty, pecause there is no a *.js file but *.php, which is invisible in browsers (correct me pleas, if am i  wrong here).
And the link to my page would not help because you have to be registered to access to my page. And any way you might then see only
Elements part (correct me pleas, if am i  wrong here).

<?php
//Php code with Ajax Queries  for DB  (that's why you might see in the Body Php variables)
>
<html>
<head>
<title></title>
    <style>
    </style>
    <script>
    </script>
</head>
  <body>
    //elements with echos of Php variables
  </body>
</html>

Open in new window


Any way to conclude i did get to solution of my question (check my replay (two replays back)). Now here we may continue, if  my solution is wrong or, if there is way to debug my code to help me also in other cases.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You have a front end (html, css) problem.  The only thing that matters here is the rendered html.  If you want help to fix the issue, you will need to set up a test case using only html and css. I tried doing that for you here, https://www.experts-exchange.com/questions/29090897/Use-of-css-selectors.html?anchor=a42510999¬ificationFollowed=205591940#a42510055 but you then posted slightly different code.

What you can do now is either adjust what I did for you to recreate the issue and that will help me find your issue. Or you can run your code in your private area, view source, copy, then paste the rendered code to your editor.  Once in your editor, obfuscate any private data. Save it, then take a final look in your browser to make sure the issue is recreated.  Then post that code here.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.